Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published1🌍 Public

Last edited Aug 22, 2021

Created on Aug 22, 2021

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.

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 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 scatterplot visualizes the relationships among car attributes in the Auto MPG dataset from the UCI Machine Learning Repository, showing fuel efficiency (mpg) against horsepower, with color encoding by origin, size encoding by weight, and tooltips revealing car names. The visualization is built programmatically using the Vega-Lite API, which registers Vega and Vega-Lite in the browser, fetches data via d3.csv, and configures visual styling such as axis tick colors and font sizes. It renders as inline SVG, sized responsively to the window, with Vega-Tooltip handling interactive details on hover.

Jj-PGi

96% match

Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatter plot explores the relationship between fuel efficiency (mpg) and horsepower for cars, with point color indicating region of origin and point size representing vehicle weight. The visualization is built using the Vega-Lite API, which programmatically constructs a Vega-Lite specification that is rendered to SVG via Vega and Vega-Lite libraries. Data comes from the UCI Auto MPG dataset, loaded asynchronously with d3.csv. The code customizes axis styling through a config object and adds interactive tooltips displaying car names through the Vega Tooltip handler.

Ttknaik

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

96% match

Loading thumbnail…

Fork of Vega-Lite API Template

This scatter plot visualization explores the relationship between fuel efficiency and horsepower across car models, using color to encode the region of origin and point size to represent vehicle weight. The plot is built with the Vega-Lite API, which registers with Vega and Vega-Lite libraries to render an SVG chart, while D3.js handles fetching and parsing the CSV data. Tooltips display vehicle names via the Vega Tooltip handler. The data originates from the UCI Machine Learning Repository’s Auto MPG dataset, loaded from a GitHub Gist.

SS-Au-Zn

96% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays an interactive scatter plot of the Auto MPG dataset, plotting miles per gallon against horsepower while encoding vehicle origin by color and weight by point size. Built with the Vega-Lite API, it combines vega, vega-lite, vega-tooltip, and d3.csv for data loading. The code configures axis styling, applies a responsive fit to the window, and uses interactive tooltips showing vehicle names. Data comes from the UCI Machine Learning Repository via a GitHub gist.

Cchar0496

96% match

Loading thumbnail…

Fork of Vega-Lite API Template

This scatter plot shows the relationship between fuel efficiency (mpg) and horsepower for a sample of automobiles, with color encoding by region of origin and point size encoding vehicle weight. The visualization is built using the vega-lite-api library, which programmatically constructs a Vega-Lite specification that renders as an SVG. Data is loaded asynchronously via d3.csv from the UCI Auto MPG dataset, and the resulting chart includes interactive tooltips displaying the car model name. The code customizes the visual appearance through a separate config.js file and appends the rendered visualization to the document body.

DDaniel Vanpelt

96% match