Vega-Lite API Template

100%

Vega-Lite API Template

✓ Published1🌍 Public

Last edited Jul 27, 2020

Created on Jul 26, 2020

A bar chart visualizes historical figures from the Pantheon dataset, comparing their Heritage Price Index (hpi) across ten countries while color-coding by occupation. The visualization filters the raw CSV data to include only mathematicians, statisticians, computer scientists, engineers, inventors, biologists, and physicists from the United States, United Kingdom, Germany, Italy, China, India, Japan, South Korea, Canada, and France. Built with the Vega-Lite API, the chart uses `vl.markBar()` and encodes fields for country, hpi, occupation, and tooltip with figure names. The code loads data via D3's `csv`, applies custom configuration for axis styling, and renders through Vega, Vega-Lite, and vega-tooltip libraries.

AI-generated description

A visualization constructed using the vega-lite-api.

An exploration of the Pantheon dataset: Pantheon.world

MIT Licensed

Similar vizzes

Loading thumbnail…

Vega-Lite API Template

A scatter plot visualizes modern mathematicians, statisticians, computer scientists, engineers, inventors, biologists, and physicists born after 1950 across seven countries, mapping historical prominence index (hpi) and lifespan (l) on the axes. Each point’s color and fill encode occupation, shape indicates birth country, and size reflects non-English page views. The example uses the Vega-Lite API to construct the specification programmatically, with D3’s `csv` loading data from the Pantheon.world dataset, and renders through Vega with tooltip support.

Ssriramvsharma

86% match

Loading thumbnail…

Vega-Lite API Template

This example demonstrates a stacked bar chart that visualizes population by country, colored by religion, using data from the UCI Auto MPG dataset via a Gist URL. The visualization is built with the Vega-Lite API, which registers Vega and Vega-Lite libraries to render SVG output. The code uses `vl.markBar()`, `vl.y()`, `vl.x()`, and `vl.color()` to define the chart’s encoding, while D3’s `csv` function fetches the data. An interactive tooltip is enabled through the Vega Tooltip handler, and the chart’s appearance is customized with configuration options for axis styling and font sizes.

Aashokganpathi

83% 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_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

82% match

Loading thumbnail…

Vega-Lite API Template - barchart

This example demonstrates a bar chart visualization of population by country for 2015, using a dataset loaded from a GitHub gist via d3.csv. The chart displays countries on the x-axis sorted in descending order of population, with population values mapped to the y-axis. It is constructed programmatically using the Vega-Lite API (vl) to define the bar mark and encodings, then rendered through Vega and Vega-Lite engines. The code also applies a custom configuration for axis styling and uses Vega-Tooltip for interactive hover details.

Llaplantalaplanta

82% match

Loading thumbnail…

Vega-Lite Bar Chart

This bar chart visualizes population by country for 2015, using the Vega-Lite grammar to map countries to the x-axis and population to the y-axis. Built with the `vega-lite-api` and rendered via the `vega` and `vega-lite` libraries, it loads data from a CSV file using `d3.csv` and displays interactive tooltips via `vega-tooltip`'s Handler. The chart is styled with a custom config for improved readability.

Bbakstorage00001

81% match

Loading thumbnail…

Vega-Lite API Template Bar Chart

This bar chart visualizes the population of each country in 2015, using a horizontal bar for each nation. Constructed with the Vega-Lite API, the chart serializes a declarative specification through `vl.markBar()` and `vl.x().fieldN('country')`/`vl.y().fieldQ('population')`. The code registers Vega, Vega-Lite, and the tooltip handler, then loads CSV data from a GitHub gist via `d3.csv`. The visualization renders to SVG and adapts to the browser window size.

MMilena Belianovich Holtman

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