Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Feb 3, 2022

Created on Feb 3, 2022

This example shows how reported COVID-19 incidence rates vary by age group across reporting weeks, using a multi-series line chart built with the vega-lite-api library. The visualization combines d3.csv to fetch and parse data from a GitHub-hosted CSV file, filtering specific rows and transforming semicolon-separated fields into structured objects. The vega-lite-api defines the line mark, maps the meldewoche field to the x-axis, inzidenz to the y-axis, and altersgruppe to color. Rendering is handled by Vega-Lite and Vega, with a tooltip handler integrated for interactive data inspection.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

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

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

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

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

78% match

Loading thumbnail…

Fork of Vega-Lite API Template

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.

Bblueyjuice

77% match

Loading thumbnail…

Vega-Lite API Template

A single bar chart displays the estimated incidence of cancer cases per year, using orange bars along quantitative and temporal axes. The visualization is built with the Vega-Lite API, which programmatically composes a bar mark and encodings in `viz.js`, while `index.js` registers Vega, Vega-Lite, and Vega-Tooltip, renders the chart to SVG, and sizes it to fit the viewport. Data is loaded asynchronously from a CSV file containing cancer statistics using d3.csv, and a custom configuration in `config.js` adjusts axis and label styling.

Yyastika

76% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes U.S. population by age group and sex from 1850 to 2000, using grouped bar marks over a time axis. It builds the chart with the vega-lite-api, registering vega-lite and vega for rendering, and enables a tooltip handler for interactivity. Data is loaded asynchronously from a CSV file via d3.csv, with appearance customized through a config object that adjusts label and title font sizes and colors. The visualization outputs as an SVG, fitted to the full window dimensions.

LLove Wessman

76% match

Loading thumbnail…

Fork of Vega-Lite API Template

Two side-by-side bar charts display COVID-19 vaccination progress in Canada, comparing total vaccinations against fully vaccinated individuals over time. The visualization uses the Vega-Lite API with D3 for CSV data loading, pulling from the Our World in Data repository. Each chart renders as a gold bar mark with tooltips showing values, fitted to half the viewport width. Styling is customized in a separate config module for readability, with axis and label adjustments. Both charts share identical formatting, enabling direct comparison of the two vaccination metrics on the same date scale.

CChris Bodnarchuk

76% match