Bivariate Choropleth

100%

Bivariate Choropleth

✓ Published1🌍 Public

Last edited Jan 29, 2021

Created on Jan 29, 2021

This bivariate choropleth shows the racial distribution of New York census tracts, blending green for white population and orange for Black population using a color-mixing technique from `colorBlend.normal`. The map uses `d3.geoPath` to render topological features and `d3.scaleLinear` for each variable’s color mapping. Data is sourced from the American Community Survey (ACS) API, and the visualization includes zooming interactions via `d3.zoom` and SVG rendering.

AI-generated description

An intermediate state on the way towards trying to visualize multidimensional data for census tracts. The more green it is, the more white people there are. The more orange it is, the more black people there are.

Data from bl.ocks.org: New York Census Tracts by Mike Bostock.

Fetching of American Community Survey data inspired by Observable: Racial distribution in NC by Mark McClure.

The variables used are documented in the ACS API Reference.

MIT Licensed

Similar vizzes

Loading thumbnail…

Multivariate Choropleth

This example visualizes racial demographics across New York census tracts using a multivariate choropleth. The map blends three color scales—blue for White, green for Black, and red for Asian populations—into a single fill per tract, with hover tooltips showing exact counts. It uses the D3 library’s `geoPath` for rendering TopoJSON geometries and `scaleLinear` for each racial category, while the `colorBlend` library composites the overlapping colors. Data comes from the 2018 American Community Survey, fetched via JSON, and the visualization supports zooming through D3’s `zoom` behavior.

CCurran Kelleher

90% match

Loading thumbnail…

Multivariate Choropleth

This example visualizes racial demographics across New York census tracts using a multivariate choropleth map. It blends three color scales—green for white population, orange for Black population, and blue for Asian population—using multiplicative color blending via the `colorBlend` library to create a composite hue. The map renders census tract boundaries as SVG paths using `d3.geoPath` with `topojson` features. Population data from the American Community Survey is joined by tract ID, and all values are scaled against a global maximum using `d3.scaleLinear` with opacity gradients.

AAmir

89% match

Loading thumbnail…

Multivariate Choropleth Experiments

This example visualizes racial demographics for New York census tracts using a multivariate choropleth. It blends three HCL color constants (white, Black, and Asian) with square root scales, applying a multiplicative color blend to produce composite hues per tract. The map renders via `d3.geoPath` with TopoJSON data, supports zoom interaction, and includes a legend built with `d3.scaleOrdinal`. Data comes from the American Community Survey API, fetched through a gist-hosted JSON file.

CCurran Kelleher

89% match

Loading thumbnail…

Fork of Multivariate Choropleth Experiments

This map visualizes multidimensional racial demographics for New York census tracts by blending three HCL color scales into a single fill per tract. The code uses d3.geoPath to render TopoJSON shapes, with d3.scaleSqrt encoding population counts for White, Black, and Asian residents into opacity values that are multiplied via color-blend. Hovering reveals precise population counts, while an ordinal legend identifies each race’s base hue. Data comes from the 2018 American Community Survey API, and the visualization supports pan and zoom through d3.zoom.

HHeidi Stockton

86% match

Loading thumbnail…

Multivariate Choropleth Live Coded at Outlier

A multivariate choropleth map depicts New York census tracts, blending green, orange, and magenta opacity scales to represent white, Black, and Asian population counts from American Community Survey data. The visualization uses d3.json and d3.geoPath to render TopoJSON geometries, with d3.scaleSqrt mapping each demographic to color opacity. Color blending combines the three channels via the color-blend library’s multiply mode. The map supports d3.zoom for panning and displays population values for each tract on mouseenter via console logging.

CCurran Kelleher

85% match

Loading thumbnail…

Fork of Multivariate Choropleth Live Coded at Outlier

This example visualizes racial demographics across New York census tracts by blending colored transparent layers for white, black, and Asian populations. The map uses D3 v5 with `d3.geoPath` and TopoJSON to render tract polygons, while the `color-blend` library applies multiplicative blending of `scaleSqrt`-mapped opacity values for each racial group. Data comes from the American Community Survey API, fetched as JSON, with darker composite colors indicating higher population densities. The visualization supports interactive zoom via `d3.zoom` and hover logging of tract properties.

MMatthew Talty Colvard

85% match

Loading thumbnail…

Fork of Multivariate Choropleth Experiments

This example visualizes multidimensional racial demographic data for New York census tracts, showing the relative populations of White, Black, and Asian residents. It uses a multivariate choropleth approach where each tract’s fill color results from blending three HCL color scales (one per race) via multiplicative alpha blending in `d3.scaleSqrt`, with data from the American Community Survey. The map renders as SVG using `d3.geoPath` and TopoJSON, supports zooming via `d3.zoom`, and includes an ordinal color legend. Hovering reveals exact population counts in a tooltip.

MMinh Nguyen

85% match

Loading thumbnail…

Fork of Multivariate Choropleth -livecoded

This example visualizes white, black, and Asian population distributions across New York census tracts. It uses a choropleth map where each tract's fill color results from blending three semi-transparent color scales, one per racial group, using a multiplicative blend. The map is rendered with D3.js v5, projecting geographic data with `d3.geoPath` and TopoJSON. Population data comes from the American Community Survey, accessed via a Gist, and the visualization uses a single SVG canvas.

AArna Karick

85% match