Vega-Lite API Choropleths Maps Table Row

100%

Vega-Lite API Choropleths Maps Table Row

✓ Published0🌍 Public

Last edited Sep 27, 2019

Created on Sep 18, 2019

This example displays multiple choropleth maps arranged in a table row, each representing income percentage distribution across U.S. states for a different income bracket. Using Vega-Lite’s geoshape mark with an AlbersUSA projection, it merges income data with TopoJSON state geometries via a lookup transform. The visualization is rendered through the Vega-Lite API and embedded with vega-embed, pulling income data from a CSV and US state boundaries from the vega-docs repository.

AI-generated description

This example of multiple choropleths visual comes form Vega-Lite's site. It demonstrates mutliple choropleths are used to show the income percentage distribution grouped by different income brackets. The original data is a csv data from vega demo data for income distribution in the US which can be found in vega docs data on github.

MIT Licensed

Similar vizzes

Loading thumbnail…

Vega-Lite Choropleths Maps Table Column

This example shows three choropleth maps of U.S. states, each displaying a different quantitative column—population, engineers, and hurricanes—from the same CSV dataset. The maps are generated using Vega-Lite’s repeat operator to iterate over the three fields, with each map using an Albers USA projection and independent color scales. The code loads TopoJSON state boundaries and joins them to the data via a lookup transform, while D3 v5 fetches the CSV locally. Custom axis and label styling in `config.js` improves readability.

Yyuzhang21

86% match

Loading thumbnail…

Vega-Lite US Map for Unemployment Rate

This choropleth map visualizes U.S. state-level unemployment rates using a sequential color scale. Built with Vega-Lite, it loads TopoJSON state boundaries and joins them to a TSV file of rates by state ID. The map applies an Albers USA projection. The code uses `vega-embed` to render the specification, with `getData.js` importing CSV data via D3. A hover effect is implemented with CSS, and the original configuration was adapted from a Vega-Lite example that used county-level data.

Yyuzhang21

79% match

Loading thumbnail…

Vega-Lite US Maps With Capital Cities

This visualization displays a choropleth map of the United States, with each state colored according to a percentage value (pct01) representing ILI activity, alongside orange circles marking state capital cities with their names as labels. The map uses Vega-Lite’s geoshape mark with an AlbersUSA projection, loading state boundaries from TopoJSON. A layered specification combines the colored state shapes and the capital markers, while the data comes from a local TSV file. The code integrates Vega-Lite v4 beta, Vega, and Vega-Lite API for rendering and configuration.

Yyuzhang21

79% match

Loading thumbnail…

Vega-Lite US Map Unemployment

A choropleth map of US state unemployment rates colors each state according to its quantitative rate, with a blue hover effect on state borders. The visualization loads US TopoJSON data from Vega’s repository and joins it with a TSV file mapping state IDs to unemployment percentages. It uses Vega-Lite’s `geoshape` mark, `albersUsa` projection, and a lookup transform to merge the datasets. The code leverages the vega-embed library, d3.csv for data loading, and vega-tooltip for interactive inspection, with the map rendered inside an HTML page using Vega-Lite’s API.

Yyuzhang21

78% match

Loading thumbnail…

Vega-Lite US Maps With Captital Cities

This example visualizes U.S. state capitals as orange circles with city name labels, layered over a light gray map of U.S. states. It uses two Vega-Lite layers: a geoshape for the TopoJSON state boundaries and a composite layer combining circle and text marks for the capitals, positioned by longitude and latitude from the us-state-capitals.json dataset. The code relies on Vega-Lite’s projection type `albersUsa`, and embeds the visualization via `vegaEmbed` in an HTML page.

Yyuzhang21

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

72% match

Loading thumbnail…

Vega-Lite API Template

This example displays a bar chart of U.S. counties with death counts, sorted in descending order, with a tooltip for population. Built with the Vega-Lite API, the visualization uses a D3 CSV loader to fetch the data from a GitHub gist. The chart is rendered as SVG via Vega, and the code applies a custom configuration to adjust fonts and axis styling. The visualization is sized to fit the browser window.

Mmtabaka

72% match

Loading thumbnail…

Jack's Vega-Lite API Template

This example demonstrates a bar chart of U.S. state populations in 2014, with bars sized and colored by state and sorted by population. The visualization is built using the Vega-Lite API, which is registered with Vega and Vega-Lite, and rendered as SVG via D3. It fetches CSV data from a Gist, applies a custom configuration for axis and label styling, and uses vega-tooltip for interactive hover details. The chart fills the entire browser window and updates its dimensions dynamically.

Jjackcaldwellnichols

72% match