Vega-Lite API

100%

✓ Published0🌍 Public

Last edited Mar 2, 2021

Created on Mar 2, 2021

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.

AI-generated description

A visualization constructed using the vega-lite-api.

The data shown here comes from the UCI Machine Learning Repository: Auto MPG Data Set, via Gist: Scatter Plot with Menus.

MIT Licensed

Similar vizzes

Loading thumbnail…

Vega-Lite API Template - religion - circle

This example visualizes the world’s major religions by country using a circle plot, where each circle’s area encodes population size and its position maps country and religious affiliation. The visualization is built with the Vega-Lite API, registered within D3.js (v5), and renders as an SVG. It loads data from the UCI Machine Learning Repository via a CSV file, fetched with `d3.csv`. The chart’s appearance is customized through a Vega-Lite config, adjusting font sizes and axis styling for readability.

MMahesha999

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

91% match

Loading thumbnail…

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

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

91% match

Loading thumbnail…

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

91% match

Loading thumbnail…

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

90% match

Loading thumbnail…

Vega-Lite API Template

This visualization displays the population distribution of five countries across religions using a bubble chart. It is built with the vega-lite-api, which registers vega, vega-lite, and vega-tooltip to render the chart as SVG. The data is loaded asynchronously via d3.csv from a Gist URL, with each bubble’s size mapping to the population field. The chart fills the browser window and uses the vega-lite API’s markCircle method with encoded x and y fields for country and religion.

CCurran Kelleher

90% match

Loading thumbnail…

Fork of Vega-Lite API Template

This bubble chart shows the global distribution of religious populations by country, with circle size encoding population count and axes arranged by country and religion. Built using the Vega-Lite API template, the visualization renders interactively via vega-lite-api, vega-lite, and vega, with tooltips provided by vega-tooltip. Data is loaded asynchronously from a CSV file using d3.csv, and appearance is customized through a config object that adjusts axis ticks and label styling. The chart is sized to fit the browser window using autosize and rendered as SVG.

Bboreilly26

90% match