Skip to main content
SimilarExport ZIP
100%

Vega-Lite API Template

✓ Published0🌍 Public
WWaseem Medhat
Last edited Oct 17, 2020
Created on Oct 17, 2020

This example presents a bubble chart of global religious populations by country, using the Vega-Lite API to construct the visualization declaratively. The code loads CSV data from a GitHub gist and maps country and religion to axes, with circle size encoding population. It demonstrates the Vega-Lite API’s integration with D3’s CSV parser and Vega Tooltip for interactivity, rendered as SVG with custom axis styling.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

Vega-Lite API Template

This example visualizes the world’s most populous religions by country using a bubble chart, where each circle’s size encodes the population count. Hovering reveals the exact population via tooltips. Built with the Vega-Lite API, it registers Vega and Vega-Lite, fetches CSV data from a GitHub gist using D3’s `csv` method, and applies custom axis and font styling from a separate config module. The chart fills the browser window and renders as SVG.

Jjiro2017
95% match
Loading thumbnail…

Vega-Lite API

This example uses the Vega-Lite API to render a bubble chart of religious demographics by country, showing the relative population sizes of the top five religions per nation. The visualization encodes country on the x-axis, religion on the y-axis, and population as the size of each circle, with tooltips displaying the exact population values. The code loads CSV data from a remote URL using d3.csv, then constructs the chart through the Vega-Lite API’s markCircle and encode methods. It integrates Vega, Vega-Lite, and the vega-tooltip handler, with appearance customized via a config object that adjusts axis labels and title fonts.

Ee-ines
94% 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
94% match
Loading thumbnail…

Vega-Lite API Template - bubble chart

A bubble chart displays the population of five religions across multiple countries, with circle size encoding population values and axes categorizing by country and religion. Built with the Vega-Lite API, it registers Vega and Vega-Lite, loads CSV data via d3.csv, and renders an SVG view with tooltips from vega-tooltip. Configuration customizes axis fonts and tick colors for readability, while the chart auto-fits to the browser window.

Llaplantalaplanta
93% match
Loading thumbnail…

Vega-Lite API Template

This example demonstrates a Vega-Lite API template that renders an interactive bubble chart showing the population of religious groups by country. The visualization uses circular marks whose size encodes population values, with country on the x-axis and religion on the y-axis, and displays tooltips when hovering over marks. The code loads CSV data from a GitHub gist, applies custom axis and label styling through a config object, and renders the chart using the Vega-Lite API integrated with Vea, Vega-Lite, and the Vega Tooltip handler. The chart automatically fits to the browser window dimensions.

Jjanneprice
93% 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
93% match
Loading thumbnail…

Vega-Lite API Template

This interactive visualization uses the Vega-Lite API to render a circular bubble chart, mapping religion by country with circle size encoding population. The chart reads data from a CSV containing religionByCountryTop5, loading it via d3.csv, and encodes country on the x-axis and religion on the y-axis. Tooltips show population on hover. The vega-lite-api library interfaces with Vega and Vega-Lite, applying a custom config for dark text and styled axis labels, and renders to SVG using d3.v5 for data fetching.

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