Fork of Opacity Linear Scale

100%

Fork of Opacity Linear Scale

✓ Published0🌍 Public

Last edited Feb 4, 2021

Created on Feb 4, 2021

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.

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 Opacity Linear Scale - playground

This map of New York census tracts colors each polygon by the proportion of white residents, using a green opacity scale on a black background. The visualization fetches demographic data from the American Community Survey API and TopoJSON geographic boundaries, then renders them as SVG paths with `d3.geoPath`. A linear color scale (`d3.scaleLinear`) maps values to `rgba()` strings with varying opacity, while `d3.zoom` enables panning and zooming. The mouseover logs tract properties to the console, and the CSS styles polygons with hover strokes.

AArna Karick

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

93% match

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

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

91% match

Loading thumbnail…

Fork of WIP New York Census Tracts Demographics

This visualization displays demographic data for New York Census Tracts, coloring each tract by its white population count using a sequential green color scale. The map is rendered as an SVG using d3.geoPath, with the geographic boundaries provided by TopoJSON. Population data comes from the American Community Survey API, which is fetched asynchronously and merged with the tract geometries. Users can pan and zoom the map via d3.zoom, and hovering over a tract logs its properties to the console.

PPekka Pulli

82% match

Loading thumbnail…

Fork of New York Census Tracts Demographics: Black, Sqrt scale

This example visualizes the Black population distribution across New York census tracts, using a sequential square-root scale with the orange color palette to emphasize differences in population counts. The map supports pan and zoom interactions, with hover effects highlighting individual tracts. The code fetches demographic data from the American Community Survey API and combines it with TopoJSON geographic boundaries, rendering the result as SVG paths using `d3.geoPath`. It employs `d3.scaleSequentialSqrt` and `d3.interpolateOranges` for color encoding, with zoom handled by `d3.zoom`.

CCurran Kelleher

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

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

82% match