d3-geo VS d3-selection

This tutorial will show you how to convert publicly available shapefiles to TopoJSON to create interactive maps with d3/d3-geo. I will show you how to do this without the use of the command line so you can get into experimenting with d3 as fast as possible. If you are interested in working with shapefiles and TopoJSON in a more advanced fashion, I suggest you take a look at Mike Bostock’s recent multipart tutorials on command-line cartography.

geographical data handling system

For the globe spinning, I used d3 and topojson to render the world at whatever projection/rotation/etc I give it. Then, using requestAnimationFrame, every frame I slightly rotate the world. Then the "water" behind it is just a blue circle that has hidden overflow.

Using a d3-geo we make projection and a path generator to 'draw' the geographic lines

Thanks for the compliments! The territory data is coming from https://github.com/aourednik/historical-basemaps, I use this data to render an SVG map with D3.js. This is pretty powerful since you can control every part of the rendering mechanism. With D3-geo you can easily do the projections and graticule.

import * as d3 from "https://cdn.skypack.dev/[email protected]"; // create a D3 selection of the SVG itself - https://github.com/d3/d3-selection const svg = d3.select("#map"); // create a D3 selection of the image element const image = svg.selectChild("#image"); // create and configure an instance of zoom behaviour - https://github.com/d3/d3-zoom const zoom = d3.zoom().on("zoom", zoomed); // apply configured zoom behaviour to our svg svg.call(zoom); function zoomed(event) { const { transform } = event; // apply calculated transform to the image image.attr("transform", transform.toString()); }

jQuery-like data manipulation framework