Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Nov 10, 2021

Created on Nov 10, 2021

This visualization presents a scatter plot of food supply data, plotting Alcoholic Beverages against Recovered values for different countries, with tooltips revealing country names. Built with the Vega-Lite API, it uses `vl.markCircle` and `vl.encode` to define the chart. The code loads data from a CSV file via d3.csv, and renders the visualization using the Vega, Vega-Lite, Vega-Lite API, and Vega-Tooltip libraries, with custom styling from a config object.

AI-generated description

A visualization constructed using the vega-lite-api.

The data shown here comes from the UCI Machine Learning Repository: Auto MPG Data Set, via Gist: Scatter Plot with Menus.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to render a scatter plot of global food consumption data from the UCI Machine Learning Repository’s Auto MPG dataset, sourced via a Gist. The visualization encodes Animal Products and Recovered values as x- and y-position, with color by country and point size by weight. It applies a custom dark-colored axis and label configuration, and uses Vega-Lite’s `markCircle`, `encode` with `fieldQ`, and `scale` methods, all rendered through Vega’s SVG view with tooltips from Vega-Tooltip.

Bblueyjuice

86% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays the relationship between Country and Recovered numbers from a Fat Supply Quantity dataset, using circles sized by recovery count. It is built with the Vega-Lite API, which generates charts through declarative specifications, and runs on D3.js v5 for data loading. The code uses `vl.markCircle`, `vl.x().fieldN()`, and `vl.size().fieldQ()` to encode categorical and quantitative fields, with custom configuration in `config.js` to adjust axis and label styling. Data is fetched asynchronously via `d3.csv`.

Bblueyjuice

85% match

Loading thumbnail…

Alcohol Vega Lite

This example uses a scatterplot to compare beer servings and total liters of pure alcohol consumed per country, with tooltips revealing country names on hover. It fetches data from the FiveThirtyEight alcohol-consumption GitHub repository using D3’s `csv` loader, then renders the chart with Vega-Lite via the vega-lite-api wrapper, which registers Vega and Vega-Lite and uses vega-tooltip for interactions. The visualization adapts to the full window size and applies custom axis and label styling from a config object.

Ddvinubius

84% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes COVID-19 recovery counts across countries, using colored and sized circles to represent the recovered cases per nation. Data is loaded from an Auto MPG dataset, though the visualization maps it to Country and Recovered fields. Built with D3.js and the Vega-Lite API, it registers Vega and Vega-Lite libraries, configures tooltips via vega-tooltip, and renders a scatter plot with a dark customization theme, scaling circles by recovery values.

Bblueyjuice

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

82% match

Loading thumbnail…

Fork of Fork of Vega-Lite API Template

This visualization displays a scatter plot of data from the UCI Auto MPG dataset, plotting intensity against end year and coloring points by pestle, with tooltips showing sector information. Built with the Vega-Lite API, it uses d3’s `csv` function to load remote data, `vl.markCircle` for the marks, and encodes x, y, color, and tooltip channels. The code registers Vega-Lite with a custom config to adjust axis styling and label fonts, and renders the chart as an SVG fitted to the window size.

KKIRRAN P L

82% match

Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatter plot visualizes the relationship between land-use change and transport emissions for various food products, using color and tooltips to identify items. The visualization is built with the Vega-Lite API, which programmatically defines the chart specification, while the underlying data is loaded as a CSV file from Our World in Data. Rendering is handled by Vega, with d3.csv fetching the data and the Vega Tooltip handler providing interactive hover details. The chart fills the browser window and is configured for readability with custom fonts and axis styling.

Ootis

82% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example creates a scatter plot of cereal data, positioning each cereal brand by its cups of cereal and calories. The visualization uses a Vega-Lite API built on the `vega-lite-api` library, with `vl.markCircle` and `vl.x`/`vl.y` encodings to map the quantitative fields, and a tooltip encoding showing the cereal name. Data is fetched as CSV from a remote URL using `d3.csv`. The rendering is handled by Vega-Lite and Vega, with tooltips provided through `vega-tooltip`. The chart is customized with a dark text color and simplified axes, and it auto-fits to the browser window size.

RRandyElkins

82% match