Skip to content

Instantly share code, notes, and snippets.

@mortenjohs

mortenjohs/index.html

Last active December 12, 2015 08:18
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mortenjohs/4742558 to your computer and use it in GitHub Desktop.
Save mortenjohs/4742558 to your computer and use it in GitHub Desktop.
Download ZIP
D3 Map Projections Morphing
Raw
index.html
<!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>
Display the source blob
Display the rendered blob
Raw
world-countries.json
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@mortenjohs
Copy link
Author

More info: http://m635j520.blogspot.fr/2013/02/d3-map-projections-morphing.html

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment