Skip to main content
SimilarExport ZIP
100%

Choropleth with Multidimensional Filtering

✓ Published3🌍 Public
CCurran Kelleher
Last edited Oct 9, 2025
Created on Aug 20, 2024

A choropleth map of unemployment rates by U.S. county is linked to two interactive histograms, one for unemployment and one for educational attainment. Brushing a histogram filters the map to highlight counties within the selected range, while hovering over a county reveals its values in both histograms. The visualization uses D3’s `geoPath`, `scaleQuantile`, and `brushX` with data from the BLS and USDA.

AI-generated description

A rough PoC for multiple histograms linked to a choropleth map. Shows two metrics:

  • Unemployment rate by U.S. county, August 2016 from the BLS.
  • Educational attainment ("Percent of adults with a bachelor's degree or higher, 2018-22") from USDA Educational Attainment Dataset
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Choropleth with Multidimensional Filtering

This interactive visualization links a choropleth map of U.S. county unemployment rates from the BLS with a brushed histogram of the same metric. Brushing the histogram filters the map, dimming counties outside the selected range while highlighting those within it. Users can hover over counties to see their exact values. The implementation uses d3.geoPath with a geoAlbersUsaTerritories projection, d3.scaleQuantile with an inferno color scale, and d3.brushX for the histogram’s interactive interval selection. Data comes from a JSON dataset of unemployment rates for August 2016.

Oomniaabouhassan@gmail.com
91% match
Loading thumbnail…

Bivariate Choropleth with Histograms

This interactive visualization combines a bivariate choropleth map of U.S. counties with coordinated histograms to explore the relationship between unemployment rates and education levels. Using d3.geoPath with a TopoJSON atlas, the map colors each county by a 3x3 bivariate color scale, while brushing on either histogram filters the map and highlights counties in the selected range. Hovering over a county reveals its name in a label and marks its position in both histograms with vertical indicator lines. The visualization uses d3.brushX, d3.scaleQuantile, and smooth transitions to animate state changes between the coordinated views.

CCurran Kelleher
90% match
Loading thumbnail…

Choropleth with Histogram Brushing

This interactive data visualization displays the unemployment rate by U.S. county for August 2016. A choropleth map uses a quantile color scale with four bins, rendered via `d3.geoPath` and the `geo-albers-usa-territories` projection. A linked histogram below the map, built with `d3.bin` and `d3.brushX`, allows users to brush a range of values, which highlights matching counties on the map while dimming others. The visualization also supports zooming through the `d3.zoom` utility, with map rendering optimized using memoization.

CCurran Kelleher
90% match
Loading thumbnail…

Multidimensional Filtering Color By Overlaps PoC

Two linked histograms show unemployment and education rates for U.S. counties, with the choropleth map color encoding the number of metrics where a county falls within the brushed ranges. Brushing either histogram filters the map, while hovering highlights individual counties. The visualization uses d3-geoPath for map rendering, d3-brushX for histogram selection, d3-scaleQuantile for color mapping, and reads county data from BLS and USDA CSV files loaded into d3.js.

CCurran Kelleher
86% match
Loading thumbnail…

Map

A choropleth map displays U.S. county unemployment rates for August 2016, colored with a quantile scale and the d3.interpolateInferno palette. A brushable histogram below the map visualizes the rate distribution; brushing it highlights matching counties on the map with d3.brushX. Pan and zoom interactions rely on d3.zoom and d3.geoPath with a geoAlbersUsaTerritories projection. The map renders via SVG using TopoJSON county boundaries from the us-atlas dataset.

BBashir Gulistani
84% match
Loading thumbnail…

Fork of Choropleth with Histogram Brushing

This visualization shows the unemployment rate for U.S. counties in 2022 using a choropleth map paired with a brushable histogram. The map colors each county by quantile, while brushing a range on the histogram highlights matching counties and dims others. Built with vanilla JavaScript and D3, it uses `d3.geoPath` for map rendering from `us-atlas` TopoJSON data and `d3.scaleQuantile` for color mapping, with zooming via `d3-rosetta`.

Oomniaabouhassan@gmail.com
84% match
Loading thumbnail…

Fork of Choropleth with Histogram Brushing

This fork of the D3 Choropleth example visualizes U.S. county unemployment rates from August 2016, with a brushable histogram below the map that filters highlighted counties. Brushing the histogram dims counties outside the selected rate range using a quantile color scale interpolated with d3.interpolateInferno. The map uses d3.geoPath with geoAlbersUsaTerritories projection and topojson-client for county boundaries. The implementation leverages d3-rosetta’s memoization helpers and d3.brushX for interactive filtering, with zoom support via d3.zoom.

Oomniaabouhassan@gmail.com
84% match
Loading thumbnail…

Map

This visualization presents a choropleth map of U.S. county-level unemployment rates, where each county is colored according to its rate using a quantile color scale from the Inferno palette. The map uses D3's `geoPath` and `geoAlbersUsaTerritories` projection to render county and state boundaries from TopoJSON data. A linked histogram at the bottom allows for interactive brushing to highlight counties within a selected unemployment rate interval. The example demonstrates the D3 General Update Pattern for dynamic styling and attribute updates.

BBashir Gulistani
83% match