| license: gpl-3.0 |
D3 will "break and make art" if you adjust the clipAngle of an orthographic projection created with d3.geoOrthographic().
To create the disco globe effect, set the clipAngle to 270.
This map uses an with D3.js and Topojson to draw a map of the world's countries onto a spinning globe, rendered here with a graticule that is 10° by 10°.
The world countries polygons were downloaded from ArcGIS.
See also:
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <style> | |
| body { | |
| font-family: "Helvetica Neue", sans-serif; | |
| margin: 0; | |
| background: #3a403d; | |
| } | |
| </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(270) | |
| .precision(1); | |
| 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"); | |
| d3.timer(function(elapsed) { | |
| projection.rotate([.05 * elapsed - 120, 0, 0]); | |
| 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> |
