Vega-Lite Choropleths Maps Table Column

100%

Vega-Lite Choropleths Maps Table Column

✓ Published0🌍 Public

Last edited Sep 26, 2019

Created on Sep 18, 2019

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.

AI-generated description

This example of multiple choropleths visual comes form Vega-Lite's site. It demonstrates three fields frome the same table are used to show on 3 different choropleths. The original data is a csv data from vega demo data for population, engineer and hurricans data per state for US which can be found in vega docs data on github.

MIT Licensed

Similar vizzes

Loading thumbnail…

Vega-Lite API Choropleths Maps Table Row

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.

Yyuzhang21

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

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

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

US Choropleths Map And Captital/Major Cities

This example displays a choropleth map of the contiguous United States with state boundaries rendered as colored polygons, overlaid with two city datasets. State colors transition from white to blue via a `scaleLinear` color scale, while graticules and interior borders are drawn using `d3.geoPath` and `d3.geoGraticule`. Population data from a world cities CSV appears as semi-transparent purple circles sized with `scaleSqrt`, and state capitals from a Vega JSON file are fixed black dots. The map uses TopoJSON from the us-atlas library, projected with `geoAlbers` in an SVG rendered through React.

Yyuzhang21

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

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

76% match

Loading thumbnail…

using Vega lite API

A circular scatterplot visualizes Mexican states based on population and surface area, with color encoding state names and tooltips revealing additional details. The view uses the Vega-Lite API to construct the spec programmatically, registering Vega and Vega-Lite instances for rendering. Data is loaded asynchronously via D3’s CSV parser and styled with custom axis and title settings for readability. The visualization renders to fit the full browser window in SVG format.

DDataFeast_71

74% match