Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published2🌍 Public

Last edited Jun 3, 2021

Created on Jun 3, 2021

This visualization presents a horizontal bar chart of population by country, with bars colored by religion and sorted in descending order. Built with the Vega-Lite API, it registers Vega and Vega-Lite alongside a tooltip handler via vega-tooltip, rendering as SVG through D3 v5. Data loads from a CSV of population and religion statistics using d3.csv, with axis and label styling customized in a separate config module.

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…

Fork of Vega-Lite API Template

This visualization displays a horizontal bar chart showing population counts by country, with each bar color-coded by religion. The chart is built using the vega-lite-api library, which registers Vega and Vega-Lite to render SVG output. Data is loaded asynchronously via d3.csv from a GitHub Gist containing religion-by-country statistics. The visualization uses quantitative population fields for the y-axis, nominal country fields for the x-axis, and nominal religion fields for color encoding, with tooltips enabled through vega-tooltip.

RRoger Olson

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

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This bar chart shows the population of countries, segmented by religion, with bars sorted in descending order of total population. Built using the Vega-Lite API, the visualization defines the mark, encodings, and tooltip in code, then renders through a Vega view with an SVG renderer. The data is loaded from a CSV file using d3’s `csv` method, and axes are customized via a config object. Interactive tooltips are provided by the vega-tooltip Handler.

HHJQ2000

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a bar chart of population by country, with bars segmented by religion. The visualization uses the Vega-Lite API to construct the chart, and the Vega and Vega-Lite libraries to render it as an SVG. The data is loaded from a CSV file using d3.csv. The bars are sorted by population in descending order, and tooltips show the population value for each segment. Chart appearance is customized through a configuration object.

DDusty

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

92% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a bar chart of population by country, with each bar divided into colored segments representing different religions. The visualization uses the Vega-Lite API to construct the chart, with data loaded from a CSV file containing religion and population statistics. The code registers Vega and Vega-Lite, and configures tooltips using the Vega-Tooltip handler. The chart is rendered as an SVG and automatically fits the window size. The bars are sorted by population in descending order, and a tooltip displays temperature data on hover.

HHoang Dang Khanh

92% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization presents a bar chart of global religious populations, sorted by country size and colored by religion, with interactive tooltips showing population values. Built using the Vega-Lite API with d3.csv for data loading, the visualization reads from the Auto MPG Data Set via a Gist, though the chart itself displays religion-by-country data. The code configures the chart through vl.markBar(), vl.x(), vl.y(), and vl.color() encodings, while Vega-Lite's renderer generates SVG output within a full-window, dark-themed layout using custom axis and label styling.

OOpe Kareem

92% match