Last active
December 12, 2015 08:18
-
-
Save mortenjohs/4742558 to your computer and use it in GitHub Desktop.
D3 Map Projections Morphing
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"> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script src="http://d3js.org/d3.geo.projection.v0.min.js"></script> | |
| <style> | |
| .background { | |
| fill: none; | |
| pointer-events: all; | |
| } | |
| #states path { | |
| fill: #aaa; | |
| stroke: #fff; | |
| stroke-width: 1.5px; | |
| } | |
| #states path:hover { | |
| stroke: red; | |
| } | |
| #states .active { | |
| fill: steelblue; | |
| } | |
| </style> | |
| <body> | |
| <div id="current_proj_info"></div> | |
| <div id="myDiv"></div> | |
| <script> | |
| var width = 960, | |
| height = 500, | |
| centered; | |
| var projection = d3.geo.winkel3() // ; | |
| .scale(width/6) | |
| .translate([width / 2, height / 2]); | |
| var path = d3.geo.path() | |
| .projection(projection); | |
| var zoom = d3.behavior.zoom() | |
| .translate(projection.translate()) | |
| .scale(projection.scale()) | |
| .scaleExtent([height/8, 8 * height]) | |
| .on("zoom", zoom); | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width) | |
| .attr("height", height); | |
| var states = svg.append("g") | |
| .attr("id", "states") | |
| .call(zoom); | |
| states.append("rect") | |
| .attr("class", "background") | |
| .attr("width", width) | |
| .attr("height", height); | |
| d3.json("/d/4742558/world-countries.json", function(json) { | |
| states.selectAll("path") | |
| .data(json.features) | |
| .enter().append("path") | |
| .attr("d", path) | |
| .on("click", click); | |
| }); | |
| set_projection(new Option("Mercator", "mercator", false, false)); | |
| function click(d) { | |
| // If the click was on the centered state or the background, re-center. | |
| // Otherwise, center the clicked-on state. | |
| if (!d || centered === d) { | |
| projection.translate([width / 2, height / 2]); | |
| centered = null; | |
| } else { | |
| var centroid = path.centroid(d), | |
| translate = projection.translate(); | |
| projection.translate([ | |
| translate[0] - centroid[0] + width / 2, | |
| translate[1] - centroid[1] + height / 2 | |
| ]); | |
| centered = d; | |
| } | |
| states.selectAll("path") | |
| .classed("active", centered && function(d) { return d === centered; }); | |
| // Transition to the new projection. | |
| states.selectAll("path").transition() | |
| .duration(1000) | |
| .attr("d", path); | |
| } | |
| function set_projection(option) { | |
| proj = option.value | |
| projection = eval("d3.geo."+proj+"();"); | |
| path = d3.geo.path() | |
| .projection(projection); | |
| // zoom.translate(projection.translate()); | |
| states.selectAll("path").transition() | |
| .duration(1000) | |
| .attr("d", path); | |
| var link = "https://github.com/mbostock/d3/wiki/Geo-Projections#wiki-" + proj | |
| d3.selectAll("div#current_proj_info").html("Current projection: <a href=\""+link+"\">"+option.text+"</a>"); | |
| } | |
| function projection_selected(e){ | |
| set_projection(e.target[e.target.selectedIndex]) | |
| } | |
| function zoom() { | |
| projection.translate(d3.event.translate).scale(d3.event.scale); | |
| states.selectAll("path").attr("d", path); | |
| } | |
| var newSelect = document.createElement("select"); | |
| newSelect.id = "selectlistid"; // add some attributes | |
| newSelect.onchange = projection_selected; // call the somethingChanged function when a change is made | |
| newSelect[newSelect.length] = new Option("Aitoff","aitoff",false, false) | |
| newSelect[newSelect.length] = new Option("Albers equal-area conic","albers",false, false); | |
| newSelect[newSelect.length] = new Option("Armadillo","armadillo",false, false); | |
| newSelect[newSelect.length] = new Option("August conformal","august",false, false); | |
| newSelect[newSelect.length] = new Option("Lambert azimuthal equal-area","azimuthalEqualArea",false, false); | |
| newSelect[newSelect.length] = new Option("azimuthal equidistant","azimuthalEquidistant",false, false); | |
| newSelect[newSelect.length] = new Option("Baker Dinomic","baker",false, false); | |
| newSelect[newSelect.length] = new Option("Berghaus Star","berghaus",false, false); | |
| newSelect[newSelect.length] = new Option("Boggs eumorphic","boggs",false, false); | |
| newSelect[newSelect.length] = new Option("Bonne","bonne",false, false); | |
| newSelect[newSelect.length] = new Option("Bromley","bromley",false, false); | |
| newSelect[newSelect.length] = new Option("Collignon","collignon",false, false); | |
| newSelect[newSelect.length] = new Option("Lambert conformal conic","conicConformal",false, false); | |
| newSelect[newSelect.length] = new Option("conic equidistant","conicEquidistant",false, false); | |
| newSelect[newSelect.length] = new Option("Craig retroazimuthal","craig",false, false); | |
| newSelect[newSelect.length] = new Option("Craster parabolic","craster",false, false); | |
| newSelect[newSelect.length] = new Option("cylindrical equal-area, Gall–Peters, Hobo–Dyer, Tobler world-in-a-square","cylindricalEqualArea",false, false); | |
| newSelect[newSelect.length] = new Option("Eckert I","eckert1",false, false); | |
| newSelect[newSelect.length] = new Option("Eckert II","eckert2",false, false); | |
| newSelect[newSelect.length] = new Option("Eckert III","eckert3",false, false); | |
| newSelect[newSelect.length] = new Option("Eckert IV","eckert4",false, false); | |
| newSelect[newSelect.length] = new Option("Eckert V","eckert5",false, false); | |
| newSelect[newSelect.length] = new Option("Eckert VI","eckert6",false, false); | |
| newSelect[newSelect.length] = new Option("Eisenlohr conformal","eisenlohr",false, false); | |
| newSelect[newSelect.length] = new Option("Equirectangular (Plate Carrée)","equirectangular",false, false); | |
| newSelect[newSelect.length] = new Option("Fahey","fahey",false, false); | |
| newSelect[newSelect.length] = new Option("gnomonic","gnomonic",false, false); | |
| newSelect[newSelect.length] = new Option("Gringorten","gringorten",false, false); | |
| newSelect[newSelect.length] = new Option("Guyou hemisphere-in-a-square","guyou",false, false); | |
| newSelect[newSelect.length] = new Option("Hammer, Eckert–Greifendorff, quartic authalic, Briesemeister","hammer",false, false); | |
| newSelect[newSelect.length] = new Option("Hammer retroazimuthal","hammerRetroazimuthal",false, false); | |
| newSelect[newSelect.length] = new Option("HEALPix","healpix",false, false); | |
| newSelect[newSelect.length] = new Option("Hill eucyclic, Maurer No. 73","hill",false, false); | |
| newSelect[newSelect.length] = new Option("Goode homolosine","homolosine",false, false); | |
| newSelect[newSelect.length] = new Option("Kavrayskiy VII","kavrayskiy7",false, false); | |
| newSelect[newSelect.length] = new Option("Lagrange conformal","lagrange",false, false); | |
| newSelect[newSelect.length] = new Option("Larrivée","larrivee",false, false); | |
| newSelect[newSelect.length] = new Option("Laskowski tri-optimal","laskowski",false, false); | |
| newSelect[newSelect.length] = new Option("Littrow","littrow",false, false); | |
| newSelect[newSelect.length] = new Option("loximuthal","loximuthal",false, false); | |
| newSelect[newSelect.length] = new Option("Mercator","mercator",false, true); | |
| newSelect[newSelect.length] = new Option("Miller","miller",false, false); | |
| newSelect[newSelect.length] = new Option("Mollweide, Atlantis","mollweide",false, false); | |
| newSelect[newSelect.length] = new Option("McBryde–Thomas flat-polar parabolic","mtFlatPolarParabolic",false, false); | |
| newSelect[newSelect.length] = new Option("McBryde–Thomas flat-polar quartic","mtFlatPolarQuartic",false, false); | |
| newSelect[newSelect.length] = new Option("McBryde–Thomas flat-polar sinusoidal","mtFlatPolarSinusoidal",false, false); | |
| newSelect[newSelect.length] = new Option("Natural Earth","naturalEarth",false, false); | |
| newSelect[newSelect.length] = new Option("Nell–Hammer","nellHammer",false, false); | |
| newSelect[newSelect.length] = new Option("orthographic","orthographic",false, false); | |
| newSelect[newSelect.length] = new Option("Pierce quincuncial","peirceQuincuncial",false, false); | |
| newSelect[newSelect.length] = new Option("Polyconic","polyconic",false, false); | |
| newSelect[newSelect.length] = new Option("Robinson","robinson",false, false); | |
| newSelect[newSelect.length] = new Option("satellite (tilted perpsective)","satellite",false, false); | |
| newSelect[newSelect.length] = new Option("sinusoidal","sinusoidal",false, false); | |
| newSelect[newSelect.length] = new Option("Sinu-Mollweide","sinuMollweide",false, false); | |
| newSelect[newSelect.length] = new Option("stereographic","stereographic",false, false); | |
| newSelect[newSelect.length] = new Option("Van der Grinten","vanDerGrinten",false, false); | |
| newSelect[newSelect.length] = new Option("Van der Grinten II","vanDerGrinten2",false, false); | |
| newSelect[newSelect.length] = new Option("Van der Grinten III","vanDerGrinten3",false, false); | |
| newSelect[newSelect.length] = new Option("Van der Grinten IV","vanDerGrinten4",false, false); | |
| newSelect[newSelect.length] = new Option("Wagner IV, Putniṇš P2´","wagner4",false, false); | |
| newSelect[newSelect.length] = new Option("Wagner VI","wagner6",false, false); | |
| newSelect[newSelect.length] = new Option("Wagner VII","wagner7",false, false); | |
| newSelect[newSelect.length] = new Option("Wiechel","wiechel",false, false); | |
| newSelect[newSelect.length] = new Option("Winkel Tripel","winkel3",false, false); | |
| document.getElementById('myDiv').appendChild(newSelect); // myDiv is the container to hold the select list | |
| </script> | |
| For more info <a href="https://github.com/mbostock/d3/wiki/Geo-Projections">click here</a>. | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
More info: http://m635j520.blogspot.fr/2013/02/d3-map-projections-morphing.html