State Icons

100%

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Mar 27, 2014

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.

AI-generated description

A quick-and-dirty pass at state icons, using the same state reference plane projections as ProPublica’s excellent StateFace font, and then using TopoJSON to scale and simplify each state to fit in 48×48.

Alaska is a little bit too small because its archipelago extends far into the Pacific Ocean. It would be better to crop its bounding box more tightly.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Symbol Map

A symbol map displays the population of each U.S. state as a circle centered on the state’s centroid, with circle area proportional to population via a square-root scale. The visualization overlays these circles on a gray state map rendered with `d3.geo.path`, using TopoJSON for state boundaries and GeoJSON for state centroids. The code loads both datasets with the queue library, sorts states by population, and draws each symbol as an SVG path with a white stroke and semi-transparent steelblue fill.

Mmbostock

78% match

Loading thumbnail…

State Graph

This example displays a choropleth-style map of the United States, with each state rendered as a light gray polygon and white borders separating them. It loads the US TopoJSON data from `us-10m.v1.json` and uses `d3.geoPath` to project the state features. The code applies a scale transform to the SVG to adjust the map’s size and vertical position. The visualization uses D3 v4 and TopoJSON v2, with the map drawn as SVG paths.

SSelena Ding

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

77% match

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

77% match

Loading thumbnail…

U.S. States TopoJSON small multiples

This example shows a small multiple of the United States, displaying 81 separate SVG maps, each with the nation’s landmass, county boundaries, and state borders drawn in a dark theme. The visualization uses TopoJSON to parse a US Census Bureau shapefile, with `d3.geo.albersUsa` projecting the geographic data onto a 96-by-50-pixel canvas. Each map is rendered by iterating over the topojson features and meshes, applying the same projection and path-generation logic to create a grid of repeated state outlines.

PPhilippe Rivière

76% match

Loading thumbnail…

U.S. States TopoJSON

This example shows a map of the United States rendered as SVG paths, where individual states turn red when hovered. The map uses the TopoJSON `us-atlas` file, loaded via `d3.json`, and the code relies on the `topojson` library to convert the TopoJSON topology into geographic features. The rendering is done with `d3.geoPath` to project the geometry, and state borders are drawn as a separate path using a mesh that highlights each boundary. No interaction beyond the hover effect is implemented.

Mmbostock

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

75% match

Loading thumbnail…

Symbol map

This symbol map shows the population of each U.S. state and the District of Columbia using circles sized proportionally to population, overlaid on a geographic outline of the country. The visualization sorts the states by population and uses a square-root scale to determine circle radius, ensuring areas are proportional to population values. It is built with D3 v3, TopoJSON for the state boundaries, and a queue to load the GeoJSON centroid data. Rendering uses SVG with a `d3.geo.path` projection and `pointRadius` to size each symbol.

EEleonore9

75% match