Multivariate Choropleth Experiments

100%

Multivariate Choropleth Experiments

✓ Published6🌍 Public

Last edited Aug 31, 2021

Created on Jan 29, 2021

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.

AI-generated description

A way to visualize multidimensional racial demographic data for census tracts. This uses a square root scale instead of a linear scale, and uses 3 colors that are all the same saturation and luminance (in the HCL color space).

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.

Color legend from VizHub: Color and Size Legends.

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

95% 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

94% 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

94% 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

93% match

Loading thumbnail…

Multivariate Choropleth Experiments with Clipped Outline

This visualization displays multivariate racial demographic data for New York census tracts, blending three HCL colors—white, black, and Asian—through a multiplicative d3.scaleSqrt transform to show population concentrations. Each tract’s fill combines opacities scaled by population counts, with a clip-path masking the map to the state’s simplified shoreline. Built with D3 v6 and topojson, it fetches American Community Survey data and renders SVG paths via d3.geoPath, plus an ordinal color legend.

AAlan McConchie

92% 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

90% 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

89% match

Loading thumbnail…

Bivariate Choropleth

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.

CCurran Kelleher

89% match