Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Oct 28, 2021

Created on Oct 28, 2021

This example visualizes automobile fuel efficiency using a scatter plot of miles per gallon versus horsepower, colored by origin and sized by weight. A slider interactively filters the data to a single weight value, which updates the displayed points. The visualization is built with the Vega-Lite API, leveraging d3.csv for data loading from the UCI Auto MPG dataset, and uses vega-tooltip for hover details. Rendering is handled through vega.

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 automobile fuel efficiency and performance data from the UCI Auto MPG dataset. A scatter plot shows each car’s miles per gallon against its horsepower, with color encoding country of origin and point size reflecting vehicle weight. Hovering reveals the car’s name via tooltip. The visualization is built with the Vega-Lite API, wrapping the Vega-Lite declarative grammar, and renders through Vega with an SVG renderer, using D3 for CSV data loading and Vega-Tooltip for interactions.

Mm. scott veach

96% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between fuel efficiency, horsepower, weight, and origin using data from the UCI Auto MPG dataset. Scatter plots map miles per gallon and horsepower, while point size encodes vehicle weight and color distinguishes geographic origin. The visualization is built with the Vega-Lite API, which registers Vega and Vega-Lite libraries, and uses d3.csv for data loading. Custom axis styling and tooltips enhance readability, with the view rendered as an SVG that fits the full window.

SSpuddy2884

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This scatter plot visualizes automobile fuel efficiency and performance using the Auto MPG dataset from the UCI Machine Learning Repository. It displays miles per gallon against horsepower, with color encoding origin and point size reflecting vehicle weight. The visualization is built programmatically using the Vega-Lite API, a JavaScript interface for declarative visualization, which generates specifications rendered through Vega and Vega-Lite. Data is loaded asynchronously via d3.csv, and interactive tooltips are enabled through the Vega Tooltip handler.

Yyuankui

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatter plot of the Auto MPG dataset, mapping fuel efficiency against horsepower with points colored by origin and sized by vehicle weight. The visualization is built using the Vega-Lite API, which registers with Vega and Vega-Lite to compile specifications, and uses D3’s `csv` loader to fetch the data. The chart is rendered as an SVG, with a custom configuration for axes and labels, and includes an interactive tooltip showing the vehicle name via the Vega Tooltip library.

Mmagnushaese

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, encoding vehicle weight as point size, origin as color, and miles per gallon against horsepower. Built with the Vega-Lite API, it registers Vega and Vega-Lite alongside the vega-tooltip Handler for hover interactions. The visualization uses a d3.csv fetch to load data, with a custom config adjusting axis styling and label fonts, and renders responsively to fit the full browser window.

DDataFeast_71

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This scatter plot visualizes automotive fuel efficiency and performance data from the UCI Auto MPG dataset, showing the relationship between miles per gallon and horsepower while encoding vehicle origin via color and weight via marker size. The visualization is built programmatically using the Vega-Lite API, which constructs a declarative specification that is then rendered through Vega and Vega-Lite JavaScript libraries. Data is loaded asynchronously from a GitHub Gist using the `csv` function from d3.v5, while the Vega Tooltip handler provides interactive hover details displaying each car model's name. The chart auto-fits to the browser window dimensions.

KKevin McMorrow

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository, showing vehicle fuel efficiency against horsepower. Each circle’s size encodes vehicle weight and its color represents the country of origin, with tooltips revealing the car model name. The visualization is built using the Vega-Lite API, which compiles specifications into Vega and renders with D3. Data is fetched as CSV via D3’s `csv` function, and styling customizes axis labels and titles for readability.

Sseitzfab

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between fuel efficiency (miles per gallon) and horsepower for vehicles from the Auto MPG dataset, encoding weight as point size, origin as color, and car model name as a tooltip. It shows a scatter plot with a custom dark theme and enlarged axis labels. The visualization is built declaratively using the Vega-Lite API, which is registered with Vega and Vega-Lite libraries, while the data is fetched and parsed using D3’s `csv` function.

II'm Ronald

95% match