Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Mar 22, 2021

Created on Mar 22, 2021

This interactive scatter plot visualizes automobile efficiency and performance across different regions of origin. Each circle represents a vehicle, positioned by miles per gallon and horsepower, with color encoding the continent of manufacture and size reflecting vehicle weight. Hovering reveals the model name via tooltip. The visualization is constructed using the Vega-Lite API within a D3.js framework, loading data from the UCI Auto MPG dataset and rendering through Vega’s SVG output with custom styling for improved 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 automobile performance data from the UCI Auto MPG dataset. Each circle represents a vehicle, positioned by miles per gallon and horsepower, colored by country of origin, and scaled by weight. The visualization is built using the Vega-Lite API, which constructs the chart specification, with Vega rendering the SVG output. D3 handles CSV data loading, while Vega-Tooltip provides interactive hover details. The interface automatically fits the chart to the browser window, with customized axis styling and enlarged typography for improved readability.

SShantanu

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatter plot visualizes automobile fuel efficiency by plotting miles per gallon against horsepower, with point size encoding weight and color distinguishing country of origin. Built using the Vega-Lite API and D3.js, it loads automotive data from the UCI Machine Learning Repository via a CSV file. The visualization is rendered as an SVG, configured with customized axis and label styling, and includes hover tooltips displaying vehicle names.

HHaowenWeiJohn

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatter plot visualizes automobile performance data from the UCI Auto MPG dataset, showing miles per gallon against horsepower across different origins. The visualization uses square marks with color encoding for origin and size for vehicle weight, while tooltips display model names. Built with the Vega-Lite API, it registers Vega, Vega-Lite, and d3.csv for data loading, then renders an SVG view with custom axis and label styling. The plot automatically fits the browser window and uses Vega Tooltip for interactive hover details.

LLainu Kuruvilla

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatter plot visualizes automobile fuel efficiency and performance data from the UCI Machine Learning Repository’s Auto MPG dataset. It shows the relationship between miles per gallon and horsepower, with color encoding country of origin, size encoding vehicle weight, and tooltips revealing car names. The visualization is built using Vega-Lite’s API built on D3, employing vl.markCircle and its encoding methods. The D3 csv function loads the data, while custom configuration in config.js adjusts axis styling for readability.

PPeter Krevenets

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

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatter plot visualizes the relationship between fuel efficiency, horsepower, and origin in a dataset of classic cars. The plot positions each vehicle by its miles per gallon and horsepower, colors points by the country of origin, and sizes them according to vehicle weight. Built using the Vega-Lite API, the visualization is rendered as an SVG via the vega-lite-api, with data fetched from the UCI Auto MPG dataset. Custom configuration adjusts the axis styling and tooltip appearance.

AAlejo Cortiñaz

93% match

Loading thumbnail…

Fork of Vega-Lite API Template 2

This visualization presents an interactive scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository, showing vehicle fuel efficiency against horsepower, with color encoding for country of origin and size encoding for vehicle weight. Built using the Vega-Lite API in conjunction with D3 v5 and Vega-Tooltip, the visualization retrieves data via D3’s CSV loader and renders as a full-window SVG with customized axis styling and tooltips that display vehicle names on hover.

Mmuhammadshumas

93% match

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

93% match