Working Tooltips

100%

Working Tooltips

✓ Published1🌍 Public

Last edited Aug 31, 2019

Created on Aug 30, 2019

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.

AI-generated description

An attempt at getting tooltips to work with vega-lite-api.

MIT Licensed

Similar vizzes

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

79% match

Loading thumbnail…

Working Tooltips

A choropleth-style scatterplot maps the geographic distribution of violent crime across U.S. states, using a circle for each crime incident. The visualization relies on vega-lite-api to construct the specification, which is registered with Vega and Vega-Lite, while a custom tooltip handler from vega-tooltip displays the department name on hover. Data is loaded from a GitHub-hosted CSV, with a filter excluding certain states and a calculated field for zip-code prefixes. The Albers USA projection and a color scale generated with d3’s range and hcl functions map coordinates and hue by crime count.

Yyyaaa1

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

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

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

76% 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…

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

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

72% match