Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Mar 5, 2021

Created on Mar 5, 2021

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.

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

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

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

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 scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, showing the relationship between fuel efficiency (mpg) and engine power (horsepower) for various car models. Each circle is colored by country of origin and sized by vehicle weight, with tooltips revealing model names. Built with the Vega-Lite API, it uses d3’s CSV parser to load data, then renders an interactive SVG graphic with configurable axis styling and a custom dark theme.

GGeorge Williams

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 interactive scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, plotting fuel efficiency against horsepower. Each circle encodes vehicle origin through color and weight through size, with hover tooltips revealing model names. The visualization uses the Vega-Lite API to declaratively specify the chart, while D3.js (d3.csv) handles data loading. The code leverages vega-lite-api’s `vl` builder to chain mark and encoding specifications, with vega-tooltip providing interactive legends and tooltips.

Mmarquesjr79

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays automobile data from the UCI Machine Learning Repository’s Auto MPG dataset as a scatter plot, showing miles per gallon against horsepower, with color encoding the country of origin and point size representing vehicle weight. The plot uses a dark-themed, large-label aesthetic for clarity. It is built with the Vega-Lite API, which is registered with Vega and Vega-Lite, and uses D3’s `csv` loader to fetch the data. The interactive tooltip is provided by Vega Tooltip, and the chart renders as SVG, fitting the full browser window.

Lleopoldovce2

95% match