Vega-Lite API Template subGuy

100%

Vega-Lite API Template subGuy

✓ Published0🌍 Public

Last edited Jul 16, 2021

Created on Jul 16, 2021

This example uses the Vega-Lite API to render a GDP bar chart, displaying the raw data from the freeCodeCamp ProjectReferenceData repository. The visualization plots the data’s first field on the x-axis and the second on the y-axis, with tooltips showing the value. The chart is built with `vega-lite-api` and `vl.markBar()`, and configured with custom guide-label and guide-title styles from a `config.js` file. The visualization is rendered to SVG via `vega` and `vega-lite`, using `vega-tooltip` for interactivity, and it is sized to fit the browser window with `window.innerWidth` and `window.innerHeight`.

AI-generated description

An example starting point for working with Vega-Lite-API

MIT Licensed

Similar vizzes

Loading thumbnail…

Vega-lite - template

This example uses Vega-Lite to render an area chart with yearly time on the x-axis and a non-zero-based quantitative total on the y-axis, with tooltips showing temperature values. The visualization is built programmatically using the `vega-lite-api` library, which registers Vega and Vega-Lite to produce an SVG. Data is loaded asynchronously from a remote CSV file using `d3.csv`. The chart fills the window and applies custom axis and label styling from a config object, with tooltips provided by the `vega-tooltip` Handler.

HHgeginat

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

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

82% match

Loading thumbnail…

Vega-Lite API Template I

This example shows a bar chart of population by country, with bars colored by religion and tooltips displaying population values on hover. Using the Vega-Lite API, it constructs a specification via `vl.markBar`, `vl.x`, `vl.y`, and `vl.color` encodings, then renders it through `vl.register` with Vega 5 and Vega-Lite 4. The data is loaded asynchronously via `d3.csv` from a GitHub-hosted CSV. Appearance is customized through a shared configuration object that adjusts axis and label styling.

FFloorNummer

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

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

80% match

Loading thumbnail…

Vega-Lite API Template

This example presents a stacked bar chart of population by country, with each bar segmented by religion, using data from a CSV file. It is built with the Vega-Lite API, which composes the visualization declaratively through methods like `markBar`, `x().fieldN`, and `y().fieldQ`. The chart renders in SVG via vega, vega-lite, and vega-lite-api, with tooltips enabled through vega-tooltip. Custom axis and label styling are applied from a separate `config.js` module.

Pprincit

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