Mini State Grid

100%

Mini State Grid

✓ Published0🌍 Public

Last edited Dec 15, 2015

Created on Dec 15, 2015

A compact tile grid maps the 50 U.S. states into an ASCII-art layout, with eight states highlighted in maroon to indicate a preselected subset. Hovering over any tile reveals its postal abbreviation via a tooltip. The code embeds state coordinates directly as text, then parses them to position square SVG rectangles using D3’s data join. It uses `d3-tip` for mouseover interactions, with hardcoded `selectedStates` and no external data file.

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.

forked from <a href='http://bl.ocks.org/SpaceActuary/'>SpaceActuary</a>'s block: <a href='http://bl.ocks.org/SpaceActuary/8da9fcf564d2f741898c'>State Grid</a>

Similar vizzes

Loading thumbnail…

State Grid

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.

Mmbostock

83% match

Loading thumbnail…

US State Grid

The visualization displays US states in a grid layout, with each state represented by a labeled cell colored by its assigned region (e.g., CA, SE, NE) using predefined CSS classes. It shows state abbreviations in a fixed 8-row table, including blank cells for layout alignment and non-rectangular geographic positioning. The code uses d3.v4 to bind the stateLoc data array to table rows and cells, applying region-based classes via a stateToRegion mapping. It relies on d3.select and data joins to render the HTML table, with no external data file, as the state coordinates and regional groupings are hardcoded.

NNPashaP

75% match

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

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

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

72% match

Loading thumbnail…

ICE-8 world map

This interactive SVG map displays the fifty US states in a muted orange with white borders, using an Albers equal-area projection. It loads TopoJSON state boundaries from the `us-atlas` package, converts them to GeoJSON features with the `topojson.feature` API, and renders them via `d3.geoPath`. Mousing over a state highlights its border and triggers a semi-transparent tooltip showing the state’s name, positioned near the cursor using the `d3.select` and event handling code.

Ppasalabala22@gmail.com

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

69% match

Loading thumbnail…

Test Map by Ronald

This map shows the 50 U.S. states in blue with black borders, using a geographic projection to display land and interior boundaries. Built with React and D3 v5, it relies on `d3.geoPath` with the `geoAlbersUsaTerritories` projection to render the SVG paths. State data comes from the `us-atlas` TopoJSON file, processed via TopoJSON’s `feature` and `mesh` functions. Hovering a state turns it purple, as styled through CSS.

MMatovu Ronald

69% match