Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Vega-Lite API Template

✓ Published1🌍 Public
NNaimisha-M
Last edited Jul 3, 2022
Created on Jul 3, 2022

This interactive scatter plot explores the relationship between vehicle horsepower, miles per gallon, weight, and country of origin using U.S. Auto MPG data from the UCI Machine Learning Repository. Each circle’s position, size, and color encode these attributes, with tooltips revealing car names. The visualization is built with the Vega-Lite API, registered through vega, vega-lite, and vega-tooltip, while d3.csv loads the external dataset. A custom dark-themed configuration adjusts axis and label styling for readability.

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 interactive scatter plot visualizes the relationship between horsepower, miles per gallon, weight, and origin for cars from the UCI Auto MPG dataset. Built with the Vega-Lite API and rendered via Vega, it encodes each car as a circle positioned by acceleration and engine displacement, with color indicating country of origin and size reflecting vehicle weight. Tooltips display car model names. The visualization uses D3's csv loader to fetch data from a Gist URL, and the chart resizes to fit the browser window.

NNaimisha-M
95% match
Loading thumbnail…

Fork of Fork of Vega-Lite API Template

This interactive scatter plot visualizes the relationship between miles per gallon, horsepower, weight, and origin for automobiles from the UCI Machine Learning Repository’s Auto MPG dataset. Each circle, colored by country of origin, uses both its vertical position and size to encode two different quantitative variables, while a tooltip reveals the car’s name. The visualization is built using the Vega-Lite API, which composes marks and encodings declaratively, with D3.js handling data loading via `csv`. The project registers Vega-Lite and Vega with the API, applies a custom dark-themed configuration for improved readability, and renders the output as an SVG that fills the browser window.

BBrian Olczak
95% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between fuel efficiency (mpg), horsepower, vehicle weight, and country of origin using a scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository. Circle size encodes weight, color encodes origin, and tooltips reveal vehicle names. The visualization is built using the Vega-Lite API registered with vega-lite and vega, configured for a clean SVG renderer. Data is loaded asynchronously via d3.csv from a GitHub Gist, while the custom config.js adjusts font sizes and axis tick colors for readability.

Mmeghshah612
95% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example presents an interactive scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository, visualizing relationships between fuel efficiency, horsepower, vehicle weight, and country of origin. Each circle’s position maps to miles per gallon and horsepower, while size encodes weight and color distinguishes origin, with tooltips revealing car names. Built with the Vega-Lite API, it registers Vega, Vega-Lite, and Vega-Tooltip through D3’s CSV loader for data retrieval, then renders a fit-sized SVG view with custom styling for readability.

SSepehr Roshanpour
95% match
Loading thumbnail…

Fork of Vega-Lite API Template

This scatter plot visualizes the relationship between miles per gallon, horsepower, weight, and origin for vehicles from the UCI Auto MPG dataset. The visualization uses the Vega-Lite API with D3.js to load CSV data and render interactive circles with tooltips. Point color encodes the vehicle’s country of origin, while point size reflects weight. The chart is configured to fill the browser window and uses custom axis and label styling for clarity. Data is fetched via d3.csv from a Gist-hosted CSV file.

JJasmine Ye Han
95% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between miles per gallon, horsepower, weight, and country of origin for vehicles in the Auto MPG dataset from the UCI Machine Learning Repository. A scatter plot encodes weight as circle size and origin as color, with tooltips showing vehicle names. It is built using the vega-lite-api to construct the specification, with vega-lite and vega handling rendering, while d3.csv loads the data. The visualization is configured with custom axis and label styling via the config object.

Yyijunqian
95% match
Loading thumbnail…

Fork of Fork of Vega-Lite API Template

This scatterplot visualizes the relationship between miles per gallon, horsepower, weight, and origin for vehicles from the UCI Auto MPG dataset. It uses Vega-Lite API to create a circle mark encoding mpg and horsepower on the axes, weight for size, and origin for color, with hover tooltips. The code loads CSV data via d3.csv, registers the Vega-Lite API with vega and vega-lite, and renders to SVG through vega-tooltip's handler.

Vvigneswaran009
94% match
Loading thumbnail…

Fork of Vega-Lite API Template I

This interactive scatter plot visualizes the relationship between fuel efficiency (mpg), horsepower, weight, and country of origin for automobiles from the UCI Auto MPG dataset. The visualization uses the Vega-Lite API to declaratively encode data fields onto circular marks, with color distinguishing origin and size mapping to weight. It reads CSV data via `d3.csv`, renders with Vega’s SVG renderer, and includes Vega-Tooltip for interactive hover details. The chart resizes to fit the browser window and applies custom axis and label styling for readability.

FFonda Irena Santoso
94% match