Fork of Opacity Linear Scale-feb2_2021

100%

Fork of Opacity Linear Scale-feb2_2021

✓ Published0🌍 Public

Last edited Feb 4, 2021

Created on Feb 4, 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.

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

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

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

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

90% match

Loading thumbnail…

Fork of WIP New York Census Tracts Demographics

This visualization maps New York Census Tracts, coloring each polygon by its white population count from the 2018 American Community Survey API. The map uses `d3.geoPath` to render TopoJSON shapes into SVG paths and `d3.scaleSequential` with `interpolateGreens` for the choropleth encoding. Data joins associate census tract IDs with survey variables like B02001_002E, and a `d3.zoom` handler enables panning and zooming of the geographic display.

PPhilippe Rivière

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

84% match

Loading thumbnail…

New York Map

This map of New York census tracts uses a green sequential color scale to show the concentration of white residents per tract, with darker greens indicating higher counts. The visualization fetches census tract boundaries as TopoJSON and demographic data from the American Community Survey API, then joins them by tract ID. The code uses d3.geoPath to render the SVG paths and d3.scaleSequential with interpolateGreens for color encoding, while d3.zoom enables interactive panning and zooming of the map.

AAnnie Ulichney

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

83% match