Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Mar 5, 2023

Created on Mar 5, 2023

This example visualizes the religious composition of countries using a bubble chart, where each bubble represents the population of a religion within a country. The visualization is built with the Vega-Lite API and rendered using D3.js, with data sourced from a CSV file containing religion-by-country statistics. The chart maps country names to the x-axis, religions to the y-axis, and population to bubble size, while tooltips display the exact population values on hover. The code leverages Vega-Lite's declarative API to encode these fields, and the chart resizes to fit the browser window using the autosize feature.

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 shows a bubble chart of religious populations by country, with circles sized by population and positioned along country and religion axes. It uses the Vega-Lite API (vl) to construct the visualization declaratively, with d3.csv loading data from a GitHub Gist of top five religions per country. The chart renders via Vega’s SVG renderer, incorporates custom axis and label styling from a config object, and enables tooltips through vega-tooltip. The view is sized to fit the window and updates automatically on resize.

Wwindwaver

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the global distribution of religious populations by country using a bubble chart. Circle size and tooltip values encode population counts, with countries ordered by total population on the x-axis and religions on the y-axis. The visualization is built with the Vega-Lite API, which programmatically constructs the chart specification, and renders it via the Vega and Vega-Lite libraries. Data is loaded as CSV from a remote gist using D3’s `csv` function, and custom axis styling improves readability.

BBHAVYA0042

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to create a bubble chart that visualizes religious affiliation by country. The visualization maps country to the x-axis, population to both the y-axis and circle size, and religion to color, with tooltips showing exact population values. Built with vega-lite-api, the chart loads CSV data via d3.csv and renders with the Vega and Vega-Lite libraries. The code registers vega-tooltip for interactive hover details and applies a custom configuration for improved readability and styling.

Bbangberga

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the distribution of religious affiliation by country using a bubble chart. Each circle represents a country’s population grouped by religion, with circle size encoding population magnitude. The visualization is built with the Vega-Lite API, registered through Vega and Vega-Lite, and renders using SVG. Data comes from the UCI Machine Learning Repository’s Auto MPG dataset, though the code loads religion and population data via a CSV fetched with d3.csv. Custom axis styling and tooltips are configured through Vega-Lite’s config and the vega-tooltip handler.

Ddiska432

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization shows the distribution of religious populations across countries using a bubble chart, with circle size encoding population quantity and tooltips revealing exact values. The chart is built with the Vega-Lite API, which wraps Vega and Vega-Lite to generate an SVG rendering. The code imports data from a CSV file using D3's `csv` function, then configures axes, tooltips, and a dark color scheme for readability. The visualization occupies the full viewport and updates its size dynamically based on the window dimensions.

Aafcchilders

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes global religious affiliations by country using a bubble chart, where bubble size encodes population and axes map countries against religions. Built with the Vega-Lite API, it registers Vega, Vega-Lite, and Vega-Tooltip to render an interactive SVG view. The visualization loads CSV data from a Gist via D3’s `csv` function, configures axis and label styling, and auto-sizes to the window. A tooltip handler displays population values on hover, while the circle marks are encoded with categorical fields for country and religion.

Wwhiteswallow87

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relative proportions of religious affiliations across countries using a bubble chart, where each bubble’s size encodes population and its position maps country and religion. The visualization is built with the Vega-Lite API, using `vl.markCircle()`, `vl.x()`, `vl.y()`, and `vl.size()` to encode fields, while a tooltip displays population values. Data is loaded asynchronously via `d3.csv` from a remote URL, and the chart renders with d3.v5, Vega, Vega-Lite, and Vega-Tooltip, with custom styling applied through a config object.

Sshimos12468

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This bubble chart shows the global distribution of religious populations by country, with circle size encoding population count and axes arranged by country and religion. Built using the Vega-Lite API template, the visualization renders interactively via vega-lite-api, vega-lite, and vega, with tooltips provided by vega-tooltip. Data is loaded asynchronously from a CSV file using d3.csv, and appearance is customized through a config object that adjusts axis ticks and label styling. The chart is sized to fit the browser window using autosize and rendered as SVG.

Bboreilly26

94% match