Mercurial > hg > NetworkVis

diff 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
line wrap: on
line diff
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/d3s_examples/python-neo4jrestclient/static/index.html	Thu Oct 01 17:17:27 2015 +0200
@@ -0,0 +1,117 @@
+ d3noob’s block #5193723 March 19, 2013
+World map with zoom / pan and cities
+
+Open in a new window.
+
+A World map with zoom / pan functionality and added markers on cities.
+index.html
+#
+
+<!DOCTYPE html>
+<meta charset="utf-8">
+<style>
+path {
+  stroke: white;
+  stroke-width: 0.25px;
+  fill: grey;
+}
+</style>
+<body>
+<script src="http://d3js.org/d3.v3.min.js"></script>
+<script src="http://d3js.org/topojson.v0.min.js"></script>
+<script>
+var width = 960,
+    height = 500;
+
+var projection = d3.geo.mercator()
+    .center([0, 0 ])
+    .scale(200)
+    .rotate([-180,0]);
+
+var svg = d3.select("body").append("svg")
+    .attr("width", width)
+    .attr("height", height);
+
+var path = d3.geo.path()
+    .projection(projection);
+
+var g = svg.append("g");
+
+// load and display the World
+d3.json("json/world-110m2.json", function(error, topology) {
+
+// load and display the cities
+d3.json("graph", function(error, data) {
+	
+	 var link = g.selectAll(".link")
+	    .data(data.links).enter()
+	    .append("line")
+	    .attr("stroke","blue")
+	    .attr("stroke-width",1)
+		.attr("class", "link")
+		.attr("x1", function(d) { 
+			var s=data.nodes[d.source];
+			return projection([s.lon, s.lat])[0];
+			})
+	    .attr("y1", function(d) { 
+			var s=data.nodes[d.source];
+			return projection([s.lon, s.lat])[1];
+			})
+	    .attr("x2", function(d) { 
+			var s=data.nodes[d.target];
+			return projection([s.lon, s.lat])[0];
+			})
+	    .attr("y2", function(d) { 
+			var s=data.nodes[d.target];
+			return projection([s.lon, s.lat])[1];
+			});
+       
+
+    var node = g.selectAll("circle")
+       .data(data.nodes)
+       .enter()
+       .append("a")
+				  .attr("xlink:href", function(d) {
+					  return "https://drupal.mpiwg-berlin.mpg.de/sphaera/node/"+d.title;}
+				  )
+       .append("circle")
+       .attr("cx", function(d) {
+               return projection([d.lon, d.lat])[0];
+       })
+       .attr("cy", function(d) {
+               return projection([d.lon, d.lat])[1];
+       })
+       .attr("r", 5)
+       .style("fill", "red");
+    
+    
+   
+});
+
+
+g.selectAll("path")
+      .data(topojson.object(topology, topology.objects.countries)
+          .geometries)
+    .enter()
+      .append("path")
+      .attr("d", path)
+});
+
+// zoom and pan
+var zoom = d3.behavior.zoom()
+    .on("zoom",function() {
+        g.attr("transform","translate("+ 
+            d3.event.translate.join(",")+")scale("+d3.event.scale+")");
+        g.selectAll("circle")
+            .attr("d", path.projection(projection));
+        g.selectAll("path")  
+            .attr("d", path.projection(projection)); 
+
+  });
+
+svg.call(zoom)
+
+</script>
+</body>
+</html>
+