Zipdecode

100%

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Mar 17, 2013

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.

AI-generated description

Another (minimalist) take on Ben Fry’s zipdecode, inspired by Nelson Minar’s reimplementation. This one uses cross-fading canvas elements to render transitions efficiently.

gpl-3.0 Licensed

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

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

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

73% match

Loading thumbnail…

Zip Code Trails

This visualization shows the geographic distribution of United States zip codes as colored trails, with each trail segmented by the first three digits of the zip code. It renders 960 by 500 pixels on a black background using an Albers USA projection. The code uses vega-lite-api with vega and vega-lite to create the line marks, filtering out non-continental states and applying a categorical color scale based on digit ranges. Data comes from the vega-datasets zipcodes.csv source.

CCurran Kelleher

72% match

Loading thumbnail…

Working Tooltips

This example displays a map of U.S. zip code locations as colored dots, with each color corresponding to the first two digits of the zip code. Hovering over a dot reveals a tooltip showing the state name. The visualization uses the Vega-Lite API to define the circle marks, projection, and encoding, while the vega-tooltip library handles the interactive tooltips. Data comes from the vega-datasets zipcodes.csv file, filtered to exclude non-continental states.

CCurran Kelleher

72% match

Loading thumbnail…

Hello Vega Lite API

This example maps zip code locations across the United States as an interactive canvas visualization. It uses the Vega-Lite API (vl) to define a circle mark with longitude and latitude encodings, projecting the data with the Albers USA projection. The D3 library supplies a categorical color scale generated from hue, chroma, and lightness (hcl) values, assigning a distinct color per first two digits of each zip code. The final Vega view is rendered to a HiDPI canvas with a scale factor of three for retina displays. The underlying data is loaded from a remote CSV of zip codes.

Hhotdoujiang

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

70% match

Loading thumbnail…

Mapbox GL zip code map with on off buttons

This interactive map displays U.S. zip code boundaries as semi-transparent, colored polygon fills with subtle blue outline lines. A menu of on/off buttons toggles the visibility of the "Zip" fill layer and the "zipline" boundary layer. Built with Mapbox GL JS, it loads a vector source and renders layers using the Mapbox Studio style, with hover events logging feature properties to the console.

JJn1532

69% match