Fork of Vega-Lite API

100%

Fork of Vega-Lite API

✓ Published0🌍 Public

Last edited Dec 19, 2021

Created on Dec 19, 2021

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.

AI-generated description

use of vega lite - temperature

MIT Licensed

Similar vizzes

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

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

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

92% match

Loading thumbnail…

Fork of Vega-Lite API Template - test

This example shows a bar chart of population by country, using data loaded from a CSV file. The visualization is built with Vega-Lite and the Vega-Lite API, with D3.js handling data fetching. It uses the `vl.markBar()` method to encode the country field on the x-axis and population on the y-axis, with tooltips displaying population values. The chart auto-sizes to fill the browser window and applies custom axis and label styling for readability.

MMorshai

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

91% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example presents a bar chart of population by country for 2015, with countries sorted in descending order along the x-axis. It uses the Vega-Lite API to define the bar marks and encodings, and renders the visualization through a custom D3-based setup in `index.js` that loads data from a CSV URL via d3.csv. The chart leverages vega, vega-lite, and vega-lite-api libraries, with a custom dark-themed configuration for axes and labels, and automatically sizes itself to the full window.

Mmavercikalvin

91% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example renders a bar chart of population by country for 2015, using data loaded from a CSV file via d3’s `csv` function. The visualization is built declaratively with the Vega-Lite API, which is registered with Vega and Vega-Lite libraries in `index.js`. The chart uses `markBar` with encoding for country on the x-axis and population on the y-axis, and a tooltip for country names. Appearance is customized through a config object, and the chart resizes to fit the browser window.

MMd Rizabul

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

91% match