Skip to content

Instantly share code, notes, and snippets.

@riccardoklinger

riccardoklinger/projections.html

Last active May 17, 2019 06:05
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 riccardoklinger/cbd0fbed76562ccfa8ceafe368b6c7ef to your computer and use it in GitHub Desktop.
Save riccardoklinger/cbd0fbed76562ccfa8ceafe368b6c7ef to your computer and use it in GitHub Desktop.
Download ZIP
Choose you projection
Raw
projections.html
<!DOCTYPE html>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://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 {
stroke-dasharray: 2,7;
stroke-width: 2;
fill: none;
stroke: black;
}
</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("./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>
Display the source blob
Display the rendered blob
Raw
world-110m.json
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment