Learn D3.js

Drawing points and text

The function created with d3.geoPath() only generates path strings, so they are only good for <path> elements. If you want to draw points using other shapes, such as <circle> and <rect>, you need to translate every pixel position from geographical to pixel coordinates. This is easily done with the path's projection function. Projections work like two-dimensional scale functions, initialized with a default pixel range of [900,500]:

const projection = d3.geoMercator();const pixels = projection([100,-50]); // returns [746.94, 484.58]

For this example the data needs to be split into separate datasets so that continent outlines, rivers and cities can be treated differently. They are filtered by their geometry.type:

const ...