Skip to main content
100%

Ready for a Chloropleth

✓ Published0🌍 Public
Aaaronmunoz
Last edited Mar 29, 2018
Created on Mar 29, 2018

This block displays a static map of United States counties rendered as SVG paths, colored a uniform light gray with subtle borders. The map uses the Albers USA projection and draws county boundaries from a 20m Census shapefile. While the visualization itself has no data-driven coloring, it is built as a "ready for chloropleth" template: hovering over any county reveals a tooltip with the county name and state, populated by cross-referencing state and county FIPS codes. The example demonstrates how to set up county-level geographic data, apply a projection, and implement interactive mouseover tooltips, providing a foundation for mapping quantitative data onto U.S. counties.

AI-generated description

Basic setup for a United States Chloropleth. County boundaries from 20m Census shapefile.

forked from <a href='http://bl.ocks.org/dhoboy/'>dhoboy</a>'s block: <a href='http://bl.ocks.org/dhoboy/024b65da5f8dd0e83e3c016928ca08f1'>Ready for a Chloropleth</a>

Similar vizzes

Loading thumbnail…

Chloropleth Election

This choropleth displays all U.S. counties in a light gray with subtle borders, using an AlbersUSA projection. When the user hovers over a county, a tooltip appears showing the county name and its state, assembled from FIPS codes via nested lookup tables. County boundary geometry comes from a 20m Census shapefile, rendered as SVG paths with D3 v3.

Aaaronmunoz
85% 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…

Country Map

This example renders a choropleth-style map of United States counties on an SVG canvas. Each county polygon is drawn as a purple path with white strokes, and hovered counties turn red, with the county name appearing as a tooltip. The visualization uses D3 v5’s `geoAlbersUsa` projection with `geoPath` to generate the shapes, and TopoJSON’s `feature` method to parse county boundaries from the us-atlas dataset. County names come from the TopoJSON properties, while the map loads via a remote JSON URL.

AAashish Pandey
81% match
Loading thumbnail…

Let's make a map of US-counties with D3.js:"hover and county name "

This example displays a choropleth-style map of all US counties rendered as SVG paths, with county names revealed on hover via a native `<title>` element. The visualization uses D3 v5’s `geoAlbersUsa` projection and `geoPath` to draw county boundaries from TopoJSON data loaded from the us-atlas package. County shapes are styled with black strokes and a green fill on mouseover, showing the geographic distribution of administrative divisions. The code filters the TopoJSON for county features and binds them to path elements, relying on the browser’s built-in tooltip behavior for the name display.

NNita
81% 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
Loading thumbnail…

Blocky Counties

This example visualizes the lat-lon bounding box for each county in the United States, rendering blocky, rectangular outlines instead of the actual county shapes. The map uses the Albers USA projection and displays all county bounding boxes as steel-blue, stroked paths on an SVG canvas. The code loads US county data from a JSON file, then applies `d3.geo.bounds` to compute each county’s geographic extent, which is drawn via a single `d3.geo.path` object. It relies on the `d3.geo` module and `topojson.feature` to filter and structure the geographic features.

Mmbostock
79% match
Loading thumbnail…

Untitled

This example displays a choropleth map of the United States with counties rendered as SVG paths, filled in light gray and highlighted in light blue on hover. The code loads a TopoJSON file of US counties from a remote GitHub repository and uses `d3.geo.mercator` with a fitted projection to size and position the map within the viewport. Counties are drawn via `d3.geo.path`, and the script references an additional tooltip feature using `d3.tip` in the accompanying test.js file, though that tooltip is not implemented in the visible code. The map is rendered entirely with D3 v3 and SVG.

AAnnie Ulichney
79% match
Loading thumbnail…

Let's make a map US-counties with D3.js!

This example renders a choropleth-style map of all US counties as light green SVG paths with subtle black borders. It uses D3 v5’s `geoAlbersUsa` projection and `geoPath` generator to convert TopoJSON county boundaries from the `us-atlas` dataset into scalable vector graphics. The code loads the TopoJSON via `d3.json`, extracts features with `topojson.feature`, and binds them to SVG path elements, while styling is handled with CSS class selectors.

NNita
78% match