Vega-Lite API Template

100%

Vega-Lite API Template

✓ Published0🌍 Public

Last edited Nov 9, 2021

Created on Nov 9, 2021

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.

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…

Vega-Lite API Template

This example visualizes the population of countries in 2015 using a bar chart, with countries sorted in descending order of population. The visualization is built with the Vega-Lite API, which registers Vega and Vega-Lite libraries, and uses D3’s `csv` loader to fetch the dataset from a GitHub gist. The chart renders in an SVG view, with a tooltip from `vega-tooltip` to display population values on hover, and uses a custom config for axis and label styling.

Llscholz1

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

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

93% match

Loading thumbnail…

Vega-Lite API Template

This example displays the population of countries in 2015 as horizontal bars, ranked from largest to smallest, with the countries on the x-axis and their population on the y-axis. Built with the Vega-Lite API, it dynamically loads data via `d3.csv` from a remote gist and renders the chart using Vega-Lite’s SVG renderer. The code customizes the axis and tooltip appearance through a configuration object, and it uses `vega-tooltip` for interactive hover details. The visualization adapts its width and height to the window size with an autosize fit.

CCurran Kelleher

92% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a bar chart of population by country for 2015, with tooltips displaying the population values. The visualization is built using the Vega-Lite API, which programmatically defines a markBar encoding with a categorical x-axis sorted by value and a quantitative y-axis. Data is loaded asynchronously via d3.csv from a Gist-hosted CSV file, and the chart is rendered as SVG through the Vega runtime. The code customizes axis and label styling via a config object and fits the chart to the browser window dimensions.

DDavid Beales

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

92% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a bar chart of population by country for 2015, with bars sorted in ascending order and tooltips displaying population values on hover. It is built using the Vega-Lite API, which registers Vega and Vega-Lite libraries to create the visualization programmatically. The code loads CSV data via d3.csv and renders the chart as an SVG, applying a custom configuration for axis styling and label fonts. The visualization is designed to fit the full browser window using an autosize fit option.

AAnibal Gatica

91% match

Loading thumbnail…

Vega-Lite API Bar Chart Template

This example shows a bar chart of country populations for 2015, with bars sorted in ascending order along the x-axis and tooltips displaying the population value for each country. It uses the Vega-Lite API to construct the chart specification programmatically, combining mark definitions, encoding channels, and data binding in a concise JavaScript interface. The chart renders through Vega and Vega-Lite, with the data loaded from a CSV file using d3.csv, and includes a custom config to adjust axis styling. The visualization is built from a template that registers the Vega-Lite API and integrates Vega Tooltip for interactive hover details.

JJohn Kobbeman

91% match