liveBook · Manning

Geo path generator

As explained in D3.js in Action, Third Edition

d3.geoPath is a D3 function that generates path representations for geographic data and can render them through a configured drawing context.

A geo path generator converts geographic data into SVG path descriptions. Configure it with a projection, then pass GeoJSON features to produce each path’s d attribute. section 13.2.1 section 13.7

Build a D3 map in three steps:

  • Choose and configure a projection such as geoEqualEarth or geoMercator. section 13.2.1
  • Initialize geoPath and connect it to the projection. section 13.2.1
  • Bind geographic features to SVG path elements and assign the generator to d. section 13.2.1

Rendering a world map

const projection = d3.geoEqualEarth() .translate([width / 2, height / 2]) .scale(220); const geoPathGenerator = d3.geoPath() .projection(projection); svg.selectAll(".country-path") .data(world.features) .join("path") .attr("d", geoPathGenerator);

With TopoJSON, decode features and shared borders first; the same generator can draw department paths and a separate border path without duplicated strokes. section 13.5

const projection = d3.geoEqualEarth()
  .translate([translationX, translationY])
  .scale(factor);

const geoPathGenerator = d3.geoPath()
  .projection(projection);

Inspect the compact projection-and-generator setup used before binding geographic data to paths. section 13.2.1

A configured geoPath can also draw vector data on Canvas through path.context; this improves performance by avoiding DOM elements but removes direct image interaction. section 13.6.2

How D3.js in Action, Third Edition covers it

How deep it goes
Explains projection configuration, path generation, SVG binding, TopoJSON borders, and Canvas context, but not generator internals.
Examples
Uses world maps, French departments, shared borders, and cities where Nobel laureates were born.
What it assumes
Uses geographic features, projections, SVG containers, and TopoJSON decoding as the surrounding implementation vocabulary.
What you can do after
Apply it via D3 to build projected SVG maps and render geographic data through a Canvas context.
How it connects
Connects geographic projections, GeoJSON, TopoJSON, SVG, Canvas, and D3 zooming and brushing.
Cover of D3.js in Action, Third Edition
liveBookmanning.com
Read D3.js in Action, Third Edition on liveBook Get the book at manning.com

Related concepts

This explainer was generated by Manning's knowledge graph from the text of D3.js in Action, Third Edition. The section links point to the parts of the book it draws on.