Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Jan 27, 2022

Created on Jan 27, 2022

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.

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

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

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

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

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

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

92% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a bar chart of population by country, colored by religion, with a tooltip showing temperature on hover. The visualization is built using the Vega-Lite API, which wraps Vega and Vega-Lite specifications, and renders to SVG. Data is loaded asynchronously from a CSV file via D3’s `csv` function, sourced from the auto-mpg dataset. The chart is configured with custom axis and label styling, and fills the full viewport using automatic resizing.

AasafJortilles

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

92% match