Skip to main content
SimilarExport ZIP
100%

Vega-Lite API Template

✓ Published0🌍 Public
Yyastika
Last edited Apr 11, 2021
Created on Apr 9, 2021

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.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

Vega-Lite API Template

A bar chart displays the number of convictions for each age group, sorted in descending order by age. The visualization is built using the Vega-Lite API library, which programmatically constructs the chart specification via `vl.markBar()`, `vl.x()`, and `vl.y()`. Data is loaded asynchronously from a CSV URL using `d3.csv`. The chart renders with Vega-Lite's SVG renderer, and hovering triggers a tooltip via the `vega-tooltip` handler. Appearance is customized through a shared config object that removes axis domains and adjusts tick colors, label sizes, and dark text styling.

Llscholz1
84% 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
82% match
Loading thumbnail…

Vega-Lite API Template

This example visualizes infrastructure indicators by plotting each data point as a circle, with the year on the x-axis, the indicator type on the y-axis, and the color encoding the numeric value. Tooltips reveal the exact values on hover. The visualization is built using the Vega-Lite API, which registers Vega and Vega-Lite libraries to render the chart as SVG. Data is loaded asynchronously from a CSV file using d3.csv, and the chart’s styling and axis labels are customized through a configuration object. The visualization automatically fits the full browser window.

SSabin Bhandari
82% 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
81% match
Loading thumbnail…

Vega-Lite API Template

This example shows global hospital bed counts by country, with bars colored by hospital type and sorted by value. It uses the vega-lite-api to construct a bar chart specification programmatically, then renders it with Vega-Lite and Vega. Data is loaded asynchronously via d3.csv from a GitHub-hosted CSV file. The visualization fills the browser window, using a custom dark theme and Vega Tooltip for interactive hover details.

IIris Lin
81% 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
81% match
Loading thumbnail…

Vega-Lite API Template

This example presents a horizontal bar chart of population by country, with bars colored by religion and tooltips displaying the religion attribute. It is built using the Vega-Lite API along with Vega, Vega-Lite, and D3’s CSV loader, rendering to SVG via Vega’s view system. The chart fetches data from a GitHub-hosted CSV file and configures axes and label styling through a shared configuration object.

Aazharahmad0
80% match
Loading thumbnail…

Vega-Lite API Template

This example shows a stacked bar chart of population by country, colored by religion, using a Vega-Lite specification written in JavaScript. The visualization queries data from a CSV file hosted on GitHub, loads it via `d3.csv`, and renders with an SVG backend. It demonstrates the vega-lite-api library’s fluent encoding methods, along with vega-tooltip for interactive hover details, and custom axis and label styling from a shared config object.

CCurran Kelleher
80% match