Chloropleth Election

100%

Chloropleth Election

✓ Published0🌍 Public

Last edited Mar 29, 2018

Created on Mar 29, 2018

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.

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…

Ready for a Chloropleth

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.

Aaaronmunoz

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

Choropleth w/ state highlighting

This choropleth displays U.S. county unemployment rates colored on a quantize scale from light to dark blue, overlaid with white state boundary lines. When hovering over a county, its outline turns red and all counties outside that county’s state fade to 50% opacity, using CSS classes generated from the state FIPS code to highlight the state containing the hovered county. The map uses an Albers USA projection and is built with D3 v3 and TopoJSON, with county fill colors mapped from unemployment data.

Aalexmacy

79% match

Loading thumbnail…

Chloropleth

This choropleth maps 2008 U.S. county unemployment rates, encoding each county’s rate with a color from a blue sequential palette. The data is loaded from an external TSV file and joined to county geometries from TopoJSON. A d3.scale.quantize maps the continuous unemployment domain (0 to 15%) to nine discrete CSS classes, q0-9 through q8-9, with darker blues representing higher rates. The map is rendered with SVG using an Albers USA projection, and state boundaries are drawn as white lines over the colored counties. This example is copied directly from Mike Bostock.

Aandyreagan

78% match

Loading thumbnail…

Population Choropleth

A population choropleth of U.S. counties uses a logarithmic color scale to show population density, ranging from pale yellow to dark blue. The map projects counties with d3.geo.albersUsa() and renders them as SVG paths via d3.geo.path. Density is calculated by dividing each county’s population (from the 2010 Census shapefile, converted to TopoJSON) by its projected area, with the color domain set between the 1st and 99th percentiles. The topojson.feature API extracts county geometries for display.

Mmbostock

77% match

Loading thumbnail…

ICE-8 (US Map)

This example shows a choropleth-style map of U.S. counties rendered as black filled shapes with subtle gray strokes. The visualization uses D3 v5’s `d3.geoAlbersUsa` projection and `d3.geoPath` to draw each county boundary, while the TopoJSON library’s `feature` method extracts county geometries from a remote US-atlas JSON dataset. County names appear as tooltips via appended `title` elements. Hovering over a county highlights it in black, though the fill remains unchanged. The map is displayed in an SVG container sized at 960 by 500 pixels.

AAnjan Shrestha

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

77% match

Loading thumbnail…

US Counties

This map of US counties displays all county boundaries with a subtle drop-shadow effect. The code uses D3 v4’s `d3.geoAlbersUsa` projection and `d3.geoPath` to render geographic features. It loads TopoJSON from a local `counties.json` file and converts it to GeoJSON via `topojson.feature` and `topojson.mesh`. The visualization plots state borders as a separate mesh, overlays white and blurred nation outlines for depth, and draws each county as an outlined SVG path with thin gray strokes.

MMTClass

77% match