Skip to main content
SimilarExport ZIP
100%

Jack's Vega-Lite API Template

✓ Published0🌍 Public
Jjackcaldwellnichols
Last edited Nov 7, 2023
Created on Nov 7, 2023

This example demonstrates a bar chart of U.S. state populations in 2014, with bars sized and colored by state and sorted by population. The visualization is built using the Vega-Lite API, which is registered with Vega and Vega-Lite, and rendered as SVG via D3. It fetches CSV data from a Gist, applies a custom configuration for axis and label styling, and uses vega-tooltip for interactive hover details. The chart fills the entire browser window and updates its dimensions dynamically.

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

Vega-lite barchart population

This example displays a bar chart of 2015 country populations, sorted in descending order, with interactive tooltips showing population values. It is built using the Vega-Lite API, which composes a specification for bar marks, nominal country fields, and quantitative population encodings. The visualization pulls data from a CSV file via `d3.csv`, and renders with SVG through `vega` and `vega-lite`. The chart fits the window and applies custom axis and label styling from a shared config object.

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

Fork of Vega-Lite API Template

This example visualizes U.S. state population trends from 2010 to 2019 using a multi-series line chart. The Vega-Lite API constructs marks encoded with x-axis time data, y-axis population values, and color grouping by geographic area, with tooltips for individual states. Population data is loaded asynchronously via d3.csv from a GitHub gist. The visualization renders in SVG and includes a dark-themed config that removes axis domains and customizes label styling for readability.

Nnonbots
82% 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
82% match