Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Mar 8, 2022

Created on Mar 8, 2022

This example visualizes the religious demographics of countries using a Vega-Lite API specification, encoding country and religion on the axes with point size mapped to population. The visualization uses a line mark to display the data, which is loaded from a CSV file via d3.csv, and renders as an SVG through the integrated Vega, Vega-Lite, and Vega-Lite API libraries. A custom configuration adjusts axis styling and tooltip appearance for readability, with the visualization fitting to the full window dimensions.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

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

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes religious demographics across countries using a bar chart, with each bar representing a country and the color encoding the population for each religion. The visualization is built using the Vega-Lite API and rendered with D3.js, incorporating vega-tooltip for interactive hover details. Data is loaded from a CSV file hosted on GitHub, containing population figures for various religions by country. The chart fills the entire window and uses custom styling to adjust font sizes and axis appearance for readability.

DDipak654

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

92% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes global religious affiliations by country using a bubble chart, where bubble size encodes population and axes map countries against religions. Built with the Vega-Lite API, it registers Vega, Vega-Lite, and Vega-Tooltip to render an interactive SVG view. The visualization loads CSV data from a Gist via D3’s `csv` function, configures axis and label styling, and auto-sizes to the window. A tooltip handler displays population values on hover, while the circle marks are encoded with categorical fields for country and religion.

Wwhiteswallow87

92% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes religious affiliation by country as a heatmap, with one axis for countries, the other for religions, and cell color intensity encoding the population share. The visualization is built with Vega-Lite’s JavaScript API, which registers Vega and Vega-Lite libraries to render an SVG bar mark. It imports data from a CSV file of 2015 global populations, fetched via d3.csv. The chart resizes to fit the window and includes a tooltip showing the population value for each cell.

RRyan Murry

92% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the religious composition of countries using a bubble chart, where each bubble represents the population of a religion within a country. The visualization is built with the Vega-Lite API and rendered using D3.js, with data sourced from a CSV file containing religion-by-country statistics. The chart maps country names to the x-axis, religions to the y-axis, and population to bubble size, while tooltips display the exact population values on hover. The code leverages Vega-Lite's declarative API to encode these fields, and the chart resizes to fit the browser window using the autosize feature.

11godfrey

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

92% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization shows the distribution of religious populations across countries using a bubble chart, with circle size encoding population quantity and tooltips revealing exact values. The chart is built with the Vega-Lite API, which wraps Vega and Vega-Lite to generate an SVG rendering. The code imports data from a CSV file using D3's `csv` function, then configures axes, tooltips, and a dark color scheme for readability. The visualization occupies the full viewport and updates its size dynamically based on the window dimensions.

Aafcchilders

91% match