Fork of Opacity Linear Scale

100%

Fork of Opacity Linear Scale - playground

✓ Published0🌍 Public

Last edited Feb 5, 2021

Created on Feb 4, 2021

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.

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

94% match

Loading thumbnail…

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

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

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

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

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

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

81% match