Skip to main content
SimilarExport ZIP
100%

Multivariate Choropleth

✓ Published1🌍 Public
CCurran Kelleher
Last edited Jan 29, 2021
Created on Jan 29, 2021

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.

AI-generated description

A way to visualize multidimensional data for census tracts.

  • Blue = White
  • Green = Black
  • Red = Asian

This is a first working version, not at all optimized or designed.

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 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
96% 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
95% 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
92% 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
92% 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
92% 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
91% match
Loading thumbnail…

Fork of Bivariate Choropleth

This example visualizes racial demographics across New York census tracts using a bivariate choropleth. The map blends green for white population density and orange for Black population density, creating overlapping color gradients that show spatial distributions of both groups simultaneously. The visualization uses `d3.json` to load TopoJSON tract boundaries and American Community Survey demographic data, then renders the map with `d3.geoPath` and SVG paths. Colors are computed via `d3.scaleLinear` with color blending from the color-blend library, and the map supports zooming through `d3.zoom`.

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