Paint by Numbers II

100%

Paint by Numbers II

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Apr 1, 2014

This interactive map of U.S. counties lets users paint each county with one of nine colors, with selections shared via a URL hash. Dragging across the map assigns colors, while clicking the legend or pressing number keys switches the active color. Built with D3 v3 and TopoJSON, the visualization uses `d3.geo.albersUsa` for projection, `d3.behavior.drag` for painting, and merges colored counties into SVG paths via `d3.geo.path`. County boundaries are rendered as a mesh, with a background stroke and interactive foreground paths.

AI-generated description

Click and drag to paint! Click on the colors or use the number keys to change colors. Copy-and-paste the address bar to share this map with others.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Paint by Numbers

A coloring-book-style map of the United States lets visitors paint individual states by clicking or dragging, with a palette of nine colors selectable via mouse or number keys. The visualization uses d3.geo.albersUsa and d3.geo.path to render state boundaries from TopoJSON, while d3.behavior.drag manages interactive painting. Merged regions are drawn as SVG paths, and the current color assignments are encoded in the URL hash for sharing.

Mmbostock

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

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

77% match

Loading thumbnail…

zoomUsCounty

This interactive map displays all U.S. counties as gray polygons with state borders overlaid in white. Clicking a state zooms in on that region, while clicking a county triggers a deeper zoom to a scale of 23, with another click resetting the view. The visualization uses D3 v3 and TopoJSON to load geographic data from a gist, projecting it with `d3.geo.albersUsa` and rendering paths via `d3.geo.path`. Transitions animate the zoom using SVG transform scaling and translation, with hover effects highlighting counties and states in orange.

JJn1532

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

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…

Gist 5967514

This example displays a map of U.S. counties using a TopoJSON shapefile from the U.S. Census Bureau, rendered as gray-filled paths with white borders that turn red on hover. It shows the geographic boundaries of counties and responds to clicks, though the click behavior only logs to the console. The visualization uses D3 v3’s `d3.geo.path()` to project and draw the SVG paths, and TopoJSON’s `topojson.feature` to extract GeoJSON features from the topology. The map is static, with no zoom or pan, and the hover effect is the only interactive styling.

CCaged

77% match

Loading thumbnail…

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

This example displays an interactive map of U.S. counties rendered as SVG paths, with each county’s name appearing as a tooltip on hover. The map uses the `geoAlbersUsa` projection and `geoPath` from D3 v5, while TopoJSON’s `feature` method extracts county geometries from the us-atlas counties-10m.json dataset. Hovering highlights the county in green via a CSS `:hover` rule. The visualization depends on D3’s `select` and `json` utilities to fetch and bind the geographic data.

NNita

77% match