Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Fork of Episode 18 - Iterating Fast with Vega Lite API - Stacked Bar

✓ Published0🌍 Public
Zzjulijie0618
Last edited Jan 16, 2022
Created on Jan 16, 2022

This stacked bar chart visualizes the distribution of religions across countries, using population to encode the share of each religious group. The visualization is built with the Vega-Lite API, registered with Vega and Vega-Lite, and relies on d3.csv for data loading from a Gist containing the religionByCountryTop5 dataset. The bars are sorted by country in descending order, with color mapping population values and tooltips displaying the exact population figures. The chart fits the full browser window via an autosize setting and applies a custom configuration for axis styling and label font sizes.

AI-generated description

A visualization constructed using the vega-lite-api.

The data shown here comes from the UCI Machine Learning Repository: Auto MPG Data Set, via Gist: Scatter Plot with Menus.

MIT Licensed

Similar vizzes

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

Fork of Vega-Lite API Template

A stacked bar chart displays the distribution of religious affiliations across countries, using a dataset of the top 20 countries by religious population. The visualization is built with the Vega-Lite API, which constructs a specification rendered by Vega, and incorporates D3 for data loading. The chart encodes country on the x-axis, population on the y-axis, and religion as color, with tooltips showing religion details. The design is customized via a config object for axis and label styling, and the visualization fills the browser window.

JJoachim Klug
90% match
Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays a stacked bar chart of population by country, segmented by religion, using data from the UCI Machine Learning Repository. It is built with the Vega-Lite API, which registers Vega and Vega-Lite, and renders via d3.js v5. The chart encodes the country field as the x-axis, population as the y-axis, and religion as the color channel. A custom config styles the axes and labels, while a tooltip handler provides interactive population details. The visualization is sized to fit the browser window.

DDanny Pule
90% match
Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays a stacked bar chart of population by country, segmented by religion, with tooltips showing religious affiliation. It is built using the Vega-Lite API, registered with Vega and Vega-Lite libraries, and rendered as SVG. The code loads data from a CSV file via `d3.csv`, which contains the top five religions by country. The chart resizes to fit the window, uses custom axis and label styling for readability, and includes a Vega Tooltip handler for interactive data exploration.

Iiamhassanrazaahr
90% 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
90% 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
89% 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
89% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes religious demographics across countries using a bar chart, with each bar representing a country and the color encoding the population for each religion. The visualization is built using the Vega-Lite API and rendered with D3.js, incorporating vega-tooltip for interactive hover details. Data is loaded from a CSV file hosted on GitHub, containing population figures for various religions by country. The chart fills the entire window and uses custom styling to adjust font sizes and axis appearance for readability.

DDipak654
89% match