Skip to main content
SimilarExport ZIP
100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public
AasafJortilles
Last edited Mar 23, 2023
Created on Mar 23, 2023

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.

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 shows a bar chart of population by country, with bars colored by religion and tooltips displaying population values on hover. The visualization is built using the Vega-Lite API, which registers Vega and Vega-Lite libraries and uses a custom configuration to adjust axis and label styling for readability. Data is loaded asynchronously from a CSV file via `d3.csv`, and the chart is rendered as SVG with an autosized fit to the window. The code also integrates the Vega Tooltip handler for interactive hover details.

GGerasimos Katsagannis
97% match
Loading thumbnail…

Fork of Vega-Lite API Template4

This visualization displays a bar chart of population by country, with bars colored by religion and tooltips showing population values on hover. The data comes from the UCI Auto MPG dataset via a Gist, though the shown attributes reference country and religion. Built with Vega-Lite API, it registers Vega and Vega-Lite libraries, loads CSV data using d3.csv, and renders the chart as SVG with custom axis and label styling from a config object. The visualization auto-fits to the window size and includes a Vega Tooltip handler for interactive detail viewing.

AArookie-2020
95% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example presents a bar chart of population by country, with bars colored by religion, using the Vega-Lite API. It loads CSV data from a GitHub gist via D3’s `csv` function. The chart is rendered with Vega-Lite’s `markBar` encoding x by country, y by population, and color by religion. The visualization is built with `vega-lite-api` and rendered to SVG through Vega, with tooltips provided by `vega-tooltip`.

KKNJour
94% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a bar chart of population by country, with bars segmented by religion. The visualization uses the Vega-Lite API to construct the chart, and the Vega and Vega-Lite libraries to render it as an SVG. The data is loaded from a CSV file using d3.csv. The bars are sorted by population in descending order, and tooltips show the population value for each segment. Chart appearance is customized through a configuration object.

DDusty
94% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a bar chart of population by country, with each bar divided into colored segments representing different religions. The visualization uses the Vega-Lite API to construct the chart, with data loaded from a CSV file containing religion and population statistics. The code registers Vega and Vega-Lite, and configures tooltips using the Vega-Tooltip handler. The chart is rendered as an SVG and automatically fits the window size. The bars are sorted by population in descending order, and a tooltip displays temperature data on hover.

HHoang Dang Khanh
94% match
Loading thumbnail…

Fork of Vega-Lite API Template Origin

This visualization displays a bar chart of population by country, with colors encoding religion and tooltips revealing population values on hover. It uses the Vega-Lite API to construct the chart, with getData.js loading CSV data from a gist containing religion-by-country statistics. The code leverages vega-lite-api's `markBar`, `x()`, `y()`, `color()`, and `tooltip()` methods, registered with vega and vega-lite, and renders via the SVG view with a vega-tooltip handler. The config customizes axis ticks and font styles for readability.

Ddleoenri
94% 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
94% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example demonstrates a bar chart of population by country, colored by religion, using the Vega-Lite API. The visualization sorts countries by descending population and includes tooltips for each bar’s population value. It loads CSV data from a GitHub gist via `d3.csv` and renders the chart as an SVG using Vega-Lite’s `markBar` encoding, with custom axis and label styling from a shared config. The code registers Vega-Lite and Vega-Tooltip handlers to enable interactive tooltips.

Ccheruvatheryvishnu@gmail.com
93% match