Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Mar 15, 2021

Created on Mar 15, 2021

This example displays a bar chart of the top 10 countries by “Genshin Impact: (2020)” values. The visualization loads data from a CSV file hosted on Gist, which originates from the UCI Machine Learning Repository’s Auto MPG Data Set. It uses the Vega-Lite API (`vl.markBar`, `vl.x().fieldN`, `vl.y().fieldQ`) to define the chart, and renders it with D3 (via `d3.csv`) for data loading and Vega for rendering. The chart resizes to the browser window and includes a tooltip for the quantitative field.

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…

Fork of Vega-Lite API Template

This example shows a stacked bar chart of population by country, colored by religion, using a dataset loaded from the UCI Auto MPG repository (via a Gist URL). The visualization is built with the Vega-Lite API, which generates a Vega-Lite specification that is rendered by the Vega engine. The code uses `vl.markBar()`, `vl.x().fieldN()`, `vl.y().fieldQ()`, and `vl.color()`, and it relies on d3's `csv` loader to fetch the data. The chart is interactive, including a tooltip via the Vega-Tooltip handler.

BBubfield

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

81% match

Loading thumbnail…

Vega-Lite API Template for bar chart

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.

RRuanzhenglin

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

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

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

80% match

Loading thumbnail…

Fork of Fork of Fork of Episode 18 - Iterating Fast with Vega Lite API - Bar

This visualization displays a bar chart of population by country, sourced from the UCI Auto MPG dataset via a Gist. It is built using the Vega-Lite API alongside d3.v5, with Vega-Lite 4 and Vega 5. The chart sorts bars descending by population and includes tooltips. The code programs the visualization declaratively via `vl.markBar()` and encodes fields with `vl.x()` and `vl.y()`, applying custom axis and label styling from a config object.

Zzjulijie0618

79% match

Loading thumbnail…

Fork of Vega-Lite API Template

This bar chart displays population by country for 2015, using a horizontal layout with country names on the y-axis and population on the x-axis, with tooltips showing exact population values on hover. The visualization uses the Vega-Lite API (`vl.markBar()`, `vl.x().fieldN('country')`, `vl.y().fieldQ('population')`) to declaratively build the specification, which is then rendered via Vega-Lite and Vega. Data is loaded from a CSV file using `d3.csv()` from a GitHub gist, and the chart resizes to fit the browser window using width and height bindings.

NNikhil Sharma

79% match