Zip Code Trails

100%

Zip Code Trails

✓ Published3🌍 Public

Last edited Dec 29, 2019

Created on Aug 30, 2019

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.

AI-generated description

An experiment with vega-lite-api.

Inspired by Observable: Cartographic Visualization.

MIT Licensed

Similar vizzes

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

86% match

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

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

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

75% match

Loading thumbnail…

Fork of Hello Vega Lite API

This visualization displays US zip codes as a scatter plot using an Albers USA projection, with each point colored by the first two digits of the zip code via a custom hue scale. The example leverages the vega-lite-api to construct a Vega-Lite specification programmatically, then renders it to a HiDPI canvas using Vega and Vega-Lite. Data comes from the Vega Datasets repository, and the rendering applies a scale factor for sharp retina display.

Jjohnson-tolo

75% match

Loading thumbnail…

Fork of Hello Vega Lite API

A scatter plot of US zipcodes rendered on an Albers USA projection, colored by the first two digits of the zip code to reveal regional clustering. Built with the Vega-Lite API and D3, it uses `vl.markCircle`, `vl.project`, and `vl.longitude`/`vl.latitude` encodings, with a custom D3 `hcl` color scale. The visualization is drawn to a HiDPI Canvas with a scale factor of 3 for retina display support, using data from the Vega Datasets collection.

AAki78

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

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

74% match