Skip to main content
SimilarExport ZIP
100%

Vega-Lite API Template for bar chart

✓ Published1🌍 Public
RRuanzhenglin
Last edited Apr 15, 2021
Created on Apr 15, 2021

This example renders a bar chart of country populations using the Vega-Lite API, with data loaded from a CSV via D3’s `csv` function. The chart shows population counts per country, sorted descending, using `vl.markBar()` and encoding fields for country and population. The code integrates Vega-Lite with D3 v6, configures axis styling and tooltips via Vega Tooltip, and resizes the visualization to fit the window. The data originates from the UCI Auto MPG dataset, though the actual values shown come from a population-by-country gist.

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

Fork of Vega-Lite API Template3

This visualization shows a bar chart of population by country, sorted in descending order, with tooltips displaying the raw population values on hover. It uses the Vega-Lite API to define the chart specification, while D3.js loads the CSV data from a Gist. The rendering pipeline combines Vega, Vega-Lite, and Vega-Lite API libraries, with Vega-Tooltip for interactive hover details. The chart is configured to fit the full browser window and uses custom axis styling for improved readability. Data originates from the UCI Machine Learning Repository’s Auto MPG dataset.

AArookie-2020
89% match
Loading thumbnail…

Vega-Lite API Template

This example presents a bar chart of population by country, with bars segmented by religion, using the Vega-Lite API. The visualization reads CSV data from a GitHub gist via `d3.csv` and encodes country, population, and religion through `vl.x()`, `vl.y()`, and `vl.color()`. It renders as an SVG in the browser, applying custom axis and label styling from a config object. The chart also includes tooltips for population values, powered by the Vega Tooltip handler.

QQingyue99
89% 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
89% match