State Grid

100%

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Apr 21, 2015

This example arranges US state abbreviations into a compact ASCII-art grid, with eight states highlighted in a contrasting color. It shows a static map-like layout where each state is a labeled square, and the selected states are visually emphasized. The visualization is implemented with D3 v3, parsing the embedded ASCII grid from a script tag to position SVG rectangles and text elements. State data is hardcoded in the HTML, and d3 selections are used to append and style each grid cell.

AI-generated description

A state grid inspired by an Allison McCann graphic on state taxes. (See also David Mimno’s implementation.)

Mainly, this was an excuse to embed data as ASCII art.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

State Grid of Dogs

This visualization shows a tessellated grid of U.S. state abbreviations, with nine states highlighted in purple to represent a hypothetical dog-related dataset. The states are arranged in a stylized map-like layout, each rendered as an irregular organic blob created from a closed path built with `d3.line()` and `d3.curveBasis`. The code parses a plain-text grid to position each state, applies `d3.v4` selections for rendering, and adds small circles as decorative markers. The design is inspired by an Allison McCann graphic, adapting a state grid into a context-rich tessellation example.

KKcnarf

82% match

Loading thumbnail…

US State Map

This interactive map of the United States uses D3 v3 to render state boundaries as SVG paths from the included `uStates.js` data file. Each state is colored according to randomly generated sample statistics—low, average, and high values—using an interpolated color scale from light yellow to dark red. Hovering over a state triggers a CSS-based tooltip that displays the state's name and its low, average, and high values in a styled HTML table. The map animates state fills on hover with a subtle opacity change, while the tooltip follows the cursor, providing a clean and informative way to explore the data.

CCoola85

77% match

Loading thumbnail…

State Icons

State Icons displays every U.S. state as a compact 48×48 pixel SVG icon, with each state’s name shown above its clipped silhouette. The visualization uses a single TopoJSON file, pre-processed from USGS data, where each state is projected with its own local coordinate system and simplified via topojson. The code applies `d3.geo.path` with a null projection to render the pre-transformed geometries, and loads the combined data through `d3.json`. This approach preserves recognizable state shapes while fitting them uniformly into the small grid.

Mmbostock

77% match

Loading thumbnail…

US State Map

This example displays a static map of US states, with each state rendered as a gray path using an SVG. The code loads state boundary data from a TopoJSON file and converts it into GeoJSON features using the `feature` function from topojson. It then projects the geographic coordinates to screen space with the `geoAlbersUsa` projection and `geoPath` generator from D3, appending the resulting paths to the SVG. No additional data or interactivity is applied.

Ddanrhymes

75% match

Loading thumbnail…

Let's make a map with D3.js!

This visualization displays U.S. states as a choropleth map, highlighting a subset of selected state IDs in orange while rendering all others in gray. It uses D3 v5’s `geoAlbersUsa` projection and `geoPath` to draw SVG paths from TopoJSON data loaded from `us-10m.v1.json`. The code filters state features against a predefined set and applies the `.selected` CSS class, though the commented-out section means the highlighting is not rendered in the final output.

Jjons288

74% match

Loading thumbnail…

Country Map- ICE 8

This example displays a choropleth-style map of the United States, coloring each state with a uniform dark teal fill and a light stroke. Hovering over a state changes its fill to a pale cream, providing a simple interactive highlight. The visualization uses D3 v5’s `geoPath` and `geoAlbersUsa` projection, combined with TopoJSON’s `feature` method to parse state boundaries from a remote JSON file. The SVG rendering is styled via a linked CSS stylesheet, with hover effects applied through the `.states:hover` class.

YYbg99

73% match

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

73% match

Loading thumbnail…

Fixed projection for US States

This example displays US states grouped into four census regions—Northeast, Midwest, South, and West—each filled with a distinct color. It uses d3.json to load the TopoJSON file, topojson.merge to combine state geometries by region, and d3.geoPath to render the resulting shapes as SVG paths. State groupings are defined using d3.set of FIPS codes, and CSS classes control the fill colors.

Jjons288

73% match