This is a simple example to test and visualise the different possible projections of D3.
Descriptions on the projections can be found here:
* [Geo Projections](https://github.com/mbostock/d3/wiki/Geo-Projections)
See also:
* [Maps by Jason Davies](http://www.jasondavies.com/maps/)
* [Shows how to implement transitions with changing data Im about to solve this problem!!!](http://mbostock.github.io/d3/tutorial/bar-2.html)<a class="myLinks" href="" target="_blank">
| <!DOCTYPE html> | |
| <!-- http://bost.ocks.org/mike/map/ | |
| --> | |
| <meta charset="utf-8"> | |
| <title>Testing D3 projections</title> | |
| <link rel="stylesheet" href="../static/myStyles.css" /> | |
| <link rel="stylesheet" href="static/myStyles.css" /> | |
| <style> | |
| text { | |
| font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; | |
| font-size: 20px; | |
| pointer-events: none; | |
| } | |
| .graticule { | |
| fill: none; | |
| stroke: #777; | |
| } | |
| .boundary { | |
| fill: #ccc; | |
| fill-opacity: .8; | |
| stroke: #000; | |
| } | |
| </style> | |
| <body> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script src="http://d3js.org/topojson.v0.min.js"></script> | |
| <script src="http://d3js.org/d3.geo.projection.v0.min.js"></script> | |
| <script src="http://mourner.github.io/simplify-js/simplify.js"></script> | |
| Select a projection | |
| <div id=tester></div> | |
| <script> | |
| var menu = d3.select("#tester").append("form").attr("name","projForm"); | |
| var select = menu.append("select").attr("name","myProjDropDown").attr("onChange","show(value)"); | |
| var content = ["conicEquidistant","equirectangular","mercator","albersUsa","azimuthalEqualArea","conicConformal","orthographic","azimuthalEquidistant","conicEqualArea","gnomonic","stereographic","transverseMercator","albers"]; | |
| select.selectAll("option").data(content).enter() | |
| .append("option").attr("value",function(d){return d;}).text(function(d){return d;}); | |
| var width = 960, | |
| height = 500; | |
| var graticule = d3.geo.graticule() | |
| .extent([[-180, -90], [180, 90]]) | |
| .step([5, 10]); | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width) | |
| .attr("height", height); | |
| var info = svg.append("text").attr('x',width/2).attr('y',height/2).text('Loading...') | |
| var geometries = svg.append('g'); | |
| var graticules = svg.append('g'); | |
| var global_topo, | |
| gratics = graticules.append("path") | |
| .datum(graticule).attr("class", "graticule"), | |
| init = true; | |
| var path = d3.geo.path(); | |
| d3.json("ne_50m_admin0_topo.json", function(error, topo) { | |
| global_topo = topojson.object(topo, topo.objects.ne_50m_admin0).geometries; | |
| global_topo.forEach(function(geometry){ | |
| //console.log(geometry) | |
| if(geometry.type=='Polygon'){ | |
| geometry.coordinates = readPolygon(geometry.coordinates) | |
| } | |
| else if(geometry.type=='MultiPolygon'){ | |
| geometry.coordinates = geometry.coordinates.map(function(polygon){return readPolygon(polygon)}) | |
| } | |
| function readPolygon(poly){ | |
| return poly.map(function(d){ | |
| var dObject = pointsConversion(d, 'toObject'); | |
| var dObjectSimple = simplify(dObject,0.1,false) | |
| return pointsConversion(dObjectSimple, 'toArray'); | |
| }) | |
| } | |
| }) | |
| show("conicEquidistant"); | |
| info.remove(); | |
| }); | |
| function pointsConversion(points, direction){ | |
| var cache; | |
| if(direction=='toObject'){ | |
| cache = points.map(function(point){return {'y':point[0],'x':point[1]}}); | |
| } | |
| else if(direction=='toArray'){ | |
| cache = points.map(function(point){return [point.y,point.x]}); | |
| } | |
| return cache; | |
| } | |
| function show(proj){ | |
| var projection; | |
| switch (proj) { | |
| case "conicEquidistant": {projection = d3.geo.conicEquidistant();break;} | |
| case "equirectangular": {projection = d3.geo.equirectangular();break;} | |
| case "mercator": {projection = d3.geo.mercator();break;} | |
| case "albersUsa": {projection = d3.geo.albersUsa();break;} | |
| case "azimuthalEqualArea": {projection = d3.geo.azimuthalEqualArea();break;} | |
| case "conicConformal": {projection = d3.geo.conicConformal();break;} | |
| case "orthographic": {projection = d3.geo.orthographic();break;} | |
| case "azimuthalEquidistant": {projection = d3.geo.azimuthalEquidistant();break;} | |
| case "conicEqualArea": {projection = d3.geo.conicEqualArea();break;} | |
| case "gnomonic": {projection = d3.geo.gnomonic();break;} | |
| case "stereographic": {projection = d3.geo.stereographic();break;} | |
| case "transverseMercator": {projection = d3.geo.transverseMercator();break;} | |
| case "albers": {projection = d3.geo.albers();break;} | |
| } | |
| path.projection(projection); | |
| gratics.transition().duration(1000).attr("d", path); | |
| var geoms = geometries.selectAll("path") | |
| .data(global_topo, function(d) { return d.coordinates; }) | |
| geoms.transition().duration(2000).attr("d", path) | |
| geoms.enter() | |
| .append("path") | |
| .attr("class", "boundary") | |
| .transition().duration(2000) | |
| .attr("d", path); | |
| geoms.exit().remove(); | |
| } | |
| </script> | |
| </body> |
