vega-lite-tutorial

100%

vega-lite-tutorial

✓ Published0🌍 Public

Last edited Mar 7, 2022

Created on Mar 7, 2022

This visualization shows the number of space launches over time by nation, filtered to the USA, China, USSR, Russia, and Japan. It uses semi-transparent, stroked circles to represent each launch, with time on the x-axis and nation on the y-axis. The example is built with the vega-lite-api, which registers Vega and Vega-Lite, and loads data from a CSV via d3.csv. The chart’s appearance is customized through a shared config object, and it renders as a full-window SVG with tooltips provided by vega-tooltip.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

Ratio of Launches

This visualization compares the ratio of state-run versus private space launches across countries using a grouped bar chart. The display uses colored bars—one hue for state-run launches and another for private—for each country of origin, with tooltips showing counts. Built with Vega-Lite and the vega-lite-api wrapper, the chart is rendered as SVG via the vega view. Data is loaded asynchronously with d3.csv from a GitHub-hosted dataset, with custom styling defined in a separate config file.

TTaylor

77% match

Loading thumbnail…

test Vega-Lite API 2

This example displays a bar chart of satellite launch purposes by country, with bar heights encoded via a symmetric log scale and bars colored by purpose, using a dataset loaded from a CSV file. It is built with the Vega-Lite API, which registers Vega and Vega-Lite libraries, and renders the visualization as SVG using `vl.markBar`, `vl.x`, `vl.y`, and `vl.color` encodings. The chart fills the browser window, and a Vega Tooltip handler is initialized to show value details on hover.

Ssurikmeetr

76% match

Loading thumbnail…

Vega-Lite API Template

This example displays the population of countries in 2015 as horizontal bars, ranked from largest to smallest, with the countries on the x-axis and their population on the y-axis. Built with the Vega-Lite API, it dynamically loads data via `d3.csv` from a remote gist and renders the chart using Vega-Lite’s SVG renderer. The code customizes the axis and tooltip appearance through a configuration object, and it uses `vega-tooltip` for interactive hover details. The visualization adapts its width and height to the window size with an autosize fit.

CCurran Kelleher

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

75% match

Loading thumbnail…

Vega-Lite API Template

This example renders an interactive bar chart of population by country for 2015, using data from a Gist CSV file. It visualizes the rank-ordered values with a dark theme and custom axis styling. The visualization is built with the Vega-Lite API, which composes specifications programmatically in JavaScript, integrated with Vega and Vega-Lite libraries. It also uses D3’s `csv` loader for data ingestion, and Vega Tooltip for hover interactions, with the chart fitted to the full viewport.

TTengHoo3

75% match

Loading thumbnail…

Vega-Lite API Template

This example visualizes the population of countries in 2015 using a bar chart, with countries sorted in descending order of population. The visualization is built with the Vega-Lite API, which registers Vega and Vega-Lite libraries, and uses D3’s `csv` loader to fetch the dataset from a GitHub gist. The chart renders in an SVG view, with a tooltip from `vega-tooltip` to display population values on hover, and uses a custom config for axis and label styling.

Llscholz1

74% match

Loading thumbnail…

Vega-Lite API Template

This example visualizes the relative population sizes of religious groups across countries using a bubble chart, where circle size encodes population and the axes list countries and religions. The visualization is built with the Vega-Lite API, which registers Vega and Vega-Lite libraries, and uses D3’s `csv` loader to fetch data from a Gist derived from the UCI Auto MPG dataset. It applies a custom dark-themed configuration for axes and labels, and renders as a responsive SVG that fits the window, with tooltips enabled through `vega-tooltip`.

BBen Seebeck

74% match

Loading thumbnail…

Vega-Lite API Countries

This visualization displays population by country as a horizontal bar chart, with countries sorted by population. Built with Vega-Lite’s API and rendered via D3, it loads data from a CSV of 2015 population figures. The chart uses a dark theme, custom axis styling, and tooltips showing exact values. The code registers Vega-Lite with a tooltip handler and fits the chart to the window size using an autosize configuration. The design improves readability with larger fonts and muted colors, while the interactive tooltip provides detailed population numbers on hover.

MMarta

74% match