Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Apr 19, 2021

Created on Apr 19, 2021

This example creates a bar chart showing the population of countries by religion, using a fork of the Vega-Lite API template. It renders data from a remote CSV file via `d3.csv` and visualizes it with `markBar`, encoding the x-axis by country name, y-axis by population, and color by religion. The chart uses `vega-lite-api` with a custom config that adds red axis ticks and larger label fonts, while the tooltip is handled by `vega-tooltip`’s `Handler`.

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 demonstrates a bar chart of population by country, colored by religion, using the Vega-Lite API. The visualization sorts countries by descending population and includes tooltips for each bar’s population value. It loads CSV data from a GitHub gist via `d3.csv` and renders the chart as an SVG using Vega-Lite’s `markBar` encoding, with custom axis and label styling from a shared config. The code registers Vega-Lite and Vega-Tooltip handlers to enable interactive tooltips.

Ccheruvatheryvishnu@gmail.com

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example presents a bar chart of population by country, with bars colored by religion, using the Vega-Lite API. It loads CSV data from a GitHub gist via D3’s `csv` function. The chart is rendered with Vega-Lite’s `markBar` encoding x by country, y by population, and color by religion. The visualization is built with `vega-lite-api` and rendered to SVG through Vega, with tooltips provided by `vega-tooltip`.

KKNJour

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a bar chart of population by country, with bars colored by religion and tooltips displaying population values on hover. The visualization is built using the Vega-Lite API, which registers Vega and Vega-Lite libraries and uses a custom configuration to adjust axis and label styling for readability. Data is loaded asynchronously from a CSV file via `d3.csv`, and the chart is rendered as SVG with an autosized fit to the window. The code also integrates the Vega Tooltip handler for interactive hover details.

GGerasimos Katsagannis

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example presents a horizontal bar chart visualizing population by country, with bars colored by religion. The visualization is built programmatically using the Vega-Lite API, which is registered with the Vega and Vega-Lite libraries. The `vl.markBar()` method encodes the country, population, and religion fields, while data is loaded from a CSV file using `d3.csv`. The chart is rendered as an SVG and configured with custom axis and label styles.

KKtuzinowski

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a stacked bar chart of population by country, with bars segmented by religion and tooltips displaying population values on hover. It uses the Vega-Lite API to build the visualization, with `vl.markBar()` and encodings for country, population, and religion, while `vega-tooltip` provides interactive popups. Data comes from a CSV file loaded via D3’s `csv` function, and the chart is rendered as SVG, configured with a custom theme for larger axis labels and titles.

Sspawan432

93% match

Loading thumbnail…

Fork of Vega-Lite API Template to tinker with

This example shows a bar chart of population by country, with bars colored by religion and a tooltip displaying population values on hover. It loads data from a CSV file hosted in a GitHub gist, then renders the visualization using the Vega-Lite API (vl) with a concise specification: markBar encoding country on the x-axis (sorted descending by population), population on the y-axis, and religion as color. The code imports vega, vega-lite, vega-lite-api, d3.csv for data loading, and vega-tooltip for interactive tooltips, with custom axis and label styling configured in a separate config.js file. The visualization dynamically sizes to the full window and uses an SVG renderer.

RRyan Johnson

93% match

Loading thumbnail…

Fork of Vega-Lite API Template Origin

This visualization displays a bar chart of population by country, with colors encoding religion and tooltips revealing population values on hover. It uses the Vega-Lite API to construct the chart, with getData.js loading CSV data from a gist containing religion-by-country statistics. The code leverages vega-lite-api's `markBar`, `x()`, `y()`, `color()`, and `tooltip()` methods, registered with vega and vega-lite, and renders via the SVG view with a vega-tooltip handler. The config customizes axis ticks and font styles for readability.

Ddleoenri

92% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes religious demographics across countries using a bar chart, with each bar representing a country and the color encoding the population for each religion. The visualization is built using the Vega-Lite API and rendered with D3.js, incorporating vega-tooltip for interactive hover details. Data is loaded from a CSV file hosted on GitHub, containing population figures for various religions by country. The chart fills the entire window and uses custom styling to adjust font sizes and axis appearance for readability.

DDipak654

92% match