The range of the graticules is limited to the front hemisphere, to enable the azimuthal projection. These projections are available in the geo.projection plugin.
-
-
Save syntagmatic/3711950 to your computer and use it in GitHub Desktop.
Hemisphere Projection Transitions
This file contains hidden or 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"> | |
| <style> | |
| body { | |
| height: 500px; | |
| position: relative; | |
| width: 960px; | |
| } | |
| #projection-menu { | |
| position: absolute; | |
| right: 10px; | |
| top: 10px; | |
| } | |
| .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> | |
| <select id="projection-menu"> | |
| <option value="aitoff">Aitoff</option> | |
| <option value="albers">Albers</option> | |
| <option selected value="azimuthal">Azimuthal</option> | |
| <option value="bonne">Bonne</option> | |
| <option value="equirectangular">Plate Carrée</option> | |
| <option value="kavrayskiy7">Kavrayskiy VII</option> | |
| <option value="mercator">Mercator</option> | |
| <option value="robinson">Robinson</option> | |
| <option value="wagner6">Wagner VI</option> | |
| <option value="winkel3">Winkel Tripel</option> | |
| </select> | |
| <script src="http://d3js.org/d3.v2.js"></script> | |
| <script src="https://raw.github.com/d3/d3-plugins/master/geo/projection/projection.js"></script> | |
| <script> | |
| var width = 960, | |
| height = 500; | |
| var path = d3.geo.path() | |
| .projection(d3.geo.azimuthal() | |
| .translate([width / 2 - .5, height / 2 - .5])); | |
| var graticule = d3.geo.graticule() | |
| .extent([[-90,-90],[90,90]]); | |
| 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.selectAll(".graticule") | |
| .data(graticule.lines) | |
| .enter().append("path") | |
| .attr("class", "graticule") | |
| .attr("d", path); | |
| svg.append("path") | |
| .datum(graticule.outline) | |
| .attr("class", "foreground") | |
| .attr("d", path); | |
| var menu = d3.select("#projection-menu").on("change", change), | |
| interval = setInterval(loop, 1500), | |
| i = 0, | |
| n = menu.selectAll("option")[0].length - 1; | |
| function loop() { | |
| var j = Math.floor(Math.random() * n); | |
| update(menu.property("selectedIndex", i = j + (j >= i)).property("value")); | |
| } | |
| function change() { | |
| clearInterval(interval); | |
| update(this.value); | |
| } | |
| function update(value) { | |
| projection = d3.geo[value]().translate([width / 2 - .5, height / 2 - .5]); | |
| if (value === "equirectangular") projection.scale(960); | |
| if (value === "albers") projection.scale(70); | |
| if (value === "azimuthal") projection.scale(200).mode("orthographic").origin([-200,300]); | |
| svg.selectAll("path").transition().duration(750).attr("d", path.projection(projection)); | |
| } | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment