Mercurial > hg > NetworkVis

annotate d3s_examples/python-neo4jrestclient/static/index.html @ 17:09c0a9ceb778

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
more pimping of commentaries_authors.
author casties
date Wed, 07 Oct 2015 15:41:00 +0200
parents 18ef6948d689
children
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
8
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
1 d3noob’s block #5193723 March 19, 2013
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
2 World map with zoom / pan and cities
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
3
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
4 Open in a new window.
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
5
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
6 A World map with zoom / pan functionality and added markers on cities.
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
7 index.html
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
8 #
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
9
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
10 <!DOCTYPE html>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
11 <meta charset="utf-8">
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
12 <style>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
13 path {
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
14 stroke: white;
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
15 stroke-width: 0.25px;
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
16 fill: grey;
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
17 }
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
18 </style>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
19 <body>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
20 <script src="http://d3js.org/d3.v3.min.js"></script>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
21 <script src="http://d3js.org/topojson.v0.min.js"></script>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
22 <script>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
23 var width = 960,
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
24 height = 500;
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
25
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
26 var projection = d3.geo.mercator()
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
27 .center([0, 0 ])
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
28 .scale(200)
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
29 .rotate([-180,0]);
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
30
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
31 var svg = d3.select("body").append("svg")
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
32 .attr("width", width)
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
33 .attr("height", height);
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
34
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
35 var path = d3.geo.path()
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
36 .projection(projection);
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
37
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
38 var g = svg.append("g");
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
39
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
40 // load and display the World
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
41 d3.json("json/world-110m2.json", function(error, topology) {
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
42
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
43 // load and display the cities
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
44 d3.json("graph", function(error, data) {
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
45
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
46 var link = g.selectAll(".link")
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
47 .data(data.links).enter()
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
48 .append("line")
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
49 .attr("stroke","blue")
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
50 .attr("stroke-width",1)
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
51 .attr("class", "link")
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
52 .attr("x1", function(d) {
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
53 var s=data.nodes[d.source];
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
54 return projection([s.lon, s.lat])[0];
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
55 })
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
56 .attr("y1", function(d) {
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
57 var s=data.nodes[d.source];
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
58 return projection([s.lon, s.lat])[1];
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
59 })
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
60 .attr("x2", function(d) {
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
61 var s=data.nodes[d.target];
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
62 return projection([s.lon, s.lat])[0];
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
63 })
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
64 .attr("y2", function(d) {
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
65 var s=data.nodes[d.target];
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
66 return projection([s.lon, s.lat])[1];
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
67 });
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
68
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
69
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
70 var node = g.selectAll("circle")
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
71 .data(data.nodes)
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
72 .enter()
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
73 .append("a")
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
74 .attr("xlink:href", function(d) {
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
75 return "https://drupal.mpiwg-berlin.mpg.de/sphaera/node/"+d.title;}
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
76 )
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
77 .append("circle")
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
78 .attr("cx", function(d) {
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
79 return projection([d.lon, d.lat])[0];
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
80 })
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
81 .attr("cy", function(d) {
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
82 return projection([d.lon, d.lat])[1];
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
83 })
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
84 .attr("r", 5)
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
85 .style("fill", "red");
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
86
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
87
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
88
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
89 });
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
90
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
91
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
92 g.selectAll("path")
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
93 .data(topojson.object(topology, topology.objects.countries)
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
94 .geometries)
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
95 .enter()
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
96 .append("path")
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
97 .attr("d", path)
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
98 });
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
99
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
100 // zoom and pan
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
101 var zoom = d3.behavior.zoom()
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
102 .on("zoom",function() {
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
103 g.attr("transform","translate("+
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
104 d3.event.translate.join(",")+")scale("+d3.event.scale+")");
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
105 g.selectAll("circle")
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
106 .attr("d", path.projection(projection));
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
107 g.selectAll("path")
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
108 .attr("d", path.projection(projection));
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
109
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
110 });
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
111
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
112 svg.call(zoom)
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
113
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
114 </script>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
115 </body>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
116 </html>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
117