Vega-Lite API Template

100%

Vega-Lite API Template

✓ Published0🌍 Public

Last edited Jan 14, 2022

Created on Jan 14, 2022

This example visualizes the religious composition of countries as a bubble chart, mapping population size to circle area, country to the x-axis, and religion to the y-axis. It loads data from the UCI Auto MPG dataset via a Gist, processed with d3.csv. The visualization is built using the Vega-Lite API, which registers Vega and Vega-Lite libraries, applies a custom configuration for readability, and renders interactive SVG output with a tooltip handler.

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…

Vega-Lite API Template

This example visualizes the relative population sizes of religious groups across countries using a bubble chart, where circle size encodes population and the axes list countries and religions. The visualization is built with the Vega-Lite API, which registers Vega and Vega-Lite libraries, and uses D3’s `csv` loader to fetch data from a Gist derived from the UCI Auto MPG dataset. It applies a custom dark-themed configuration for axes and labels, and renders as a responsive SVG that fits the window, with tooltips enabled through `vega-tooltip`.

BBen Seebeck

96% match

Loading thumbnail…

Vega-Lite API Template

This example uses the Vega-Lite API with D3 to render a bubble chart of religious populations by country, sourced from the UCI Auto MPG dataset via a Gist. The visualization encodes country on the x-axis (sorted by descending population), religion on the y-axis, and population size as the bubble area, with tooltips for exact values. Code loads data via `d3.csv`, configures axes and styles through a `config` object, and renders an SVG using `vl.markCircle` with `vl.encode`, all orchestrated through `vega-lite-api` and `vega-tooltip`.

SShuyu Zheng

94% match

Loading thumbnail…

Vega-Lite API Template

This example uses the Vega-Lite API to render a bubble chart of religious affiliations by country, based on data from the UCI Machine Learning Repository. The visualization maps country names to the x-axis, religion to the y-axis, and population to the size of each circle, with tooltips displaying exact population values. Built with the `vega-lite-api` library, it registers Vega and Vega-Lite, applies custom configuration for axis styling and label fonts, and loads data asynchronously via d3.csv. The chart fills the browser window using an autoresize fit setting.

LLicheng Zhang

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

93% match

Loading thumbnail…

Vega-Lite API Template

This visualization displays the population distribution of five countries across religions using a bubble chart. It is built with the vega-lite-api, which registers vega, vega-lite, and vega-tooltip to render the chart as SVG. The data is loaded asynchronously via d3.csv from a Gist URL, with each bubble’s size mapping to the population field. The chart fills the browser window and uses the vega-lite API’s markCircle method with encoded x and y fields for country and religion.

CCurran Kelleher

92% match

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

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

92% match

Loading thumbnail…

Vega-Lite API Template

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.

WWaseem Medhat

92% match