roncando

@roncando·3 public vizzes

Choropleth map

A choropleth map colors countries by income group using a categorical color scale, with a hover effect that turns each country red and a tooltip showing the country name and income group. The visualization loads geographic data from the World Atlas TopoJSON and TSV files, processes it with `topojson.feature` and `d3.tsv`, and projects it using `d3.geoNaturalEarth1` and `d3.geoPath`. A custom legend built with `d3.scaleOrdinal` and `schemeSpectral` renders interactive color swatches, while `d3.zoom` enables panning and zooming on the SVG map.

Aug 27, 2019

Loading thumbnail…

Choropleth map

A choropleth map visualizes global income groups using a divergent spectral color scale, with country names and income categories shown on hover. The map uses a natural Earth projection via `d3.geoPath` and supports zooming and panning through `d3.zoom`. World geometry comes from TopoJSON (50m), enriched with TSV metadata, while `d3.scaleOrdinal` drives the color mapping. A legend, built with a reusable colorLegend module, displays the categorical scale; hover effects highlight countries in red.

Aug 27, 2019

Loading thumbnail…

Choropleth map

This example displays a choropleth map of the world, coloring each country according to its income group using a categorical color scale. The visualization loads geographic data from the World Atlas TopoJSON and TSV files, projecting it with `d3.geoNaturalEarth1` and rendering paths via `d3.geoPath`. A custom legend component uses D3 selections to show color categories. The map supports zoom and pan through `d3.zoom`, and hovering over a country highlights it in red while a tooltip reveals its name and income group.

Aug 27, 2019