d3 choropleth map

100%

d3 choropleth map

✓ Published0🌍 Public

Last edited Aug 9, 2017

Created on Aug 8, 2017

This animated choropleth map visualizes the change in a numeric variable across US counties from 1817 to 2012 using a CSV time-series dataset. The map renders each county as a colored SVG path, with color intensity encoding the value for the currently selected year. A play button and timeline slider allow users to animate through years, updating the fill colors with a smooth transition. The visualization is built with D3 v3 and includes a legend to map color scale values, enabling temporal exploration of the spatial distribution of the data.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

d3 choropleth map

This animated choropleth map visualizes hypothetical country-level data across the years 2008–2013. Built with D3 v3 and rendered in SVG, the map uses a color scale to encode numeric values from a CSV dataset, with each country's fill transitioning as users step through time. The visualization includes a year selector and animated transitions, allowing viewers to observe changing patterns across countries over time. The map is accompanied by a tooltip displaying the country name and its value for the currently selected year.

AAjar06

89% match

Loading thumbnail…

new data with json

This example displays a choropleth map of U.S. counties, colored by yearly data values from 2000 to 2021. A vertical slider with a play button animates through years, updating the fill colors with a sequential scale. The map is rendered as SVG paths using d3.geoPath with geoIdentity projection, based on TopoJSON data from the us-atlas library. Hovering reveals county names, state abbreviations, and the current value via SVG titles, while state borders are drawn as a mesh overlay.

CChase Hall

81% match

Loading thumbnail…

d3 Choropleth map

This choropleth map shows U.S. counties colored by their 2023 population estimates, using a logarithmic threshold color scale with seven blues to reveal regional population patterns. It loads population data from a CSV and county boundaries from a TopoJSON file via Promise.all, then renders the map using d3.geoPath on SVG paths. The fill color is assigned per county using d3.scaleThreshold and FIPS codes, with a d3.legendColor legend and a title clarifying the data shown.

Ccwb314159@gmail.com

81% match

Loading thumbnail…

d3 chorplath map

This choropleth map of the United States displays county-level unemployment rates using a quantized color scale. The visualization renders counties as SVG paths, colored from light to dark blues based on rates from 0 to 15 percent, with state boundaries overlaid in white. Built with D3 v3, it uses `d3.geo.albersUsa` and `d3.geo.path` for projection, TopoJSON for US county and state geodata, and a queue to load JSON and TSV data asynchronously.

JJn1532

81% match

Loading thumbnail…

D3 - Choropleth

This choropleth map visualizes poverty rates across U.S. counties in 2022, with counties colored according to a blue sequential threshold scale and state boundaries overlaid in white. The visualization includes an interactive legend and a tooltip that displays county name, state, and poverty value on mouseover. The code uses d3.geoPath to render geographic shapes, d3.scaleThreshold with d3.schemeBlues for color mapping, and topojson.feature to process the US county data. Data is loaded from a CSV file and merged with US TopoJSON geometry, with the rendering handled in SVG.

CChandana Srinivas

81% match

Loading thumbnail…

Choropleth population map

A choropleth map of the United States displays state-level population counts from 1990, using a color gradient from light orange to dark red. The map is rendered as SVG with D3 v3, leveraging `d3.geo.path` and TopoJSON for state boundaries. Population data from a CSV file is joined to state IDs, and a custom `d3.scale.quantize` interpolates colors across 100 steps. Hovering over a state triggers a tooltip and animates opacity, while the legend and interactivity are built with jQuery and D3 transitions.

Vvishusikka

80% match

Loading thumbnail…

Choropleth population map

A choropleth map of the United States displays 1990 county-level population estimates from a CSV file, with counties shaded from light beige to dark red based on population. The map uses a blue-to-red sequential color scale, and hovering over a state dims others, highlights the selected one with a black stroke, and shows a tooltip with the state name and its population value. Built with D3.js (d3.v3), the visualization uses `d3.csv` to load data, `d3.geo.path` to render geographic features from a TopoJSON file, and `d3.mouse` events to manage tooltip positioning.

Pprateekvasi

80% match

Loading thumbnail…

Choropleth Map of County Data

This choropleth map colors U.S. counties to visualize geographic data, with state boundaries drawn as white lines for contrast. The map is rendered as SVG using `d3.geoPath` to project TopoJSON geometry onto a 960×600 canvas. County and state shapes are styled via CSS classes, with the d3-scale-chromatic library available for color encoding. A small script sets a tooltip title on the label element, though the map itself does not display interactive data values.

SShabani Muswamba

80% match