Vega-Lite API Template

100%

Vega-Lite API Template

✓ Published0🌍 Public

Last edited May 24, 2021

Created on May 23, 2021

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.

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 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.

UUnknown-bot-sus

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

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

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

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…

Vega-Lite API Template Blue

This example uses the Vega-Lite API to render a bubble plot of religious affiliation by country, with circle size encoding population. The chart aggregates data from a CSV file of top-five religions per country, sorting countries by total population along the x-axis. Built with the `vega-lite-api` library, it registers Vega and Vega-Lite, configures a dark custom theme, and renders a full-screen SVG with tooltips. The code loads data using d3.csv and applies a circular mark with field-based encodings for position and size.

Mmaxthamt

93% match

Loading thumbnail…

Vega-Lite API Template

This example displays a bubble chart of religious populations by country, with circle size encoding population and axes for country and religion. It uses the Vega-Lite API to construct the visualization declaratively, with the `vl.markCircle()` and `vl.encode()` methods. The chart renders via the Vega rendering engine with SVG output, and data is loaded from a CSV file using D3's `d3.csv()`. The `autosize({ type: 'fit' })` setting makes the chart responsive to the window.

LLucyI

92% match