Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Aug 8, 2021

Created on Jul 18, 2021

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.

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…

Fork of Vega-Lite API Template

This example demonstrates an interactive scatter plot exploring global religious demographics, with circle size encoding population and axes mapping country and religion. The visualization is built using the Vega-Lite API, which composes specifications through JavaScript method chaining, then renders via Vega’s SVG output with tooltips from vega-tooltip. Data loads asynchronously from a CSV (Auto MPG dataset, though the active code references religion and population) using d3.csv, while the vega-lite-api library registers with Vega and Vega-Lite to handle encoding, scaling, and configuration. Custom axis styling and font settings come from a separate config object.

AAbi360

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

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows the distribution of religious affiliations across countries, using circle size to encode population and axes for country and religion. Built with the Vega-Lite API, it registers Vega and Vega-Lite libraries, fetches CSV data via d3.csv, and renders an interactive SVG chart with tooltips. The visualization config customizes axis labels, tick colors, and font styles for improved readability. The chart auto-sizes to the window and fits its content with padding.

IIverefiner

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

93% match

Loading thumbnail…

Fork of Fork of Vega-Lite API Template

This visualization uses the Vega-Lite API to render a circle-mark scatter plot of religious affiliations across countries, with circle size encoding population and tooltips revealing exact values. The data comes from the UCI Machine Learning Repository’s Auto MPG dataset, though the actual CSV loaded through d3.csv is a top-5 religions per country dataset. The code registers Vega-Lite with Vega, applies a custom dark theme via the config object, and renders the chart as an SVG that fits the full window. The visualization is interactive, with tooltips handled through vega-tooltip.

MMd. Jakir Hosen

92% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a bubble chart comparing religious affiliations across countries, using circle size to encode population and axes for country and religion. Built with the Vega-Lite API, it registers Vega and Vega-Lite libraries with D3’s CSV loader to fetch data from a GitHub gist. The visualization automatically fills the browser viewport, applies custom axis styling from a config object, and includes a Vega-Tooltip handler for interactive population details on hover.

LLento Manickathan

92% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a bubble chart of religious populations by country, with circles sized by population and positioned along country and religion axes. It uses the Vega-Lite API (vl) to construct the visualization declaratively, with d3.csv loading data from a GitHub Gist of top five religions per country. The chart renders via Vega’s SVG renderer, incorporates custom axis and label styling from a config object, and enables tooltips through vega-tooltip. The view is sized to fit the window and updates automatically on resize.

Wwindwaver

91% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays the religious demographics of countries, with circles sized to represent population counts across religious affiliations. The chart plots countries on the x-axis and religions on the y-axis, using circle size as an encoding channel for quantitative population data. The example is built with the Vega-Lite API, which compiles specifications to Vega for rendering in SVG. Data is loaded asynchronously from a CSV file via `d3.csv`, and the visualization is configured for full-window display with custom axis styling and tooltip support via the Vega-Tooltip handler.

11tang

91% match