Skip to main content
SimilarExport ZIP
100%

Vega-Lite API Template

✓ Published0🌍 Public
IIris Lin
Last edited Apr 26, 2020
Created on Apr 26, 2020

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.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

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
83% match
Loading thumbnail…

Vega-Lite API Template_Bars

This bar chart displays the population of countries in 2015, with bars sorted in descending order and colored by country. It is built using the Vega-Lite API, which programmatically defines the visualization specification, while D3.js loads the CSV data from a Gist. The chart is rendered as SVG via Vega and Vega-Lite, with tooltips enabled through vega-tooltip and a custom config to adjust axis and label styling for readability.

OOleg Zhernovoy
83% 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
83% 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
83% match
Loading thumbnail…

Vega-Lite API Template I

This example shows a bar chart of population by country, with bars colored by religion and tooltips displaying population values on hover. Using the Vega-Lite API, it constructs a specification via `vl.markBar`, `vl.x`, `vl.y`, and `vl.color` encodings, then renders it through `vl.register` with Vega 5 and Vega-Lite 4. The data is loaded asynchronously via `d3.csv` from a GitHub-hosted CSV. Appearance is customized through a shared configuration object that adjusts axis and label styling.

FFloorNummer
83% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a horizontal bar chart of population by country, with bars sorted in descending order and tooltips displaying population values on hover. Built using the Vega-Lite API, it loads CSV data from an external URL via d3.csv, configures visual styling through a custom config object, and renders the chart as an SVG using vega and vega-lite. The chart resizes to fit the window with automatic width and height calculations, and tooltips are enabled through the vega-tooltip Handler.

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

Fork of Vega-Lite API Template

This example presents a bar chart of population by country for 2015, with countries sorted in descending order along the x-axis. It uses the Vega-Lite API to define the bar marks and encodings, and renders the visualization through a custom D3-based setup in `index.js` that loads data from a CSV URL via d3.csv. The chart leverages vega, vega-lite, and vega-lite-api libraries, with a custom dark-themed configuration for axes and labels, and automatically sizes itself to the full window.

Mmavercikalvin
82% match