Outlier example

100%

Outlier example

✓ Published0🌍 Public

Last edited Feb 4, 2021

Created on Feb 4, 2021

This example maps New York Census tracts using color to represent racial demographics, where green opacity indicates white population and orange opacity indicates Black population. The SVG visualization uses D3’s `geoPath` to render tract polygons and `scaleLinear` to map demographic data from the American Community Survey to color opacity values, with blended colors showing combined racial distributions. Interactive hover logging reveals each tract’s underlying demographic properties.

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…

Opacity Linear Scale

This example visualizes the racial composition of New York Census tracts by encoding the white population count through a green color whose opacity varies on a linear scale—more opaque green indicates more white residents. The map renders as SVG paths using `d3.geoPath` and TopoJSON, with data from the American Community Survey API fetched via `d3.json`. Opacity is controlled by `d3.scaleLinear` mapping the maximum white population to an `rgba` range from transparent to fully opaque green, while `d3.zoom` enables pan and zoom interaction.

CCurran Kelleher

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

83% match

Loading thumbnail…

Fork of Opacity Linear Scale

This visualization shows the racial distribution of New York State census tracts, mapping the white population share using a green color scale where opacity varies linearly from fully transparent to fully opaque. The map uses `d3.geoPath` with TopoJSON data to render tract boundaries as SVG paths, while `d3.scaleLinear` maps each tract’s white population count to an rgba color string. Data comes from the American Community Survey via Mike Bostock’s census tract GeoJSON, with the color scale defined in code at lines 80–85.

MMaxene Graze

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

82% match

Loading thumbnail…

Opacity Linear Scale

This visualization maps New York census tracts, using a green color scale to represent the white population density—the greener the tract, the more white residents it has. The data comes from the American Community Survey API, joined with TopoJSON geometry from a GitHub gist. The code uses d3.scaleLinear to map white population counts to an opacity range, creating a semi-transparent overlay, while d3.geoPath renders the tract shapes and d3.zoom enables pan and zoom interaction.

Llimenzi

82% match

Loading thumbnail…

New York Census Tracts Demographics: Black, Log scale

This example visualizes the racial demographics of New York census tracts, focusing on the Black population using a sequential log color scale that maps darker oranges to higher counts. It renders an SVG map of tracts using d3.geoPath and topojson, with geographic data from a local GeoJSON file and demographic data fetched live from the American Community Survey API. The map supports zooming and panning through d3.zoom, and tract details are printed to the console on mouse hover.

CCurran Kelleher

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

81% match

Loading thumbnail…

Fork of Opacity Linear Scale-feb2_2021

This visualization maps New York census tracts, using green opacity to show the white population share: tracts with more white residents appear in more opaque green, while those with fewer remain transparent. The code loads TopoJSON tract boundaries and ACS demographic data via `Promise.all`, then renders SVG paths with `d3.geoPath`. A `d3.scaleLinear` maps population values to `rgba` colors with varying opacity, and `d3.zoom` enables interactive panning and zooming. The data comes from Bostock’s New York census tracts and the American Community Survey API.

NNita

81% match