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

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

88% match

Loading thumbnail…

Fork of Vega-Lite API Template

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.

Bblueyjuice

85% match

Loading thumbnail…

Fork of Vega-Lite API Template

This chart uses a circle mark for every country-religion pair, encoding the population value through color and tooltip. The visualization is built programmatically with the Vega-Lite API, which registers Vega and Vega-Lite to render to SVG, and loads country-by-religion population data from a CSV using d3.csv. Custom configuration adjusts axis labels and tooltip styling for readability.

PParendraReang

78% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays the relationship between health, population, and geographic region using a bubble scatter plot. Data from a CSV file containing income and health metrics is loaded via d3.csv, then rendered as circles whose size represents population and position reflects health scores across regions. The chart is built using the Vega-Lite API, with vega-lite-api handling mark encoding and vega-tooltip providing interactive hover details. Custom configuration in config.js adjusts axis styling and font sizes to improve readability against the dark theme.

MMateusz Urban

78% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the distribution of religious affiliations across countries using a circular scatter plot, where each circle’s position encodes country and religion, and its size represents population. The visualization is built with the Vega-Lite API, which registers Vega and Vega-Lite libraries to generate an SVG renderer. Data is loaded asynchronously from a remote CSV via D3’s `csv` method, then passed to a `vl.markCircle()` encoding that maps fields to axes, size, and tooltips. The view is configured to fit the window dimensions, and a custom config adjusts axis styling and font sizes. The Vega Tooltip handler enables interactive hover details.

CCHOI SEUNG HYUN

78% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a circle-marked visualization of religious populations by country, with circle size encoding population and both axes using categorical fields. The chart is built using the Vega-Lite API, which programmatically constructs a Vega-Lite specification, and renders to an SVG via Vega. The underlying data is loaded from a CSV using d3.csv, and the visualization includes tooltips through the vega-tooltip Handler. The code applies custom axis and label styling, and sets the chart to fit the full browser window.

Ccynichole

78% match

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

78% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset, showing a scatter plot of vehicle counts by country. The visualization uses Vega-Lite API to create circles with tooltips, sorted by country on the x-axis and number of vehicles on the y-axis. The code integrates vega, vega-lite, and d3.csv for data loading, with a custom config to style axis labels and titles. It renders SVG via the vega view, fitting the visualization to the full window size.

Bblackbottt

78% match