Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Dec 28, 2021

Created on Dec 28, 2021

This example displays a bubble chart comparing religious affiliations across countries, using circle size to encode population and axes for country and religion. Built with the Vega-Lite API, it registers Vega and Vega-Lite libraries with D3’s CSV loader to fetch data from a GitHub gist. The visualization automatically fills the browser viewport, applies custom axis styling from a config object, and includes a Vega-Tooltip handler for interactive population details on hover.

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 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 uses the Vega-Lite API to create a bubble chart showing the population of each religion across countries, with circular marks sized by population and colored by country. The visualization loads CSV data from a GitHub gist, renders with SVG via Vega, and includes tooltips for inspecting values. The code configures axes, labels, and styling for readability, while the chart automatically fits the window dimensions. It leverages D3 for data fetching, Vega for rendering, and Vega-Lite’s declarative encoding for marks and scales.

Jjbruzzo

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 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 shows a bubble chart of religious demographics by country, using circle size to encode population and color to distinguish religions. The visualization is built with the Vega-Lite API, which is registered with Vega and Vega-Lite libraries, then rendered as an SVG canvas. Data is loaded from a CSV file containing religion statistics by country, fetched via d3.csv. The chart is configured with custom axis styling and tooltip handlers from vega-tooltip, and it dynamically fits its dimensions to the browser window size.

CCaro Arriaga

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization uses the Vega-Lite API to render a bubble chart of religious affiliation by country, with data sourced from the UCI Machine Learning Repository. Circles are positioned by country and religion, while population values determine circle size, and tooltips display exact population counts on hover. The code integrates vega-lite-api, Vega, Vega-Lite, D3’s CSV loader, and vega-tooltip, applying a custom dark-axis style via a config object. The chart auto-sizes to fit the browser window and uses SVG rendering.

PPiotr Paszek

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relative populations of religious groups across countries using a bubble chart. Circles are positioned along categorical axes for country and religion, with circle size encoding population magnitude. The visualization is built using the Vega-Lite API, which compiles specifications to Vega and renders with SVG via D3. Data is loaded asynchronously using D3’s `csv` function from a gist. Custom axis styling and a dark label color improve readability, and a tooltip displays the population value when hovering over a circle.

Ccoltonjcox92

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

94% match