Skip to main content
SimilarExport ZIP
100%

satacke BarChart -barchart Vega-Lite API Template

✓ Published0🌍 Public
JJonas Carvalho
Last edited Apr 4, 2021
Created on Apr 4, 2021

This example uses the Vega-Lite API to create a stacked bar chart representing the population of the top five religions by country. It shows the distribution of adherents across nations, with country on the x-axis and religion on the y-axis, while circle size encodes population magnitude. The visualization is rendered as SVG via Vega and Vega-Lite, with data loaded asynchronously from a CSV file using d3.csv. Custom configuration and tooltips are applied to enhance readability, and the chart automatically fits the window dimensions.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

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

Vega-Lite API - sankey diagram

This example uses the Vega-Lite API to construct a stacked bar chart showing the population of different religions by country. The visualization reads CSV data from a remote URL, which contains the top five religions per country. It employs `markBar` with x- and y-encodings for country and population, color-encoding by religion, and a tooltip for population values. The code registers Vega, Vega-Lite, and Vega-Tooltip, rendering the chart as an SVG that fits the window size. A custom config adjusts axis and label styling for improved readability.

Kkatjur01
87% 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
87% 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
87% 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
87% match
Loading thumbnail…

Vega-Lite API Religion Bar Chart

This bar chart visualizes the population of five countries broken down by religion, using a stacked bar layout ordered by total population. The visualization is built programmatically through the Vega-Lite API, which registers Vega and Vega-Lite libraries and renders an SVG view with tooltips. Data is loaded via d3.csv from a Gist containing the UCI Auto MPG dataset, though the chart actually displays religion data from a separate CSV file. The chart uses Vega-Lite’s markBar encoding for x, y, color, and tooltip channels, with custom configuration for axis styling and font sizes.

RRaphael Fogha
87% 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
87% match
Loading thumbnail…

Stacked Bar Chart using Religion Data Using Vega-Lite API Template

This stacked bar chart visualizes the top five religions by country, with circle size encoding population and axes mapping country and religion. Using the Vega-Lite API template, the code registers Vega, Vega-Lite, and vega-tooltip, then fetches CSV data via d3.csv from a GitHub gist. The viz.js specification defines markCircle with fieldN and fieldQ encodings, while config.js customizes axis labels and titles for readability. The chart renders as an SVG that fits the viewport, with tooltips displaying population values.

JJason Tiller
87% match