| license: gpl-3.0 |
Use the dials on the left to adjust the rotation of a geographic projection. D3 supports three-axis rotation, allowing you to adjust the lambda (λ), phi (φ) and gamma (γ) axes.
This map uses an orthographic projection with D3.js and Topojson to draw a map of the world's countries onto a globe, rendered here with a graticule that is 10° by 10°.
The world countries polygons were downloaded from ArcGIS.
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <style> | |
| body { | |
| font-family: "Helvetica Neue", sans-serif; | |
| margin: 0; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <script src="https://d3js.org/topojson.v1.min.js"></script> | |
| <script> | |
| var width = window.innerWidth, height = window.innerHeight; | |
| var projection = d3.geoOrthographic() | |
| .scale(width / 4.1) | |
| .translate([width / 2, height / 2]) | |
| .clipAngle(90 + 1e-6) | |
| .precision(1) | |
| .rotate([0, 0]); | |
| var path = d3.geoPath() | |
| .projection(projection); | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width) | |
| .attr("height", height); | |
| var g = svg.append("g"); | |
| var graticule = d3.geoGraticule() | |
| .step([10, 10]); | |
| g.append("path") | |
| .datum(graticule) | |
| .attr("class", "graticule") | |
| .attr("d", path) | |
| .style("fill", "#fff") | |
| .style("stroke", "#ccc"); | |
| var dials = [{ | |
| name: "λ", | |
| scale: d3.scaleLinear().domain([40, height / 2 - 40]).range([-180, 180]), | |
| rscale: d3.scaleLinear().domain([-180, 180]).range([40, height / 2 - 40]) | |
| },{ | |
| name: "φ", | |
| scale: d3.scaleLinear().domain([40, height / 2 - 40]).range([90, -90]), | |
| rscale: d3.scaleLinear().domain([90, -90]).range([40, height / 2 - 40]) | |
| },{ | |
| name: "γ", | |
| scale: d3.scaleLinear().domain([40, height / 2 - 40]).range([180, -180]), | |
| rscale: d3.scaleLinear().domain([180, -180]).range([40, height / 2 - 40]) | |
| }]; | |
| svg.selectAll(".dial-rect") | |
| .data(dials) | |
| .enter().append("rect") | |
| .attr("class", "dial-rect") | |
| .attr("x", function(d,i){ return 45 * (i + 1); }) | |
| .attr("y", 40) | |
| .attr("width", 20) | |
| .attr("height", height / 2 - 80) | |
| .attr("rx", 10) | |
| .attr("ry", 10) | |
| .style("stroke", "#ccc") | |
| .style("fill", "#3a403d"); | |
| svg.selectAll(".dial-text") | |
| .data(dials) | |
| .enter().append("text") | |
| .attr("class", "dial-text") | |
| .attr("x", function(d,i) { return 45 * (i + 1); }) | |
| .attr("y", 15) | |
| .attr("dx", 10) | |
| .attr("text-anchor", "middle") | |
| .style("fill", "#3a403d") | |
| .text(function(d){ return d.name; }); | |
| svg.selectAll(".dial-circle") | |
| .data(dials) | |
| .enter().append("circle") | |
| .attr("class", function(d){ return "dial-circle dial-" + d.name; }) | |
| .attr("cx", function(d,i){ return 45 * (i + 1) + 10; }) | |
| .attr("cy", function(d){ return d.rscale(0); }) | |
| .attr("r", 20) | |
| .style("stroke", "#aaa") | |
| .style("fill", "#ccc") | |
| .style("cursor", "ns-resize") | |
| .call(d3.drag().on("drag", dragged)); | |
| svg.selectAll(".dial-circle-text") | |
| .data(dials) | |
| .enter().append("text") | |
| .attr("class", function(d) { return "dial-circle-text dial-" + d.name; }) | |
| .attr("x", function(d,i){ return 45 * (i + 1) + 10; }) | |
| .attr("y", function(d){ return d.rscale(0) + 5; }) | |
| .attr("text-anchor", "middle") | |
| .style("font-size", ".7em") | |
| .style("cursor", "ns-resize") | |
| .text("0") | |
| .call(d3.drag().on("drag", dragged)); | |
| function dragged(d){ | |
| var y = d3.mouse(this)[1]; | |
| y < 40 ? y = 40 : y = y; | |
| y > height / 2 - 40 ? y = height / 2 - 40 : y = y; | |
| d3.select(".dial-circle.dial-" + d.name) | |
| .attr("cy", y); | |
| d3.select(".dial-circle-text.dial-" + d.name) | |
| .attr("y", y + 5) | |
| .text(Math.round(d.scale(y))); | |
| projection.rotate([dials[0].scale(d3.select(".dial-λ").attr("cy")), dials[1].scale(d3.select(".dial-φ").attr("cy")), dials[2].scale(d3.select(".dial-γ").attr("cy"))]) | |
| g.selectAll("path").attr("d", path); | |
| } | |
| var c = d3.scaleOrdinal(d3.schemeCategory20); | |
| d3.json("countries.json", function(error, data){ | |
| g.selectAll(".subunit") | |
| .data(topojson.feature(data, data.objects.polygons).features) | |
| .enter().append("path") | |
| .attr("class", "subunit") | |
| .attr("d", path) | |
| .style("stroke", "#fff") | |
| .style("stroke-width", "1px") | |
| .style("fill", function(d,i){ return c(i); }) | |
| .style("opacity", ".6"); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
