Fork of Multivariate Choropleth -livecoded

100%

Fork of Multivariate Choropleth -livecoded

✓ Published0🌍 Public

Last edited Feb 5, 2021

Created on Feb 5, 2021

Forked from Multivariate Choropleth Live Coded at Outlier

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.

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.

This uses a linear scale that varies in opacity only.

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…

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

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

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

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

92% match

Loading thumbnail…

Fork of Multivariate Choropleth Live Coded at Outlier

This fork of a multivariate choropleth live-coded at Outlier maps New York census tracts, blending colored layers to visualize population counts across racial groups. Green, orange, and magenta fills represent white, Black, and Asian residents respectively, with each color’s intensity scaled by a d3.scaleSqrt. The code loads TopoJSON tract boundaries and American Community Survey data via d3.json, then composites the three semi-transparent scales using the color-blend library’s multiply operation. d3.geoPath renders the SVG paths, while d3.zoom enables panning and zooming over the dark canvas.

AAlex Haynes

92% match

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 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…

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

89% match