little-face

@little-face·2 public vizzes

HTML Starter

This example presents a choropleth map of board game ratings by country, with a dropdown to switch between games. Built with React and SVG, it uses D3.js modules like `d3.geoPath` and `d3.geoNaturalEarth1` for map projections, `d3.scaleQuantile` for color encoding, and `d3.nest` for hierarchical data aggregation. The map renders from `world_countries.json` and `ratings-by-country.csv` data, with tooltips on each country.

Dec 5, 2020

Loading thumbnail…

Choropleth Map

A choropleth map colors each country according to its economy category, using an ordinal color scale with a spectral scheme. The visualization loads world geography from TopoJSON and country metadata from TSV, then renders the map as SVG paths with a natural Earth projection. Hovering highlights a country in red, and a custom color legend displays the category colors. The map supports zooming and panning through d3.zoom, with d3.geoPath generating the geographic shapes.

Dec 4, 2020