new data with json

100%

new data with json

✓ Published0🌍 Public

Last edited Dec 7, 2022

Created on Dec 6, 2022

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

new data with json

This choropleth map displays county-level ozone concentrations across the United States from 2000 to 2021. A vertical slider and play button animate through years, with the sequential YlGnBu color scale mapping ozone levels while gray indicates missing data. Built with React and D3 v5, it uses `geoPath` with an Albers USA projection and TopoJSON county/state boundaries, rendering SVG paths with hover tooltips showing county names and values.

CChase Hall

88% match

Loading thumbnail…

new data

A choropleth map of U.S. counties shows ozone levels for each year from 2000 to 2021, with a vertical slider and play button to animate through time. County colors use a sequential yellow-green-blue scale, while state boundaries are drawn as thin lines. Built with React and D3 v5, it uses `geoPath` with a fitted Albers projection, a TopoJSON atlas, and a Map lookup from CSV data. Hovering a county reveals its name and ozone value.

CChase Hall

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

82% match

Loading thumbnail…

map: usa, counties

This example renders a choropleth-style map of the United States, displaying county and state boundaries overlaid on landmasses, with graticules and a sphere outline. It uses a React component with `d3.geoAlbersUsa` for projection and `d3.geoPath` for drawing geometries. Data comes from the US Atlas TopoJSON (`us-atlas@3.0.0/counties-10m.json`), processed with `topojson.feature` and `topojson.mesh`. Interactive tooltips show county and state names on hover. The SVG output is styled with semi-transparent fills and distinctive boundary strokes.

Zzach b.

82% match

Loading thumbnail…

US Map

This interactive visualization displays all US counties as a choropleth-style map rendered with a natural Earth projection using d3.geoPath. The map is drawn with SVG elements, featuring graticules and a sphere outline to provide geographic context. County boundaries come from a TopoJSON file loaded asynchronously and converted to GeoJSON features. Built with React and D3 v7, the visualization dynamically fills the browser window and uses the Poppins font for its minimal interface.

JJohn Lewis

81% match

Loading thumbnail…

d3 choropleth map

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.

HHamishWoodrow

81% match

Loading thumbnail…

more chloropleth

This interactive choropleth maps fine particulate matter (PM2.5) concentrations across U.S. counties from 2000 to 2021, with a slider and play button animating through years. Each county’s fill color transitions smoothly via `scaleSequential` and `interpolateYlGnBu`, while hovering reveals state and value details. Built with React and D3 v5, it uses `geoIdentity` with `geoPath`, TopoJSON from the us-atlas library, and CSV data fetched via `d3.csv`, rendering SVG paths that update with `transition` styling.

EElijah D'Aran

81% match

Loading thumbnail…

map

This example displays a map of U.S. counties as unfilled, stroked polygons on a blank background, all rendered as SVG paths. The map shows the geographic boundaries without additional fill or data encoding. The code uses React with D3 v5 functions including `d3.geoAlbersUsa` for the projection, `d3.geoPath` to generate the path data, and TopoJSON's `feature` function to convert topojson data into GeoJSON features. Data loads asynchronously via `d3.json` from a remote URL, and each feature is mapped to an SVG `<path>` element with a thin teal stroke.

CChase Hall

80% match