Vega-Lite API Template Cars

100%

Vega-Lite API Template Cars

✓ Published1🌍 Public

Last edited Jul 20, 2022

Created on Jul 19, 2022

This visualization displays automobile performance data from the UCI Auto MPG dataset, plotting acceleration against horsepower while encoding weight through circle size and origin as color. Hovering reveals vehicle names via tooltips. The code uses the Vega-Lite API to construct the scatter plot declaratively, with D3’s `csv` loader fetching the remote dataset, and renders through Vega’s SVG output. Custom axis and label styling come from a shared 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.

Start at 3:25:01

MIT Licensed

Similar vizzes

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

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 interactive scatter plot visualizes automobile performance data from the UCI Machine Learning Repository’s Auto MPG dataset, mapping horsepower against displacement while encoding origin by color and mpg by point size. Built with the Vega-Lite API, the visualization uses `vl.markCircle` and `vl.encode` to define visual channels, with `d3.csv` loading the remote dataset. The chart dynamically fits its container, applies custom axis and label styling via the `config` object, and integrates Vega Tooltip for hover interactions.

DDeaxNG

94% match

Loading thumbnail…

Vega-Lite API_Car

This interactive scatter plot explores automobile fuel efficiency and performance using the UCI Machine Learning Repository's Auto MPG dataset. It displays miles per gallon against horsepower, with circles sized by vehicle weight, colored by country of origin, and offering tooltips for car names. Built with the Vega-Lite API for D3, the visualization leverages `vl.markCircle`, `vl.x().fieldQ()`, and `vl.y().fieldQ()` to encode these dimensions. The code loads data via `d3.csv`, applies a custom configuration for readable axes and fonts, and renders an SVG that fills the browser window.

SSkye Chen

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

94% match

Loading thumbnail…

Vega-Lite API Template I

This visualization displays automobile performance data from the UCI Auto MPG dataset, plotting horsepower against miles per gallon with each point colored by country of origin and sized by vehicle weight. Built with the Vega-Lite API, the example constructs chart specifications programmatically, encoding tooltips for car names and customizing axis styling through a config object. The implementation uses `vl.markCircle` with field encodings for quantitative and nominal data, while `getData` imports the dataset via d3's `csv` function, and the `run` function renders the visualization directly into the document body.

OOleJRask

94% match

Loading thumbnail…

Vega-Lite API Template

This visualization displays the Auto MPG dataset, showing the relationship between acceleration, horsepower, origin, and weight for various car models. Using the Vega-Lite API, the code constructs a scatter plot with a custom dark theme and tooltips, rendering through the vega and vega-lite libraries. Data is loaded asynchronously via the d3.csv function, and the visualization is configured to fit the viewport size, emphasizing interactive exploration of the data.

Bbingsen0806

93% match