Skip to main content
SimilarExport ZIP
100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public
PPascal Mausch
Last edited May 25, 2022
Created on May 24, 2022

A fork of the Vega-Lite API template displays renewable electricity percentages by country as a bar chart. The visualization, built with the d3.js and Vega-Lite API libraries, queries a CSV dataset from GitHub and transforms the data by stripping percentage symbols. The chart renders bars with hover tooltips, using a custom dark theme for improved readability, and automatically fits to the browser window size via the autosize configuration.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization presents a horizontal bar chart of population by country, with bars colored by religion and sorted in descending order. Built with the Vega-Lite API, it registers Vega and Vega-Lite alongside a tooltip handler via vega-tooltip, rendering as SVG through D3 v5. Data loads from a CSV of population and religion statistics using d3.csv, with axis and label styling customized in a separate config module.

Ttomahawk-jupiter
85% match
Loading thumbnail…

Fork of Vega-Lite API Template

This fork of a Vega-Lite API template displays a bar chart of fire counts by type, using data loaded from a CSV file via D3’s `csv` method. The visualization is built with the Vega-Lite API, registering Vega and Vega-Lite libraries, and renders to SVG with a custom dark theme and tooltip support from Vega-Tooltip. The chart fills the browser window and logs the first data row to the console for inspection, though the specific dataset source is the UCI Auto MPG repository.

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

Fork of Vega-Lite API Template

This visualization shows a bar chart of temperature readings over time, using a small multiple of vertical bars to represent each data point. The chart is built with the Vega-Lite API, which is registered alongside Vega, Vega-Lite, and Vega-Tooltip. The visualization loads CSV data from a GitHub gist using `d3.csv` via the `getData` function, and applies a custom config object to style axes and labels. Bars are rendered with a fixed size of 5 pixels, and tooltips display the temperature value on hover.

Ddjfeld01
83% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a bar chart of population by country, colored by religion, with a tooltip showing temperature on hover. The visualization is built using the Vega-Lite API, which wraps Vega and Vega-Lite specifications, and renders to SVG. Data is loaded asynchronously from a CSV file via D3’s `csv` function, sourced from the auto-mpg dataset. The chart is configured with custom axis and label styling, and fills the full viewport using automatic resizing.

AasafJortilles
82% match
Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays trade data as a bar chart, showing trade values by reporting country and mode of transport, with tooltips revealing partner countries. The visualization is built using Vega-Lite API, which compiles to Vega and renders as SVG, with D3.js handling data loading from a CSV file sourced from the UCI Machine Learning Repository. The chart is configured with custom axis styling and dark label colors for readability, and it resizes to fit the browser window.

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

Fork of Vega-Lite API Template to tinker with

This example shows a bar chart of population by country, with bars colored by religion and a tooltip displaying population values on hover. It loads data from a CSV file hosted in a GitHub gist, then renders the visualization using the Vega-Lite API (vl) with a concise specification: markBar encoding country on the x-axis (sorted descending by population), population on the y-axis, and religion as color. The code imports vega, vega-lite, vega-lite-api, d3.csv for data loading, and vega-tooltip for interactive tooltips, with custom axis and label styling configured in a separate config.js file. The visualization dynamically sizes to the full window and uses an SVG renderer.

RRyan Johnson
82% match