Vega-Lite API Template

100%

Vega-Lite API Template

✓ Published0🌍 Public

Last edited Apr 12, 2021

Created on Apr 12, 2021

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.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

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

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

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

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

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

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

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