Skip to main content
SimilarExport ZIP
100%

Vega-Lite API Template - Stacked Bar Chart

✓ Published0🌍 Public
Nnkohdatavis
Last edited Jul 25, 2020
Created on Jul 25, 2020
Forked from Hello VizHub

This stacked bar chart visualizes the distribution of religious affiliations across countries, using circle area to encode population size for each country-religion pair. The visualization is built with the Vega-Lite API, which registers Vega and Vega-Lite libraries to generate an SVG rendering. Data is loaded asynchronously from a CSV file via d3.csv, and the chart includes interactive tooltips handled through the vega-tooltip library. The visualization employs custom configuration for axis styling and font sizing, with automatic resizing to fit the viewport dimensions.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

Vega-Lite Stacked Bar Chart

This example visualizes the distribution of religious affiliations across countries using a stacked bar chart. Each bar represents a country, segmented by religion, with segment size encoding population. Built with the Vega-Lite API in conjunction with D3.js, the chart loads CSV data from a Gist derived from the UCI Auto MPG dataset, though the visualization itself uses religion-by-country data. The code configures axes, tooltips, and an SVG renderer, with Vega Tooltip handling interactive hover details.

KKevin McMorrow
95% match
Loading thumbnail…

Vega-Lite API Stacked Bar Chart Template

This stacked bar chart reveals the distribution of religious affiliations by country, with each bar sorted by total population and segmented by religion. The visualization is generated using the Vega-Lite API, which constructs a declarative specification for the mark `markBar` and encodings for x, y, color, and tooltip. It relies on Vega-Lite’s `vl` API, registers with Vega and Vega-Lite libraries, and fetches CSV data from a Gist. The chart uses custom configuration for axis styling and renders with an SVG view.

JJohn Kobbeman
95% match
Loading thumbnail…

Vega-Lite API Template_Stacked Bars

A stacked bar chart visualizes the distribution of population by religion across countries, ranking countries by total population on the x-axis. Built with the Vega-Lite API, it registers vega, vega-lite, and vega-tooltip, using `vl.markBar` with encodings for country, population, and religion color. The data is loaded via D3's `csv` from a GitHub Gist containing UCI Machine Learning Repository Auto MPG data, though the visualization actually uses religion-by-country data. The chart renders as an SVG, fitting the window size with custom axis styling from a separate config file.

OOleg Zhernovoy
94% match
Loading thumbnail…

Vega-Lite API Religion Stacked Bar Chart

This example presents a stacked bar chart visualizing the population of each country segmented by religion, using data from a CSV file about religion by country. The chart sorts countries by total population in descending order, with each bar colored by religion and tooltips revealing the specific religious group. Built with the Vega-Lite API, the code registers vega and vega-lite, then uses `vl.markBar()` to encode the x-axis as country, y-axis as population, and color as religion. The visualization loads data via `d3.csv` and renders as SVG, with customizable axes and labels from the configuration file.

LLem Dulfo
94% match
Loading thumbnail…

Vega-Lite Stacked Bar Chart

This stacked bar chart displays the population distribution of five major religions across different countries, using horizontal bars where each segment’s length represents population size and color encodes religious affiliation. Built with the Vega-Lite API on top of Vega and Vega-Lite, the visualization fetches data from a CSV file via `d3.csv` and renders interactively as an SVG, with tooltips enabled through Vega-Tooltip. The chart applies custom configuration for axis styling and font sizes, and sorts countries by total population, with bar size and opacity fixed at 100 and 1 respectively.

Bbakstorage00001
94% match
Loading thumbnail…

Vega-Lite API

This example demonstrates a stacked bar chart of country populations by religion, using the Vega-Lite API to construct the visualization declaratively. It fetches data from a CSV file via d3.csv, then renders the chart as SVG with vega and vega-lite, customizing axis and label styles through a config object. The bars are encoded with country on the x-axis, population on the y-axis, and religion determining color, with tooltips showing population values. The chart auto-fits to the browser window size.

Kkatjur01
93% match
Loading thumbnail…

Vega-Lite API Template

This example shows a stacked bar chart of population by country, with bars colored by religion. The visualization is built using the Vega-Lite API, a JavaScript wrapper for Vega-Lite, and renders to SVG via Vega. Data is loaded from a CSV file using D3’s `csv` function, and the chart encodes country on the x-axis, population on the y-axis, and religion as color. Tooltips are enabled through Vega Tooltip, and the chart auto-fits to the window size.

MMadNietzsche
93% match
Loading thumbnail…

Vega-Lite API Template - stacked barchart

This example presents a stacked bar chart of population by religion across countries, using a dark-themed visualization to improve readability. The chart is built with the Vega-Lite API, which programmatically constructs the specification, while D3.js handles CSV data loading from a remote source. The visualization renders through Vega and Vega-Lite, with a tooltip handler for interactive population details. The chart resizes to fit the browser window, and the color encoding distinguishes religious affiliations.

Llaplantalaplanta
93% match