Skip to main content
SimilarExport ZIP
100%

Bivariate Choropleth with Histograms

✓ Published1🌍 Public
CCurran Kelleher
Last edited Jan 10, 2026
Created on Oct 8, 2025

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.

AI-generated description

Bivariate Choropleth Map with Interactive Histograms

An interactive data visualization showing the relationship between unemployment rates and education levels across U.S. counties using a bivariate choropleth map with coordinated histograms.

Features

Bivariate Choropleth Map

  • Displays U.S. counties colored by two variables simultaneously:
    • Unemployment Rate: Horizontal axis of the color scheme
    • Education Level: Vertical axis of the color scheme (% of adults with bachelor's degree or higher)
  • Uses a 3x3 bivariate color palette where:
    • Purple shades indicate high education, high unemployment
    • Blue-green shades indicate low education, high unemployment
    • Gray shades indicate low education, low unemployment
    • Pink shades indicate high education, low unemployment

Interactive Histograms

Two coordinated histograms display the distribution of:

  1. Unemployment Rate (top histogram)
  2. Education Level (bottom histogram)

Each histogram features:

  • Brushing: Click and drag to filter counties by value ranges
  • Bivariate coloring: Histogram bins are colored using the same bivariate scheme as the map
  • Coordinated filtering: Brushing in one histogram filters both the map and the other histogram

Hover Interactions

  • Hover over any county to highlight it in bright green
  • The corresponding value appears in both histograms with a vertical indicator line
  • Smooth animations provide visual feedback

Bivariate Legend

  • Located in the top-right corner
  • Shows the 3x3 color matrix
  • Labels indicate the direction of increase for both variables

Data Sources

Unemployment Data (unemployment-x.csv)

  • County-level unemployment rates
  • Contains: County ID, State, County Name, Unemployment Rate

Education Data (education.csv)

  • County-level education attainment
  • Percentage of adults with bachelor's degree or higher (2018-22)
  • Source: FIPS codes matched to counties

Geographic Data

  • U.S. county boundaries from us-atlas (TopoJSON format)
  • Loaded dynamically from CDN
  • Uses Albers USA projection with territories support

Technical Architecture

Core Visualization Components

  • index.js: Main entry point, orchestrates all components
  • map.js: Renders the choropleth map with TopoJSON
  • histogram.js: Renders histograms with brushing and bivariate coloring
  • bivariateLegend.js: Renders the 3x3 color legend

Histogram Sub-components

  • histogramBars.js: Renders histogram bins with masking
  • histogramBrush.js: Implements brushing interaction
  • histogramBins.js: Creates bins from data (40 bins)
  • histogramScales.js: Creates x and y scales
  • histogramHoveredDatum.js: Displays hover indicators
  • histogramLabel.js: Adds axis labels
  • colorLegendRects.js: Renders colored rectangles behind histogram bars

Data Processing

  • dataLoader.js: Loads and merges unemployment and education data
  • colorScales.js: Creates quantile scales for both variables
  • bivariateColorScale.js: Implements the 3x3 color matrix

State Management

  • stateManager.js: Manages interaction state (brushing, hovering)
  • getUSAtlasData.js: Loads and caches geographic data
  • constants.js: Configuration constants (dimensions, colors, margins)

Color Scheme

The bivariate color palette uses a 3x3 grid:

MIT Licensed

Similar vizzes

Loading thumbnail…

Choropleth with Multidimensional Filtering

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.

CCurran Kelleher
90% match
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
86% 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
86% match
Loading thumbnail…

Fork of Bivariate Choropleth with Histograms

This visualization displays boxplots for unemployment rates and education levels across US counties, with the top five counties by education listed below. Each boxplot shows quartiles, whiskers, outliers, and invisible data points for hover interactions using d3 scales and joins. Data comes from unemployment and education CSV files, merged by FIPS code. The visualization uses d3.axisBottom, scaleLinear, quantile calculations, and d3-rosetta’s StateProperty for managing hovered state and updating the highlighted county.

CCurran Kelleher
86% 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 interactive visualization displays the August 2016 unemployment rate for U.S. counties on a choropleth map, using a quantile color scale with d3.scaleQuantile and the Inferno interpolator. A brushable histogram below the map, built with d3.bin and d3.brushX, allows filtering highlighted counties by rate, with non-selected areas grayed out via d3-rosetta utilities. The map supports zooming, uses topojson-client for county boundaries, and renders with d3.geoPath and the geo-albers-usa-territories projection.

GGuan
84% 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
83% 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