Skip to main content
SimilarExport ZIP
100%

New York Census Tracts Demographics: Black, Log scale

✓ Published1🌍 Public
CCurran Kelleher
Last edited Jan 27, 2021
Created on Jan 27, 2021

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.

AI-generated description

An intermediate state on the way towards trying to visualize multidimensional data for census tracts. The more orange it is, the more black people there are.

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…

New York Census Tracts Demographics: Black

This visualization maps New York State census tracts and uses a sequential orange color scale to encode the population identifying as Black or African American. The map is rendered as SVG with `d3.geoPath` on top of TopoJSON data, and the demographic values come from the 2018 American Community Survey API. Zooming and panning are enabled via `d3.zoom`, and hovering highlights individual tracts. The color scale uses `d3.scaleSequentialSqrt` with `interpolateOranges`, where darker orange indicates higher Black population counts.

CCurran Kelleher
93% match
Loading thumbnail…

New York Census Tracts Demographics: Black

This visualization maps New York census tracts, using the intensity of orange to represent the population identifying as Black or African American, from 2018 American Community Survey data. It displays tract polygons rendered with `d3.geoPath` in an SVG, colored by a sequential scale using `scaleSequential` and `interpolateOranges`. The code loads TopoJSON geometry and ACS data via `Promise.all`, then maps each tract to its demographic values, with hover highlighting and zoom support via D3’s zoom behavior.

CCurran Kelleher
92% 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
90% 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
87% 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
86% 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
85% match
Loading thumbnail…

Broken New York Census Tracts Demographics

This example shows New York State census tracts colored by their white population count using a green sequential color scale. The visualization maps demographic data from the 2018 American Community Survey API onto census tract polygons, which are rendered using `d3.geoPath` with a null projection. The code combines `d3.json` and `d3.tsv` for data loading, TopoJSON for feature extraction, and `d3.scaleSequential` with `interpolateGreens` for color encoding. However, the visualization is incomplete, as the code logs console output for hovered tracts but does not display tooltips or a legend, and the color mapping may fail due to mismatched tract IDs between the TopoJSON and ACS data sources.

CCurran Kelleher
84% 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
82% match