| 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 transparent globe effect, set the clipAngle to 180.
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:
forked from HarryStevens's block: Transparent Earth
| <!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(180) | |
| .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> |