Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published1🌍 Public

Last edited Jan 20, 2022

Created on Jan 20, 2022

This example visualizes U.S. population by age group and sex from 1850 to 2000, using grouped bar marks over a time axis. It builds the chart with the vega-lite-api, registering vega-lite and vega for rendering, and enables a tooltip handler for interactivity. Data is loaded asynchronously from a CSV file via d3.csv, with appearance customized through a config object that adjusts label and title font sizes and colors. The visualization outputs as an SVG, fitted to the full window dimensions.

AI-generated description

A visualization constructed using the vega-lite-api.

Visualizes US population separated by age groups and sex 1850 - 2000.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Vega-Lite API Template

This visualization displays the US population by age, sex, and year from 1850 to 2000, using grouped bars to compare age cohorts over time. Built with the Vega-Lite API, it encodes year on the x-axis, population counts on the y-axis, and age groups as color, with tooltips revealing sex and population values. The code loads CSV data via `d3.csv` from a GitHub gist, configures axes and label styling through the `config` object, and renders the chart using the Vega, Vega-Lite, and Vega-Tooltip libraries.

LLove Wessman

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes U.S. state population trends from 2010 to 2019 using a multi-series line chart. The Vega-Lite API constructs marks encoded with x-axis time data, y-axis population values, and color grouping by geographic area, with tooltips for individual states. Population data is loaded asynchronously via d3.csv from a GitHub gist. The visualization renders in SVG and includes a dark-themed config that removes axis domains and customizes label styling for readability.

Nnonbots

86% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a bar chart of population by country for 2015, with bars sorted in ascending order and tooltips displaying population values on hover. It is built using the Vega-Lite API, which registers Vega and Vega-Lite libraries to create the visualization programmatically. The code loads CSV data via d3.csv and renders the chart as an SVG, applying a custom configuration for axis styling and label fonts. The visualization is designed to fit the full browser window using an autosize fit option.

AAnibal Gatica

86% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a bar chart of population by country for 2015, with tooltips displaying the population values. The visualization is built using the Vega-Lite API, which programmatically defines a markBar encoding with a categorical x-axis sorted by value and a quantitative y-axis. Data is loaded asynchronously via d3.csv from a Gist-hosted CSV file, and the chart is rendered as SVG through the Vega runtime. The code customizes axis and label styling via a config object and fits the chart to the browser window dimensions.

DDavid Beales

86% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a horizontal bar chart of population by country, with bars sorted in descending order and tooltips displaying population values on hover. Built using the Vega-Lite API, it loads CSV data from an external URL via d3.csv, configures visual styling through a custom config object, and renders the chart as an SVG using vega and vega-lite. The chart resizes to fit the window with automatic width and height calculations, and tooltips are enabled through the vega-tooltip Handler.

Ssimontoblad

86% match

Loading thumbnail…

Fork of Vega-Lite API Template

The chart displays the population of each country as horizontal bars, sorted in descending order, with tooltips revealing the exact population value on hover. Built using the Vega-Lite API within a D3.js framework, the visualization is rendered as an SVG and dynamically sized to fit the browser window. The code fetches a CSV dataset from a GitHub gist and applies custom styling to axes and guide labels for improved readability.

Hhimchan94

84% match

Loading thumbnail…

Fork of Vega-Lite API Template

A Vega-Lite API visualization displays country populations from a 2015 CSV dataset as black bars, sorted alphabetically by country name. The chart uses Vega-Lite’s `markBar` encoding for x-position and population on the y-axis, with tooltips showing exact population values. Built with the `vega-lite-api` library, D3’s `csv` loader fetches the data, while `vega-tooltip` provides interactive hover details. The visualization renders as an SVG, fitted to the full browser window with custom styling from the `config.js` file.

Sstevensmithj

84% match

Loading thumbnail…

Fork of Vega-Lite API

This example uses the Vega-Lite API to render a bar chart of population by country, with data loaded from a CSV file. The visualization encodes country names on the x-axis and population values on the y-axis, sorting bars by population size. The page imports Vega, Vega-Lite, and Vega-Lite API libraries, registers them together with Vega Tooltip for interactive hover details. Custom axis styling and font sizes from a config object improve readability, while the chart resizes to fit the window using the view’s width and height properties.

LLaura Jackson

84% match