Fork of Multivariate Choropleth Experiments

100%

Fork of Multivariate Choropleth Experiments

✓ Published0🌍 Public

Last edited Dec 8, 2021

Created on Dec 8, 2021

Forked from 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.

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…

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

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

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

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

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

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

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

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

90% match