Skip to main content
SimilarExport ZIP
100%

rishita Vega-Lite API Template

✓ Published0🌍 Public
Rrishyossarian
Last edited Jan 4, 2022
Created on Jan 2, 2022

This example shows the distribution of religious populations across countries using a circular scatter plot, with each point’s color mapped to a religion and its vertical position encoding population size. The visualization is built with the Vega-Lite API, which is registered alongside Vega, Vega-Lite, and D3.js. Data is loaded asynchronously via D3’s CSV module from a GitHub Gist sourced from the UCI Auto MPG dataset. The chart uses a custom configuration to style axes and labels, and Vega Tooltip provides interactive hover details.

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

Vega-Lite API

This visualization displays the distribution of world religions across countries, using circle size to represent population. Built with the Vega-Lite API, it maps country and religion categories along the axes with a single circular mark per data point. The example demonstrates the library’s fluent interface, registering Vega and Vega-Lite, and applying a dark config for labels and axes. Data is loaded via D3’s `csv` function from a Gist, and the chart auto-fits to the window size with interactive tooltips supplied by the Vega Tooltip handler.

JJoeleen Kado
87% match
Loading thumbnail…

Vega-Lite API Template - religion - circle

This example visualizes the world’s major religions by country using a circle plot, where each circle’s area encodes population size and its position maps country and religious affiliation. The visualization is built with the Vega-Lite API, registered within D3.js (v5), and renders as an SVG. It loads data from the UCI Machine Learning Repository via a CSV file, fetched with `d3.csv`. The chart’s appearance is customized through a Vega-Lite config, adjusting font sizes and axis styling for readability.

MMahesha999
87% 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
87% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example presents an interactive scatter plot built with the Vega-Lite API and D3.js, visualizing the distribution of different religions by country, with circle size encoding population. The visualization uses the vega-lite-api library to construct the chart, leveraging the d3.csv loader to fetch data on religion by country from a GitHub Gist. The interface is configured with custom axis styling and tooltip handlers, and is rendered to SVG, adapting its size to fit the browser window.

Nn.koldovsky@gmail.com
87% 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
87% match
Loading thumbnail…

Fork of Vega-Lite API Template

This visualization uses the Vega-Lite API with D3.js to render a scatter plot of global religious demographics, showing the population sizes of various religions by country. The chart applies circular marks with size encoding to represent population values, sorted by country on the x-axis, with tooltips revealing exact population figures. Data is loaded asynchronously from a UCI Machine Learning Repository CSV via `d3.csv`. The code customizes the visual style through a Vega-Lite configuration object, adjusting axis labels and title fonts, while the Vega tooltip handler provides interactive hover details.

Ttrissentety
87% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the distribution of religious affiliations across countries using a circular scatter plot, where each circle’s position encodes country and religion, and its size represents population. The visualization is built with the Vega-Lite API, which registers Vega and Vega-Lite libraries to generate an SVG renderer. Data is loaded asynchronously from a remote CSV via D3’s `csv` method, then passed to a `vl.markCircle()` encoding that maps fields to axes, size, and tooltips. The view is configured to fit the window dimensions, and a custom config adjusts axis styling and font sizes. The Vega Tooltip handler enables interactive hover details.

CCHOI SEUNG HYUN
87% match