Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Nov 10, 2021

Created on Nov 10, 2021

This example visualizes COVID-19 recovery counts across countries, using colored and sized circles to represent the recovered cases per nation. Data is loaded from an Auto MPG dataset, though the visualization maps it to Country and Recovered fields. Built with D3.js and the Vega-Lite API, it registers Vega and Vega-Lite libraries, configures tooltips via vega-tooltip, and renders a scatter plot with a dark customization theme, scaling circles by recovery values.

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…

Fork of Vega-Lite API Template

This visualization displays the relationship between Country and Recovered numbers from a Fat Supply Quantity dataset, using circles sized by recovery count. It is built with the Vega-Lite API, which generates charts through declarative specifications, and runs on D3.js v5 for data loading. The code uses `vl.markCircle`, `vl.x().fieldN()`, and `vl.size().fieldQ()` to encode categorical and quantitative fields, with custom configuration in `config.js` to adjust axis and label styling. Data is fetched asynchronously via `d3.csv`.

Bblueyjuice

88% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes COVID-19 vaccination data, plotting total vaccinations against people vaccinated as a scatter plot with tooltips showing location names. Built with the Vega-Lite API and D3.js, it registers Vega and Vega-Lite, loads CSV data via `d3.csv`, and renders an interactive SVG chart that fills the viewport. The visualization applies a custom configuration for axis styling and tooltip formatting, using a dark color scheme for labels and titles.

GGerasimos Katsagannis

86% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset, showing a scatter plot of vehicle counts by country. The visualization uses Vega-Lite API to create circles with tooltips, sorted by country on the x-axis and number of vehicles on the y-axis. The code integrates vega, vega-lite, and d3.csv for data loading, with a custom config to style axis labels and titles. It renders SVG via the vega view, fitting the visualization to the full window size.

Bblackbottt

85% match

Loading thumbnail…

Fork of Fork of Vega-Lite API Template

This example displays a scatter plot of COVID-19 vaccination data, mapping daily vaccinations on the x-axis and total vaccinations on the y-axis. It uses the Vega-Lite API to construct the visualization declaratively, with d3.csv fetching the dataset from a GitHub-hosted CSV file. The code customizes the chart’s appearance through a Vega-Lite config object, adjusting axis styles and label fonts for readability. The visualization renders as an SVG via vega-tooltip for interactive hover details.

GGerasimos Katsagannis

85% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes global COVID-19 vaccination progress, plotting total vaccinations over time and colored by vaccine type, with tooltips revealing country ISO codes. Built using the Vega-Lite API for D3, the code registers Vega-Lite specifications with `vl.markPoint` and encodes the data through `vl.encode`. The visualization loads CSV data via `d3.csv`, applies a custom configuration for axis styling, and renders to an SVG canvas with interactive tooltips handled by the `vega-tooltip` `Handler`.

GGerasimos Katsagannis

84% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays COVID-19 vaccination data, plotting total vaccinations against daily raw vaccination numbers, with points colored by date and sized by daily vaccinations. It uses the Vega-Lite API to construct the chart programmatically, registering with Vega and Vega-Lite, while loading data from a CSV via d3.csv. The visualization reads vaccination records from a Gist-hosted dataset, rendering an interactive scatter plot with tooltips that reveal location information, with custom configuration for axis styling and typography.

GGerasimos Katsagannis

84% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization presents a scatter plot of food supply data, plotting Alcoholic Beverages against Recovered values for different countries, with tooltips revealing country names. Built with the Vega-Lite API, it uses `vl.markCircle` and `vl.encode` to define the chart. The code loads data from a CSV file via d3.csv, and renders the visualization using the Vega, Vega-Lite, Vega-Lite API, and Vega-Tooltip libraries, with custom styling from a config object.

Bblueyjuice

84% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the distribution of population by country using a scatter plot, with points colored by percentage and positioned along a categorical country axis and quantitative population axis. It loads data from the UCI Auto MPG dataset via a Gist, though the code references CSS named colors and population fields. Built with the Vega-Lite API, the visualization registers Vega and Vega-Lite, configures an SVG renderer with tooltips, and applies a custom dark theme for improved readability. The chart uses a point mark with reduced opacity and a zero-less scale to highlight population differences.

Gguitmonk-1290

83% match