Vega-Lite API Template

100%

Vega-Lite API Template

✓ Published1🌍 Public

Last edited Sep 18, 2020

Created on Sep 16, 2020

This example visualizes the World Happiness Report 2020 data, plotting each country’s happiness score against its logged GDP per capita, with points colored by regional indicator and tooltips showing country details. Built with the Vega-Lite API, it uses `vl.markPoint()` and `vl.encode()` to define the scatter plot, while `d3.csv` loads the remote dataset. The visualization is rendered as an SVG via Vega and Vega-Lite, with a custom configuration for axis and label styling, and it fills the browser window using an autosize fit setting.

AI-generated description

A visualization constructed using the vega-lite-api.

The data shown here comes from the [World Happiness Report 2020] (https://www.kaggle.com/mathurinache/world-happiness-report?select=2020.csv), via Gist: World Happiness Report 2020.

MIT Licensed

Similar vizzes

Loading thumbnail…

Vega-Lite API Template

This scatterplot displays the relationship between happiness score and logged GDP per capita for countries in the 2020 World Happiness Report, with point color encoding regional indicator and size representing healthy life expectancy. Tooltips reveal country name, happiness score, and GDP per capita on hover. The visualization is built using the vega-lite-api library, which wraps Vega-Lite’s declarative syntax, while D3’s `csv` function loads the external dataset. The chart automatically fits the window dimensions and uses a custom configuration to adjust axis and label styling.

AAnurag Desai

94% match

Loading thumbnail…

World Happiness Report

This visualization displays the relationship between a country’s happiness score and its GDP per capita, with each circle colored by whether the country is classed as the “happiest country.” Built with the vega-lite-api and D3 v5, it loads CSV data from a GitHub gist and renders a scatterplot using `vl.markCircle`. The chart applies custom axis and label styling from a shared config, uses a tooltip to show country names, and fits the view to the window dimensions.

Mmkt-ds

85% match

Loading thumbnail…

Vega-Lite API Template

This example displays the population of countries in 2015 as horizontal bars, ranked from largest to smallest, with the countries on the x-axis and their population on the y-axis. Built with the Vega-Lite API, it dynamically loads data via `d3.csv` from a remote gist and renders the chart using Vega-Lite’s SVG renderer. The code customizes the axis and tooltip appearance through a configuration object, and it uses `vega-tooltip` for interactive hover details. The visualization adapts its width and height to the window size with an autosize fit.

CCurran Kelleher

81% match

Loading thumbnail…

Vega-Lite API Template

This example renders an interactive bar chart of population by country for 2015, using data from a Gist CSV file. It visualizes the rank-ordered values with a dark theme and custom axis styling. The visualization is built with the Vega-Lite API, which composes specifications programmatically in JavaScript, integrated with Vega and Vega-Lite libraries. It also uses D3’s `csv` loader for data ingestion, and Vega Tooltip for hover interactions, with the chart fitted to the full viewport.

TTengHoo3

80% match

Loading thumbnail…

Vega-Lite API Template

This example visualizes the population of countries in 2015 using a bar chart, with countries sorted in descending order of population. The visualization is built with the Vega-Lite API, which registers Vega and Vega-Lite libraries, and uses D3’s `csv` loader to fetch the dataset from a GitHub gist. The chart renders in an SVG view, with a tooltip from `vega-tooltip` to display population values on hover, and uses a custom config for axis and label styling.

Llscholz1

80% match

Loading thumbnail…

Vega-Lite API

A scatterplot maps foreign assistance spending across countries, plotting fiscal years against income group acronyms and coloring points by assistance objective. The visualization uses the Vega-Lite API to declaratively encode circle marks with size, opacity, and tooltip fields, while fetching CSV data from a GitHub repository via D3's `csv` loader. Custom configuration adjusts axis styles and theme colors, and the chart auto-fits to the browser window with an SVG renderer enhanced by Vega Tooltip.

Ssahildesignzz@gmail.com

80% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization uses the Vega-Lite API to render an interactive scatter plot of population density data, plotting population in 2021 against density per square mile for various countries. The data is loaded from a CSV file via D3’s `csv` function, and the plot encodes country as color with tooltips showing country names. The code registers Vega, Vega-Lite, and the Vega-Lite API, applies a custom dark theme through a config object, and sizes the SVG renderer to fit the window using `autosize`. The mark-point specification sets point size and opacity, though tooltip fields are limited to the country name.

Ppfoulley

79% match

Loading thumbnail…

Vega-Lite API Template

This example uses Vega-Lite API to render a scatter-style point plot of institutional data, with countries on the x-axis and the number of experts on the y-axis. The points are colored and sized by expert count, and tooltips display institution names. It loads CSV data from a GitHub gist using d3.csv, configures visual appearance through a custom config object, and renders interactively with a tooltip handler. The visualization is built in a React-compatible setup using vega, vega-lite, and vega-lite-api libraries, with a responsive full-window layout.

Aashershah

79% match