Vega-Lite API

100%

Vega-Lite API - sankey diagram

✓ Published0🌍 Public

Last edited May 15, 2023

Created on May 15, 2023

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.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

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

93% 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

92% match

Loading thumbnail…

Vega-Lite API Template

This example presents a stacked bar chart of population by country, with each bar segmented by religion, using data from a CSV file. It is built with the Vega-Lite API, which composes the visualization declaratively through methods like `markBar`, `x().fieldN`, and `y().fieldQ`. The chart renders in SVG via vega, vega-lite, and vega-lite-api, with tooltips enabled through vega-tooltip. Custom axis and label styling are applied from a separate `config.js` module.

Pprincit

92% match

Loading thumbnail…

Vega-Lite API Template Stacked Bars

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`.

MMilena Belianovich Holtman

92% 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

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

91% match