Vega-Lite API Template

100%

Vega-Lite API Template

✓ Published0🌍 Public

Last edited Nov 17, 2021

Created on Nov 17, 2021

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.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

Vega-Lite API Template

A bubble chart displays the population of each religion across countries, with circle size encoding population and color distinguishing religions. Built with the Vega-Lite API, the visualization uses `vl.markCircle` and encodings for `x` (country), `y` (religion), `size`, and `tooltip`. Data is loaded via D3’s `csv` from a GitHub gist, and the chart renders through Vega and Vega-Lite with a custom config for styling.

MMosheAron

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

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

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

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

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

92% match