lqmpl

@lqmpl·2 public vizzes

Fork of Let's make a map with D3.js!

This example displays a natural Earth projection map with countries filled in light green and the ocean shown in blue, using an SVG rendering approach. The code loads world geography data from the world-atlas TopoJSON file and converts it to GeoJSON features via TopoJSON’s feature function. D3’s geoNaturalEarth1 projection and geoPath generator define the map’s layout, while the visualization waits for the JSON promise to resolve before appending country paths with a stroke for borders. The sphere outline is drawn separately from a GeoJSON Sphere object.

Oct 31, 2022

Loading thumbnail…

h

A choropleth map of world countries colored by economic group, with an interactive color legend that filters the map. Hovering reveals a country’s name and value via a `title` tooltip, while clicking a legend tick toggles highlighting of that category and dims others. Built with D3 v5, it uses `geoNaturalEarth1` projection with `geoPath`, `scaleOrdinal` and `schemeSpectral`, `zoom` for panning, and `topojson.feature` to load world-atlas data.

Oct 31, 2022