Testing Vega-Lite API

100%

Testing Vega-Lite API

✓ Published0🌍 Public

Last edited Mar 21, 2021

Created on Mar 20, 2021

This visualization uses the Vega-Lite API to render a circular mark plot of religious demographics by country. It encodes country on the x-axis, population on the y-axis, and religion as the size of each circle, with tooltips displaying population values on hover. The data is loaded asynchronously from a CSV file via d3.csv, and the visualization is configured with custom axis and label styling. The Vega-Lite API registers with Vega and Vega-Lite libraries, rendering to SVG with an automatic fit to the viewport dimensions.

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

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

90% match

Loading thumbnail…

Vega-Lite API Template

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.

Nnahsiloh

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

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

89% match

Loading thumbnail…

Vega-Lite API Template TESTFork

A bubble chart shows the population of various religious groups across countries, with circle size encoding population and position mapping country and religion. Built with the Vega-Lite API, the visualization loads CSV data from a gist URL and renders as a scalable SVG that fits the browser window. The example demonstrates the `vl.markCircle` method with encoded fields for country, religion, and population, styled through a custom config that adjusts axis and label appearance. It integrates Vega-Lite, Vega, and D3’s CSV loader for data ingestion.

PPaul B

89% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a circle-marked visualization of religious populations by country, with circle size encoding population and both axes using categorical fields. The chart is built using the Vega-Lite API, which programmatically constructs a Vega-Lite specification, and renders to an SVG via Vega. The underlying data is loaded from a CSV using d3.csv, and the visualization includes tooltips through the vega-tooltip Handler. The code applies custom axis and label styling, and sets the chart to fit the full browser window.

Ccynichole

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

89% match