Mercurial > hg > NetworkVis

comparison d3s_examples/python-neo4jrestclient/static/index.html @ 8:18ef6948d689

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