Fork of Hello Vega Lite API

100%

Fork of Hello Vega Lite API

✓ Published0🌍 Public

Last edited Mar 2, 2021

Created on Mar 2, 2021

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.

AI-generated description

An example starting point for working with vega-lite-api. Derived from Observable: vega-lite-api.

The data shown is US zipcodes, from Vega Datasets.

Implements HiDPI Canvas.

MIT Licensed

Similar vizzes

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

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

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

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

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

79% match

Loading thumbnail…

Fork of Vega-Lite API Template

The visualization displays a bar chart mapping countries and sectors, with the color of each bar encoding the count of records from a U.S. postal service dataset. It shows the distribution of postal data across these categorical attributes. The code uses the Vega-Lite API to define the chart, built on Vega and Vega-Lite, with d3.csv loading the external dataset. Tooltips are handled via vega-tooltip, and the appearance is customized through a config object to improve readability.

Ppnlinyz

78% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization uses the Vega-Lite API to render an interactive scatter plot of population density data, plotting population in 2021 against density per square mile for various countries. The data is loaded from a CSV file via D3’s `csv` function, and the plot encodes country as color with tooltips showing country names. The code registers Vega, Vega-Lite, and the Vega-Lite API, applies a custom dark theme through a config object, and sizes the SVG renderer to fit the window using `autosize`. The mark-point specification sets point size and opacity, though tooltip fields are limited to the country name.

Ppfoulley

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

76% match