Skip to main content
SimilarExport ZIP
100%

Stacked Barchart Vega-Lite API Template

✓ Published0🌍 Public
Jjyotigpt790
Last edited Oct 26, 2020
Created on Oct 26, 2020

This stacked bar chart visualizes population distribution across countries by religion, using data from the UCI Machine Learning Repository’s Auto MPG dataset via a Gist. Built with the Vega-Lite API and D3.js (d3.v5), it encodes country on the x-axis, population on the y-axis, and religion as color, with tooltips showing population values. The visualization renders as an SVG, with custom font sizes and axis styling from a config file.

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. //ep18

MIT Licensed

Similar vizzes

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…

Vega-Lite API Template

This example demonstrates a stacked bar chart that visualizes population by country, colored by religion, using data from the UCI Auto MPG dataset via a Gist URL. The visualization is built with the Vega-Lite API, which registers Vega and Vega-Lite libraries to render SVG output. The code uses `vl.markBar()`, `vl.y()`, `vl.x()`, and `vl.color()` to define the chart’s encoding, while D3’s `csv` function fetches the data. An interactive tooltip is enabled through the Vega Tooltip handler, and the chart’s appearance is customized with configuration options for axis styling and font sizes.

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

Vega-Lite API Template

This visualization presents a stacked bar chart of top-country populations by religion, drawn from the UCI Machine Learning Repository’s Auto MPG dataset via a Gist. Built with the Vega-Lite API wrapper, it registers Vega and Vega-Lite libraries, using `vl.markBar`, `vl.x().fieldN('country').sort('-y')`, and `vl.y().fieldQ('population')` to encode positions. The `config.js` customizes axis and label styles, while `getData.js` loads CSV data via `d3.csv`. Interactive tooltips are enabled through the vega-tooltip `Handler`.

OOlowogoke Seun
92% match
Loading thumbnail…

Vega-Lite API Template - religion - stacked bar chart

This stacked bar chart visualizes the distribution of religious affiliations across countries, using data from the UCI Machine Learning Repository via a Gist. The chart is built with the Vega-Lite API, running on top of Vega, Vega-Lite, and D3, and renders as an SVG. Population values are encoded on the y-axis, countries on the x-axis sorted by total y-values, and religion mapped to color. The code includes a custom config for dark-axis styling and employs Vega Tooltip for interactive hover details.

MMahesha999
91% 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
91% 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
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