Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Dec 16, 2021

Created on Dec 16, 2021

This visualization uses the Vega-Lite API with D3 to render a bubble chart showing the top five religions by country. It plots countries on the x-axis and religions on the y-axis, with circle size encoding population on a logarithmic scale. The chart is built with `vl.markCircle` and encodes fields via `vl.x().fieldN()`, `vl.y().fieldN()`, and `vl.size().fieldQ()`. Data is loaded asynchronously from a CSV using D3’s `csv` function, and the visualization is configured with custom axis and label styling from a config object.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the distribution of the world’s top five religions across countries using a bubble chart, where each circle’s size represents population. The visualization is built with Vega-Lite’s API, leveraging `vl.markCircle` for the marks and encoding position by country and religion, with `vl.size().fieldQ('population')` for scaling. Data is loaded asynchronously via `d3.csv` from a GitHub-hosted CSV file, and the chart is rendered to SVG through `vega` and `vega-lite` with a custom tooltip from `vega-tooltip`. A custom `config.js` adjusts font sizes and colors for readability.

Mmikekslv

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the world’s top five religions per country using a bubble chart, where circle size encodes population and axes map country and religion. Built with the Vega-Lite API, it loads CSV data via d3.csv, configures axes and tooltips through a custom config object, and renders as an SVG using Vega and Vega-Lite’s runtime. The visualization adapts to the viewport with autosize and includes an interactive tooltip handler from vega-tooltip.

LLisa Wagner

93% match

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

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays a bubble chart of religious populations by country, where each bubble’s size encodes the population value and its color distinguishes countries. The chart is built with Vega-Lite’s API (via `vega-lite-api`), using `markCircle` and encodings for x-axis country, y-axis religion, and quantitative size. Data is loaded asynchronously from a CSV using `d3.csv`, and the rendered SVG includes an interactive tooltip handler from `vega-tooltip`. The layout auto-fits the window dimensions.

MMatias Conde

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

91% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows the global distribution of religious populations across countries using a bubble chart, where each circle’s size encodes the population count and its position maps country and religion on the axes. The visualization is built with the Vega-Lite API, which registers Vega and Vega-Lite libraries, and it renders as an SVG via the `vl.markCircle` and `vl.encode` functions. Data is loaded asynchronously from a CSV using D3’s `csv` method, and a custom config object adjusts axis styling and font sizes for readability.

AAlexander Dorling

91% match

Loading thumbnail…

Fork of Vega-Lite API Template

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.

11godfrey

91% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays the population of religions by country using a bubble chart. The data, sourced from a CSV file, is rendered with circles positioned by country and religion, with circle size encoding population. Built with the vega-lite-api, it registers Vega and Vega-Lite, and uses a custom configuration to improve label readability. The chart is rendered as an SVG and includes tooltips for detailed population values.

Nnexus1058

91% match