Skip to main content
SimilarExport ZIP
100%

Vega-Lite API Template Stacked Bars

✓ Published0🌍 Public
MMilena Belianovich Holtman
Last edited Oct 12, 2022
Created on Oct 12, 2022

This stacked bar chart displays the top 5 religions by population for each country, using color to encode religion and bar length to encode population. The visualization is built with the Vega-Lite API, which constructs a specification programmatically using methods like `markBar()` and `encode()`. Data is loaded from a CSV file via `d3.csv`, and the chart is rendered to SVG through Vega, with custom configuration for axis styling and tooltips provided by `vega-tooltip`.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

Vega-Lite API Religeon by Country Top 5 Stacked Bar Chart

This stacked bar chart displays the top five countries by population, broken down by religious affiliation, using data from a CSV file of global religion statistics. Each bar is segmented by religion with a color encoding and interactive tooltips showing population values. The visualization is built with the Vega-Lite API, which registers Vega and Vega-Lite libraries, and renders SVG output. Data loading uses the `csv` function from d3, while the chart configuration and encoding are defined through the `vl` API methods like `markBar`, `encode`, and `config`.

NNelson M
94% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the top five religions by country using a stacked bar chart, with bars sorted by total population and colored by religious affiliation. The visualization is built with the Vega-Lite API, which programmatically constructs a bar mark with x, y, color, and tooltip encodings from CSV data loaded via d3.csv. The chart auto-sizes to the browser window and applies custom axis and label styling from a configuration object. Vega tooltips display temperature values on hover, though the underlying dataset contains population and religion fields.

Vvangenned
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…

Fork of Vega-Lite API Template

This example visualizes the top five religions by country as a stacked bar chart, with each bar segment colored by religion and sized by population. The chart displays country names along the x-axis and population counts on the y-axis, with tooltips showing exact values. It uses the vega-lite-api to construct the visualization, while vega and vega-lite handle rendering and encoding, and d3.csv loads data from a remote CSV file. The configuration customizes axis labels, title fonts, and uses a dark color scheme for improved readability.

SShanoy
93% match
Loading thumbnail…

Vega-Lite API Template

This example visualizes the top five religious affiliations by population for each country, using a bar chart where bars are colored by religion and sorted by total population. Built with the Vega-Lite API, it composes a specification programmatically via `vl.markBar()`, `encode()`, and field accessors, then renders it to SVG through Vega-Lite and Vega. Data is loaded asynchronously from a CSV file using `d3.csv`, and the chart is configured with custom axis styles and tooltips via the `vega-tooltip` Handler.

Jjulesgentry
93% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the top five religions by country as a stacked bar chart, showing the population distribution for each country. The chart uses a bar mark for each country, with the x-axis ordered by total population and color encoding for religion, while tooltips display the exact population values. It loads CSV data from a GitHub Gist and renders via Vega-Lite, using the Vega-Lite API to construct the specification, with D3.js fetching the data and Vega-Tooltip providing interactive hover details. The visualization is configured to fit the browser window and includes custom axis and label styling for readability.

Llatifiss
93% 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
93% match
Loading thumbnail…

Fork of Vega-Lite API Template

A stacked bar chart shows the top five religions by country, with bar height encoding population and color encoding religion. Built with the Vega-Lite API, the example renders using Vega, Vega-Lite, and D3.js for data loading. The visualization loads CSV data from a GitHub gist, applies a dark theme with custom axis and label styling, and includes tooltips for each bar segment. It fits the chart to the full browser window using an autosize configuration.

Ssaraenneshelena
92% match