Opacity Linear Scale

100%

Opacity Linear Scale

✓ Published8🌍 Public

Last edited Jan 29, 2021

Created on Jan 29, 2021

Forked from New York Census Tracts Demographics: White

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.

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

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

92% match

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

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

90% match

Loading thumbnail…

Outlier example

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.

EErik Kemp

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

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

84% match

Loading thumbnail…

New York Census Tracts Demographics: White

This visualization shades New York census tracts by the number of white residents, using a green sequential scale where darker greens indicate higher counts. The map loads TopoJSON geometry and American Community Survey demographic data fetched from a GitHub gist, then joins the data to each tract. It renders SVG paths with `d3.geoPath`, applies an `interpolateGreens` color scale via `scaleSequential`, and supports pan and zoom through `d3.zoom`. Hovering over a tract logs its properties to the console.

CCurran Kelleher

83% match