Iterating with Vega-Lite API

100%

Iterating with Vega-Lite API

✓ Published0🌍 Public

Last edited Mar 21, 2021

Created on Mar 19, 2021

This example shows the number of airports per U.S. state, rendered as bars positioned on an Albers USA map projection. Built with the Vega-Lite API, it registers Vega and Vega-Lite, then uses a bar mark with a count transform and a projection to create the spatial layout. The visualization reads airport data from the vega-datasets package, applies custom styling from a config file, and renders to canvas with tooltips enabled.

AI-generated description

A visualization constructed using the vega-lite-api.

The data shown here comes from the UCI Machine Learning Repository: Auto MPG Data Set, via Gist: Scatter Plot with Menus.

MIT Licensed

Similar vizzes

Loading thumbnail…

A Map for USA Airport

This map visualization displays the distribution of airports across the United States, with each circle representing an airport positioned by its latitude and longitude, colored by state, and showing the airport name on hover. Built with vega-lite-api, it uses the `vl.markCircle` method with latitude and longitude encoding streams to project the geographic data points. The code loads airport information from a CSV file using d3.csv, applies custom axis and label styling through a shared config object, and renders the final chart with vega and vega-lite in an SVG view.

XXinting Yao

81% match

Loading thumbnail…

Vega-Lite FLights by Country

This visualization shows the number of flights per country as a bar chart, with each bar colored by country and sized proportionally to the flight count. It uses the Vega-Lite API to encode the data, with country on the x-axis and an aggregated count of flights on the y-axis, displayed as bars with a fixed size and full opacity. The data is loaded asynchronously via d3.csv from a raw GitHub dataset, and the chart is rendered to SVG using the Vega-Lite runtime with a custom config for axis styling and tooltip support.

Mm1k3yp

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

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

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

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

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

74% match

Loading thumbnail…

Vega-Lite API Template

This bar chart displays population by country from a 2015 dataset, using Vega-Lite’s API to build the visualization with horizontal bars sorted by value. The code loads CSV data via `d3.csv`, configures axes and styling through a custom config object, and renders SVG using vega-lite and vega-tooltip for interactive hover details. The example demonstrates programmatic chart construction and React state management for handling asynchronous data.

Hhamzavg

73% match