Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited May 17, 2022

Created on May 17, 2022

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.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

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

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows the global distribution of religious populations across countries using a bubble chart, where each circle’s size encodes the population count and its position maps country and religion on the axes. The visualization is built with the Vega-Lite API, which registers Vega and Vega-Lite libraries, and it renders as an SVG via the `vl.markCircle` and `vl.encode` functions. Data is loaded asynchronously from a CSV using D3’s `csv` method, and a custom config object adjusts axis styling and font sizes for readability.

AAlexander Dorling

93% match

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

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

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

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

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

92% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relative proportions of religious affiliations across countries using a bubble chart, where each bubble’s size encodes population and its position maps country and religion. The visualization is built with the Vega-Lite API, using `vl.markCircle()`, `vl.x()`, `vl.y()`, and `vl.size()` to encode fields, while a tooltip displays population values. Data is loaded asynchronously via `d3.csv` from a remote URL, and the chart renders with d3.v5, Vega, Vega-Lite, and Vega-Tooltip, with custom styling applied through a config object.

Sshimos12468

92% match