Last active
December 31, 2015 07:18
-
-
Save l-r/7952739 to your computer and use it in GitHub Desktop.
"infinite" map using d3...performance degrades too much, but interesting to see how it looks.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| body{ | |
| padding:0px; | |
| margin:0px; | |
| } | |
| path { | |
| stroke: white; | |
| stroke-width: 0.25px; | |
| } | |
| </style> | |
| <body> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script src="http://d3js.org/topojson.v1.min.js"></script> | |
| <script> | |
| var width = 900 | |
| var height = 600 | |
| var projection1 = d3.geo.mercator() | |
| .scale((width + 1) / 2 / Math.PI) | |
| .translate([width / 2, height / 2]) | |
| .precision(.1); | |
| var projection2 = d3.geo.mercator() | |
| .scale((width + 1) / 2 / Math.PI) | |
| .translate([width*1.5, height / 2]) | |
| .precision(.1); | |
| var projection3 = d3.geo.mercator() | |
| .scale((width + 1) / 2 / Math.PI) | |
| .translate([-width/2, height / 2]) | |
| .precision(.1); | |
| var path1 = d3.geo.path() | |
| .projection(projection1); | |
| var path2 = d3.geo.path() | |
| .projection(projection2); | |
| var path3 = d3.geo.path() | |
| .projection(projection3); | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width) | |
| .attr("height", height) | |
| var g1 = svg.append("g").attr("class", "active") | |
| var g2 = svg.append("g").attr("class", "active") | |
| var g3 = svg.append("g").attr("class", "active") | |
| d3.json("https://gist.github.com/l-r/7952739#file-world-110m2-json", function(error, world) { | |
| g1.append("path") | |
| .datum(topojson.feature(world, world.objects.countries)) | |
| .attr("d", path1); | |
| g2.append("path") | |
| .datum(topojson.feature(world, world.objects.countries)) | |
| .attr("d", path2); | |
| g3.append("path") | |
| .datum(topojson.feature(world, world.objects.countries)) | |
| .attr("d", path3); | |
| }); | |
| var zoom1 = d3.behavior.zoom() | |
| .on("zoom",function() { | |
| g1.attr("transform","translate("+ | |
| d3.event.translate.join(",")+")scale("+d3.event.scale+")") | |
| g1.selectAll("path") | |
| .attr("d", path1.projection(projection1)) | |
| g2.attr("transform","translate("+ | |
| d3.event.translate.join(",")+")scale("+d3.event.scale+")") | |
| g2.selectAll("path") | |
| .attr("d", path2.projection(projection2)) | |
| g3.attr("transform","translate("+ | |
| d3.event.translate.join(",")+")scale("+d3.event.scale+")") | |
| g3.selectAll("path") | |
| .attr("d", path3.projection(projection3)) | |
| }); | |
| svg.call(zoom1) | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment