Vega-Lite API Template

Vega-Lite API Template

This example presents a bubble chart of global religious populations by country, using the Vega-Lite API to construct the visualization declaratively. The code loads CSV data from a GitHub gist and maps country and religion to axes, with circle size encoding population. It demonstrates the Vega-Lite API’s integration with D3’s CSV parser and Vega Tooltip for interactivity, rendered as SVG with custom axis styling.

WWaseem Medhat

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to create a bubble chart showing the population of each religion across countries, with circular marks sized by population and colored by country. The visualization loads CSV data from a GitHub gist, renders with SVG via Vega, and includes tooltips for inspecting values. The code configures axes, labels, and styling for readability, while the chart automatically fits the window dimensions. It leverages D3 for data fetching, Vega for rendering, and Vega-Lite’s declarative encoding for marks and scales.

Jjbruzzo

Vega-Lite API Template

This example visualizes the relative population sizes of religious groups across countries using a bubble chart, where circle size encodes population and the axes list countries and religions. The visualization is built with the Vega-Lite API, which registers Vega and Vega-Lite libraries, and uses D3’s `csv` loader to fetch data from a Gist derived from the UCI Auto MPG dataset. It applies a custom dark-themed configuration for axes and labels, and renders as a responsive SVG that fits the window, with tooltips enabled through `vega-tooltip`.

BBen Seebeck

Vega-Lite API Template

This example visualizes the world’s most populous religions by country using a bubble chart, where each circle’s size encodes the population count. Hovering reveals the exact population via tooltips. Built with the Vega-Lite API, it registers Vega and Vega-Lite, fetches CSV data from a GitHub gist using D3’s `csv` method, and applies custom axis and font styling from a separate config module. The chart fills the browser window and renders as SVG.

Jjiro2017

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

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

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

Vega-Lite API Template

This example uses the Vega-Lite API with D3 to render a bubble chart of religious populations by country, sourced from the UCI Auto MPG dataset via a Gist. The visualization encodes country on the x-axis (sorted by descending population), religion on the y-axis, and population size as the bubble area, with tooltips for exact values. Code loads data via `d3.csv`, configures axes and styles through a `config` object, and renders an SVG using `vl.markCircle` with `vl.encode`, all orchestrated through `vega-lite-api` and `vega-tooltip`.

SShuyu Zheng