Fork of Hello Vega Lite API

100%

Fork of Hello Vega Lite API

✓ Published0🌍 Public

Last edited Jun 3, 2021

Created on Jun 3, 2021

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.

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

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

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

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

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

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

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

78% 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 Fork of Vega-Lite API Template

This visualization displays a scatter plot of data from the UCI Auto MPG dataset, plotting intensity against end year and coloring points by pestle, with tooltips showing sector information. Built with the Vega-Lite API, it uses d3’s `csv` function to load remote data, `vl.markCircle` for the marks, and encodes x, y, color, and tooltip channels. The code registers Vega-Lite with a custom config to adjust axis styling and label fonts, and renders the chart as an SVG fitted to the window size.

KKIRRAN P L

76% match