Skip to main content
SimilarExport ZIP
100%

Vega-Lite API Template

✓ Published0🌍 Public
Aalexandermodell
Last edited Feb 22, 2022
Created on Feb 22, 2022

This example visualizes the top five religions by country, using circle size to encode population and positioning to map country and religion attributes. It leverages the Vega-Lite API to construct a scatterplot, with data fetched via D3’s `csv` loader. The visualization is rendered as an SVG through Vega, incorporating a custom config for styling and automatic chart sizing to fit the viewport.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

Vega-Lite API Template

This visualization shows the top five religions by population across countries, with each circle’s color encoding population size and position mapping country and religion. Built with the Vega-Lite API, it registers Vega, Vega-Lite, and d3.v5, using `vl.markCircle()` for marks and `vl.x().fieldN()`/`vl.y().fieldN()` for categorical axes. The code loads CSV data from a Gist via d3’s `csv()` function, applies a custom config for axis and label styling, and renders responsively to the full window with SVG output.

Ttharuta
93% match
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
91% 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
91% match
Loading thumbnail…

Fork of Vega-Lite API Template

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.

LLisa Wagner
91% match
Loading thumbnail…

Vega-Lite API Template

This example visualizes the top five religious affiliations by population for each country, using a bar chart where bars are colored by religion and sorted by total population. Built with the Vega-Lite API, it composes a specification programmatically via `vl.markBar()`, `encode()`, and field accessors, then renders it to SVG through Vega-Lite and Vega. Data is loaded asynchronously from a CSV file using `d3.csv`, and the chart is configured with custom axis styles and tooltips via the `vega-tooltip` Handler.

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

4th Vega-Lite API Template

This example visualizes the top five religions by population per country, with bars sized and colored to reflect religious demographics. Built using the Vega-Lite API, it registers vega and vegaLite, and employs a bar mark with positional and size encodings. The visualization loads CSV data from a remote gist URL, renders as an SVG, and incorporates custom axis styling and tooltips via vega-tooltip's Handler.

NNicholas Francis O'Brien
90% match