Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Aug 24, 2021

Created on Aug 24, 2021

This example visualizes the world’s top five religions per country using a bubble chart, where circle size encodes population and axes map country and religion. Built with the Vega-Lite API, it loads CSV data via d3.csv, configures axes and tooltips through a custom config object, and renders as an SVG using Vega and Vega-Lite’s runtime. The visualization adapts to the viewport with autosize and includes an interactive tooltip handler from vega-tooltip.

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

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the distribution of the world’s top five religions across countries using a bubble chart, where each circle’s size represents population. The visualization is built with Vega-Lite’s API, leveraging `vl.markCircle` for the marks and encoding position by country and religion, with `vl.size().fieldQ('population')` for scaling. Data is loaded asynchronously via `d3.csv` from a GitHub-hosted CSV file, and the chart is rendered to SVG through `vega` and `vega-lite` with a custom tooltip from `vega-tooltip`. A custom `config.js` adjusts font sizes and colors for readability.

Mmikekslv

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

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization uses the Vega-Lite API with D3 to render a bubble chart showing the top five religions by country. It plots countries on the x-axis and religions on the y-axis, with circle size encoding population on a logarithmic scale. The chart is built with `vl.markCircle` and encodes fields via `vl.x().fieldN()`, `vl.y().fieldN()`, and `vl.size().fieldQ()`. Data is loaded asynchronously from a CSV using D3’s `csv` function, and the visualization is configured with custom axis and label styling from a config object.

KK3zter

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the top five religions by country, displaying a grouped bar chart where each bar’s height encodes population and color encodes religion, with tooltips showing exact population values. The visualization is built using the Vega-Lite API, which registers Vega and Vega-Lite for rendering, and loads CSV data via `d3.csv` from a GitHub gist. The chart uses a dark-themed configuration to improve readability, with custom axis and label styling. Rendering is handled by Vega’s SVG renderer, and interactivity is provided through Vega Tooltip.

AAlexalim28

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the top five religions by country as a stacked bar chart, showing the population distribution for each country. The chart uses a bar mark for each country, with the x-axis ordered by total population and color encoding for religion, while tooltips display the exact population values. It loads CSV data from a GitHub Gist and renders via Vega-Lite, using the Vega-Lite API to construct the specification, with D3.js fetching the data and Vega-Tooltip providing interactive hover details. The visualization is configured to fit the browser window and includes custom axis and label styling for readability.

Llatifiss

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

92% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the top five religions by country using a stacked bar chart, with bars sorted by total population and colored by religious affiliation. The visualization is built with the Vega-Lite API, which programmatically constructs a bar mark with x, y, color, and tooltip encodings from CSV data loaded via d3.csv. The chart auto-sizes to the browser window and applies custom axis and label styling from a configuration object. Vega tooltips display temperature values on hover, though the underlying dataset contains population and religion fields.

Vvangenned

92% match