Vega-Lite API Template

100%

Vega-Lite API Template - Line Chart

✓ Published1🌍 Public

Last edited Apr 12, 2021

Created on Apr 8, 2021

Forked from Fork of Vega-Lite API Template

This example uses the Vega-Lite API to render a circular scatter plot showing the population of religious groups by country. The visualization encodes country on the x-axis, religion on the y-axis, and population as circle size, with a tooltip displaying religion names. It loads data from a CSV file using D3’s `csv` method, then configures the chart with custom axis and label styling from the `config` module. The Vega-Lite API registers with Vega and Vega-Lite libraries, and the chart is rendered as an SVG with a tooltip handler.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

This example demonstrates a Vega-Lite API template that renders an interactive bubble chart showing the population of religious groups by country. The visualization uses circular marks whose size encodes population values, with country on the x-axis and religion on the y-axis, and displays tooltips when hovering over marks. The code loads CSV data from a GitHub gist, applies custom axis and label styling through a config object, and renders the chart using the Vega-Lite API integrated with Vea, Vega-Lite, and the Vega Tooltip handler. The chart automatically fits to the browser window dimensions.

Jjanneprice

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…

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…

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

89% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the distribution of religious affiliations across countries using a circular scatter plot, where each circle’s position encodes country and religion, and its size represents population. The visualization is built with the Vega-Lite API, which registers Vega and Vega-Lite libraries to generate an SVG renderer. Data is loaded asynchronously from a remote CSV via D3’s `csv` method, then passed to a `vl.markCircle()` encoding that maps fields to axes, size, and tooltips. The view is configured to fit the window dimensions, and a custom config adjusts axis styling and font sizes. The Vega Tooltip handler enables interactive hover details.

CCHOI SEUNG HYUN

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

This example displays a bubble chart of religious populations by country, with circle size encoding population and axes for country and religion. It uses the Vega-Lite API to construct the visualization declaratively, with the `vl.markCircle()` and `vl.encode()` methods. The chart renders via the Vega rendering engine with SVG output, and data is loaded from a CSV file using D3's `d3.csv()`. The `autosize({ type: 'fit' })` setting makes the chart responsive to the window.

LLucyI

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

89% match