Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Nov 13, 2021

Created on Nov 13, 2021

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.

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

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

97% 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 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 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 interactive scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, mapping fuel efficiency against horsepower, with color by origin and point size by weight. It uses the Vega-Lite API to declaratively define the visualization, with D3.js loading the CSV data. The example demonstrates integrating Vega-Lite's high-level grammar with a custom configuration for improved readability, including styled axes and labels, and fits the chart responsively to the full viewport while enabling tooltips through Vega Tooltip.

SSemyon

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 visualization displays a scatter plot of auto MPG data, showing miles per gallon versus horsepower, with color encoding for origin and size encoding for weight. It uses the Vega-Lite API, rendering through Vega and Vega-Lite libraries with D3 for CSV data loading. The visualization includes tooltips for vehicle names and uses a custom configuration for improved readability. Data comes from the UCI Machine Learning Repository Auto MPG dataset, with a dark theme and larger fonts for enhanced presentation.

BBeihaiTianming

95% match