Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Aug 8, 2021

Created on Aug 8, 2021

This example shows a Vega-Lite API bar chart displaying job counts by job number and card type for a factory in New York. The stacked bars use color to distinguish card types (CDL vs. DL) and include tooltips showing the summed count per category. The visualization is built with the Vega-Lite API, which wraps the Vega and Vega-Lite libraries, and uses vega-tooltip to handle interactive hover details. Static data is defined inline in JavaScript, and the chart is rendered as an SVG that automatically fits the full browser window.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Vega-Lite API Template

This example from the Vega-Lite API template displays a bar chart showing the count of records per business unit, colored by work class and positioned along a temporal axis derived from date-of-birth data. The visualization is built using the Vega-Lite API (vl) with D3.js v5 for data loading via the `csv` function from a GitHub Gist. It uses vega-lite-api’s declarative encoding to map fields to x, y, color, and tooltip, then renders to SVG with a tooltip handler and custom axis styling from a config object.

Mmarkbayley

83% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a horizontal bar chart of population by country, with bars sorted in descending order and tooltips displaying population values on hover. Built using the Vega-Lite API, it loads CSV data from an external URL via d3.csv, configures visual styling through a custom config object, and renders the chart as an SVG using vega and vega-lite. The chart resizes to fit the window with automatic width and height calculations, and tooltips are enabled through the vega-tooltip Handler.

Ssimontoblad

78% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes automobile data where each car model is represented as a bar positioned by its miles per gallon (mpg) and year, with color encoding the country of origin and bar size encoding horsepower. The visualization uses the Vega-Lite API to construct the specification, which is then rendered as an SVG by Vega, with data loading handled through d3’s `csv` function. Tooltips are enabled via vega-tooltip, and the chart is configured with custom axis and label styling from the `config.js` file, while the layout auto-fits to the browser window.

Rredeath96

77% match

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

77% match

Loading thumbnail…

Fork of Fork of Vega-Lite API Template

This example visualizes yearly costs by bar height, with tooltips displaying the associated account code. The visualization is built with the Vega-Lite API, using `vl.markBar()`, `vl.x()`, and `vl.y()` to encode the data fields. It loads CSV data from a remote URL via `d3.csv`, then renders the chart to a canvas using Vega and Vega-Lite’s rendering engine. The `config.js` file customizes axis and label styling for improved readability, while the `vega-tooltip` handler enables interactive hover details.

Nnkmwambs

77% match

Loading thumbnail…

Vega-Lite API Stacked Bar Chart Template

This example demonstrates a stacked bar chart generated using the Vega-Lite API, with data loaded from a CSV of religious demographics by country. The code imports the vega, vega-lite, and vega-lite-api libraries, registers them together, and configures a custom tooltip handler. The visualization renders as an SVG that fills the entire viewport, using the `autosize` fit option and custom axis and label styling defined in a separate configuration module. The data is fetched asynchronously via D3's `csv` function.

Ppjdhungana@gmail.com

77% match

Loading thumbnail…

Vega-Lite API Template

This example visualizes the sum of slum households per division using a bar chart generated with the Vega-Lite API. It renders bars sized to five pixels, sorted by aggregate value, and applies a custom dark-color configuration for axis labels and titles. The code loads CSV data from a GitHub gist using d3.csv, registers vega, vega-lite, and vega-lite-api, and enables tooltips via vega-tooltip’s Handler.

Ssofia-martinovich

76% match

Loading thumbnail…

Vega-Lite API Template

This example shows global hospital bed counts by country, with bars colored by hospital type and sorted by value. It uses the vega-lite-api to construct a bar chart specification programmatically, then renders it with Vega-Lite and Vega. Data is loaded asynchronously via d3.csv from a GitHub-hosted CSV file. The visualization fills the browser window, using a custom dark theme and Vega Tooltip for interactive hover details.

IIris Lin

76% match