Vega-Lite API Template

100%

Vega-Lite API Template

✓ Published0🌍 Public

Last edited Oct 31, 2021

Created on Oct 31, 2021

This example visualizes automobile data from the UCI Machine Learning Repository’s Auto MPG dataset, plotting origin on the x-axis, horsepower on the y-axis, and encoding mpg as circle size with tooltips showing car names. Built with the Vega-Lite API, it registers vega, vega-lite, and vega-tooltip in index.js, loads CSV data via d3.csv, and renders an interactive SVG chart configured with custom axis and label styling from config.js. The visualization updates dynamically to fit the browser window.

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…

Vega-Lite API Template

This example visualizes automobile data from the UCI Machine Learning Repository’s Auto MPG dataset, plotting horsepower against miles per gallon. Points are colored by origin and sized by vehicle weight, with tooltips revealing model names. The visualization uses the Vega-Lite API, a JavaScript wrapper for Vega-Lite specifications, registered with Vega and Vega-Lite libraries, plus D3’s `csv` loader for data ingestion. Rendering occurs as an SVG via the `markCircle` and `encode` API methods, with custom axis styling from a config object.

Jjuanmy400

95% match

Loading thumbnail…

Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository as a scatter plot, mapping miles per gallon, horsepower, origin, weight, and car name to the x-axis, y-axis, color, size, and tooltip channels. It uses the Vega-Lite API to construct the specification programmatically, with Vega and Vega-Lite for rendering and Vega-Tooltip for interactive hover details. Data is loaded via d3.csv, and the chart fills the browser window with a custom configuration for font sizes and axis styling.

AAmine HAMOU

95% match

Loading thumbnail…

Vega-Lite API Template

This example uses the Vega-Lite API to render an interactive scatter plot of automobile data from the UCI Auto MPG dataset, loaded via d3.csv. A circle mark encodes origin on the x-axis, horsepower on the y-axis, weight as color, and mpg as size, with tooltips showing car names. The visualization leverages vega-lite-api’s fluent interface, registered with vega and vega-lite, and includes vega-tooltip for interactivity. A custom config adjusts axis, label, and title styling for readability, while the chart fits the window using autosize and SVG rendering.

JjohnmurphyLC

95% match

Loading thumbnail…

Vega-Lite API Template

This example visualizes automobile fuel efficiency and performance data from the UCI Auto MPG dataset, plotting horsepower against miles per gallon with circle size encoding vehicle weight and color encoding country of origin. The visualization is built programmatically using the Vega-Lite API, which registers Vega and Vega-Lite libraries, configures a tooltip handler, and loads CSV data via d3.csv. It generates an interactive SVG scatter plot with custom axis styling, and the view auto-fits to the browser window dimensions.

EEFezerKW

94% match

Loading thumbnail…

Vega-Lite API Template

This example visualizes automotive data from an auto-mpg CSV dataset, plotting engine weight against horsepower with circles colored by origin and sized by miles per gallon. The code constructs the visualization using the Vega-Lite API, registering it with vega and vega-lite, and rendering as SVG via d3.dsv. A custom configuration adjusts axis labels and tick styling for readability, while d3.csv loads the remote dataset. Tooltips display car model names on hover using vega-tooltip.

PPUUDI

94% match

Loading thumbnail…

Vega-Lite API Template

This example displays a scatter plot of auto-mpg data, encoding horsepower, weight, and origin. A circle mark uses quantitative axes for mpg and horsepower, color by origin, and size by weight. It features a tooltip for vehicle names. Built with the Vega-Lite API, it renders an SVG chart using vega-lite-api, vega, vega-lite, and d3.csv, with custom styling via a config object. The data comes from the UCI Machine Learning Repository Auto MPG dataset, loaded asynchronously and displayed with interactive tooltips.

CCurran Kelleher

94% match

Loading thumbnail…

Vega-Lite API Template

This interactive scatter plot visualizes automotive data from the UCI Machine Learning Repository, showing the relationship between fuel efficiency (mpg) and horsepower while encoding car origin by color and weight by circle size. Hovering reveals the vehicle name via tooltips. Built with the Vega-Lite API, the visualization chains declarative specifications programmatically, registering Vega-Lite and Vega with the vega-lite-api library. The code customizes axis styling through a shared config object, loads data via d3.csv, and renders to an SVG using Vega’s renderer with automatic window sizing.

GGang Chen

94% match

Loading thumbnail…

Vega-Lite API Template

This example uses the Vega-Lite API to create an interactive scatter plot of the UCI Auto MPG dataset, mapping miles per gallon, horsepower, weight, and origin to the x-axis, y-axis, size, and color channels respectively. The visualization is rendered in SVG via Vega and Vega-Lite, with a tooltip showing car names. The code registers the vega-lite-api with a custom tooltip handler, loads data asynchronously using d3.csv, and applies a shared config for axis and label styling. The chart fits the full window and uses a dark color scheme.

Rrobin88824

94% match