| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <body> | |
| <script src="//d3js.org/d3.v3.min.js"></script> | |
| <script src="//d3js.org/topojson.v1.min.js"></script> | |
| <script> | |
| var width = 960, | |
| height = 500; | |
| var projection = d3.geo.stereographic() | |
| .clipAngle(125) | |
| .scale(300) | |
| .translate([width / 2, height / 2]) | |
| .precision(.1); | |
| var path = d3.geo.path() | |
| .projection(projection); | |
| var λ = d3.scale.linear() | |
| .domain([0, width]) | |
| .range([-180, 180]); | |
| var φ = d3.scale.linear() | |
| .domain([0, height]) | |
| .range([90, -90]); | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width) | |
| .attr("height", height); | |
| svg.on("mousemove", function() { | |
| var p = d3.mouse(this); | |
| projection.rotate([λ(p[0]), φ(p[1])]); | |
| svg.selectAll("path").attr("d", path); | |
| }); | |
| d3.json("/mbostock/raw/4090846/world-110m.json", function(error, world) { | |
| if (error) throw error; | |
| svg.append("path") | |
| .datum(topojson.feature(world, world.objects.land)) | |
| .attr("d", path); | |
| }); | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment