Gist 5562531

100%

✓ Published0🌍 Public

Last edited May 12, 2013

Created on May 12, 2013

This visualization displays United States zip codes as individual points on an Albers USA projection, highlighting locations that match a user’s typed input. It shows a map of the country where each of the roughly 43,000 ZIP code locations is drawn as a single pixel-sized square, with matching entries turning red in real time. The code uses deeply nested SVG `<g>` elements and CSS classes to target only the changed digits, rather than redrawing the entire map. It relies on D3’s `d3.nest` for hierarchical grouping, `d3.geo.albersUsa` for projection, and transitions on rectangle fills to animate the highlighting effect.

AI-generated description

An exploration of Mike Bostock's take on Ben Fry’s zipdecode, inspired by Nelson Minar’s reimplementation. This one uses deeply nested SVG elements and classes to target only the things that need to change.

Nesting the SVG made DOM creation bearable, but this is still too slow. Use Mike's canvas approach if you're looking for the "best" way to do this.

Similar vizzes

Loading thumbnail…

Zip Codes

This visualization plots every U.S. ZIP code as a small square on an Albers USA projection, with each point colored by the first digit of its ZIP code. It uses the `vega-lite-api` to construct a layered specification, leveraging `vl.markSquare`, `vl.longitude`, and `vl.latitude` encodings. The data is loaded via `d3.csv` from a GitHub gist, and rendering is handled by Vega-Lite with the `geo-albers-usa-territories` projection. The map fills the browser window and includes a tooltip showing the full ZIP code.

MMauricio García Benítez

81% match

Loading thumbnail…

Zipdecode

Zipdecode displays all U.S. ZIP code locations as a dot map, highlighting those that match the prefix typed into an input field. It uses an AlbersUSA projection to plot each ZIP code’s latitude and longitude from a TSV dataset. As the user enters digits, the map cross-fades between canvases, drawing inactive dots in gray and active matches in red. The implementation uses d3.geo.albersUsa, d3.tsv, d3.select, and canvas transitions, animating opacity over 350 milliseconds before removing old layers.

Mmbostock

79% match

Loading thumbnail…

Gist 877339b9886ef9a8b6db2fc0593bb61e

This example displays a map of the United States using the Albers USA projection, showing each state as a filled polygon. The code loads GeoJSON state boundary data from a local `us-states.json` file and renders it as SVG paths using `d3.geo.path()` with the projection. Built with D3 v3, the visualization sets a fixed canvas size and appends path elements to the SVG container for each feature in the dataset.

MMelanieSalignat

75% match

Loading thumbnail…

Fork of Zip Code Trails

This example renders 960 by 500 pixel U.S. zip code trails as thin colored lines. It uses the `albersUsa` projection to display the geographic data derived from the `zipcodes.csv` dataset. The code employs the `vega-lite-api` to construct a line mark, with `d3` providing a hue-based color scale for the first three digits of each zip code, and a filter removes non-continental states. A fixed color mapping with nine hues visualizes regional groupings across the map.

CCristina Macaraig

75% match

Loading thumbnail…

Gist a76504adb7799e4c28c6d1558bd35ce3

This example displays a map of the United States using an Albers USA projection, rendering state boundaries as SVG paths. It loads geographic data from a local `us-states.json` file containing a FeatureCollection of state polygons. The code uses d3.json to fetch the data and d3.geo.path with a d3.geo.albersUsa projection to convert GeoJSON coordinates into screen paths. The visualization presents a simple, static outline map without additional data encoding or interaction.

AAurelink

75% match

Loading thumbnail…

Gist c7527476915607ec97df5ec292a38e8f

This example displays a static map of the United States using the Albers equal-area conic projection. The visualization renders all state boundaries as individual SVG paths, with Alaska and Hawaii included as multi-part polygons. The code loads geographic data from a local `us-states.json` file and uses the `d3.geo.albersUsa()` projection and `d3.geo.path()` API to convert GeoJSON coordinates into scalable vector graphics. Built with D3 version 3, the map fills the entire browser viewport.

RRomyRatolojanahary

74% match

Loading thumbnail…

Hello Vega Lite API

This visualization displays US zip codes as a dense scatterplot of points over an Albers USA projection, with each point colored by the first two digits of its zip code. The example demonstrates the vega-lite-api library, using its programmatic API to define marks, encodings, projections, and transforms. It renders to a HiDPI canvas via a scale factor, and pulls data from the Vega Datasets’ zipcodes CSV. The code uses d3’s `range` and `hcl` to generate a custom color scale.

CCurran Kelleher

74% match

Loading thumbnail…

Zip Codes

This example visualizes the geographic distribution of U.S. zip code tabulation areas, which serves as a rough proxy for population density. It shows a complete map of the contiguous United States, with each zip code represented as a filled polygon. The map is rendered from a TopoJSON file, originally derived from a Census Bureau shapefile and simplified to reduce file size by 99.1%. The code uses `d3.geoPath` to project and draw the shapes, and the visualization is part of the U.S. Atlas project.

Mmbostock

73% match