Adrian Herzog

@aquilo·2 public vizzes

Choropleth Map

A choropleth map uses color to encode values across world countries. D3’s `geoPath` and `geoNaturalEarth1` projection render the map from TopoJSON data, while a TSV file supplies per-country attributes. The map color-fills each country by its `scalerank` value using an ordinal color scale. A separate legend component displays the color-to-value mapping, and zooming is enabled via the `zoom` event.

Nov 20, 2018

Loading thumbnail…

Let's make a map with D3.js!

This example visualizes the world’s countries as filled polygons on a natural Earth projection, with oceans rendered in blue and landmasses in light green. It uses D3.js v5’s `geoNaturalEarth1` projection and `geoPath` to generate SVG paths, while TopoJSON’s `feature` function extracts country boundaries from a 110m world-atlas GeoJSON dataset. The code draws a sphere background and then overlays each country’s path, applying thin black strokes for borders.

Nov 18, 2018