Skip to main content
SimilarExport ZIP
100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public
AAnibal Gatica
Last edited Sep 18, 2022
Created on Sep 17, 2022

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.

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 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
97% 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
95% 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
94% match
Loading thumbnail…

Fork of Vega-Lite API Template

This bar chart displays population by country for 2015, using a horizontal layout with country names on the y-axis and population on the x-axis, with tooltips showing exact population values on hover. The visualization uses the Vega-Lite API (`vl.markBar()`, `vl.x().fieldN('country')`, `vl.y().fieldQ('population')`) to declaratively build the specification, which is then rendered via Vega-Lite and Vega. Data is loaded from a CSV file using `d3.csv()` from a GitHub gist, and the chart resizes to fit the browser window using width and height bindings.

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

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