FilippaNathhorst

@FilippaNathhorst·3 public vizzes

Choropleth Map with Interactive Filtering

A choropleth map colored by economy type uses an ordinal color scale and a Natural Earth projection to display global income groups. Users hover over legend items to filter the map, dimming non-selected countries and highlighting matches. Built with D3 v5, it combines `d3.geoPath`, `d3.geoNaturalEarth1`, and `d3.zoom` for panning, while the legend uses `d3.scaleOrdinal` and `schemeSpectral`. Data comes from the World Atlas TopoJSON and TSV files rendered as SVG elements.

Oct 30, 2019

Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map visualizes countries by economic classification, with a color legend that filters the map when clicked. Hovering over legend items highlights matching countries, while clicking isolates one category and dims others. The map uses d3.geoNaturalEarth1, d3.geoPath, and d3.zoom for panning and zooming, while d3.scaleOrdinal with schemeSpectral assigns colors. Data comes from TopoJSON world-atlas and TSV metadata, rendered as SVG paths. Interactive filtering is implemented via click handlers on legend groups, adjusting opacity and stroke width of country paths.

Oct 30, 2019

Loading thumbnail…

Lets make a face with D3.js

A horizontal bar chart displays population data for ten countries, with bars sized by population value and labeled along the y-axis. The example uses D3 v5’s `csv` loader to parse the data, `scaleLinear` and `scaleBand` to map values to positions, and `axisLeft`/`axisBottom` for axes. Bars are rendered as SVG `rect` elements with a steelblue fill, while the x-axis formats large numbers using `d3.format` with a custom suffix replacement.

Oct 30, 2019