Mercurial > hg > NetworkVis

 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>
author	Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
date	Thu, 01 Oct 2015 17:17:27 +0200
parents
children