Last active
December 12, 2015 07:49
-
-
Save mortenjohs/4739921 to your computer and use it in GitHub Desktop.
D3 Morphing Map Projections
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> | |
<script src="http://d3js.org/topojson.v0.min.js"></script> | |
<style> | |
.background { | |
fill: #a4bac7; | |
} | |
.foreground { | |
fill: none; | |
stroke: #333; | |
stroke-width: 1.5px; | |
} | |
.graticule { | |
fill: none; | |
stroke: #fff; | |
stroke-width: .5px; | |
} | |
.graticule :nth-child(2n) { | |
stroke-dasharray: 2,2; | |
} | |
.land { | |
fill: #d7c7ad; | |
stroke: #766951; | |
} | |
.boundary { | |
fill: none; | |
stroke: #a5967e; | |
} | |
</style> | |
<body> | |
<div id="current_proj_info"></div> | |
<div id="myDiv"></div> | |
<script> | |
var width = 960, | |
height = 500; | |
var projection = d3.geo.mercator() | |
.scale(490); | |
var path = d3.geo.path() | |
.projection(projection); | |
var graticule = d3.geo.graticule(); | |
var svg = d3.select("body").append("svg") | |
.attr("width", width) | |
.attr("height", height); | |
svg.append("path") | |
.datum(graticule.outline) | |
.attr("class", "background") | |
.attr("d", path); | |
svg.append("g") | |
.attr("class", "graticule") | |
.selectAll("path") | |
.data(graticule.lines) | |
.enter().append("path") | |
.attr("d", path); | |
svg.append("path") | |
.datum(graticule.outline) | |
.attr("class", "foreground") | |
.attr("d", path); | |
d3.json("/d/4090846/world-110m.json", function(error, world) { | |
svg.insert("path", ".graticule") | |
.datum(topojson.object(world, world.objects.land)) | |
.attr("class", "land") | |
.attr("d", path); | |
svg.insert("path", ".graticule") | |
.datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a.id !== b.id; })) | |
.attr("class", "boundary") | |
.attr("d", path); | |
}); | |
set_projection(new Option("Mercator", "mercator", false, false)); | |
function set_projection(option) { | |
proj = option.value | |
projection = eval("d3.geo."+proj+"();"); | |
path = d3.geo.path() | |
.projection(projection); | |
svg.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]) | |
} | |
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