Lesson 6

100%

✓ Published0🌍 Public

Last edited May 10, 2021

Created on May 7, 2021

This visualization displays the relationship between vehicle weight, horsepower, and fuel efficiency using the auto-mpg dataset. A scatter plot maps weight on the x-axis and horsepower on the y-axis, while both the size and color of the circular marks encode miles per gallon, with tooltips revealing car names. It is built with the vega-lite-api, which wraps Vega-Lite and Vega, and loads data via d3.csv. The chart fills the browser window with a fit autosize and uses custom axis and label styling from a config object.

AI-generated description

Lesson 6: A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

Vega-Lite API Template

This example visualizes the relationship between fuel efficiency, horsepower, weight, and origin for vehicles from the Auto MPG dataset. It displays a scatter plot of mpg against horsepower, with point size encoding weight and color distinguishing vehicle origin. The visualization is built using the Vega-Lite API, which wraps Vega-Lite and Vega in a JavaScript interface, combined with d3.csv for data loading from a Gist-hosted CSV file. A custom tooltip from vega-tooltip displays the vehicle name, while the chart autosizes to fill the browser window.

Llakalia@wpi.edu

87% match

Loading thumbnail…

Vega-Lite API Template

This example visualizes the relationship between vehicle weight, horsepower, and fuel efficiency using a scatter plot, with each car represented as a circle colored by weight and sized by miles per gallon. The visualization is built with the Vega-Lite API, which registers Vega and Vega-Lite libraries to create the chart programmatically. Data is loaded from a CSV file via d3.csv, and the final SVG output is rendered to fill the browser window. Axis styling and tooltips are customized through the provided Vega-Lite config and the vega-tooltip handler.

CCurran Kelleher

87% match

Loading thumbnail…

Vega-Lite API Template

This interactive scatter plot visualizes the relationship between vehicle weight, horsepower, and fuel efficiency (mpg) in the Auto MPG dataset from the UCI Machine Learning Repository. The visualization uses the Vega-Lite API to declaratively define a markCircle with quantitative scales, color-encoding by country of origin, and tooltips displaying vehicle names. Rendered as an SVG, the chart supports interactive tooltips through vega-tooltip and d3.csv for asynchronous data loading, with a custom config for axis styling and fonts.

Aahora

86% match

Loading thumbnail…

Scatter Plot with Menus

This scatter plot visualizes the relationship between vehicle weight and horsepower, colored by origin and sized by weight, based on the auto-mpg dataset loaded via `d3.csv`. The visualization uses vega-lite-api to construct the specification, with vega-lite and vega handling rendering to SVG. Interactive tooltips display car names using vega-tooltip’s `Handler`, while the `config.js` customizes axis and label styling. The plot fills the window with a fit autosize, and the code registers the tooltip handler during initialization.

YYee Han

86% match

Loading thumbnail…

Vega-Lite API Template - experiment

This interactive scatter plot visualizes the relationship between vehicle weight, horsepower, and fuel efficiency (mpg) using the classic auto-mpg dataset, loaded via `d3.csv` from a remote GitHub Gist. Encoded as circles with size and color mapped to quantitative fields, the chart reveals correlations among these performance metrics. Built with the Vega-Lite API for programmatic specification, it renders through Vega, Vega-Lite, and the `vega-tooltip` Handler, with automatic resizing to fit the window.

Llaplantalaplanta

86% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between horsepower, miles per gallon, and vehicle weight for cars from the UCI Machine Learning Repository's Auto MPG dataset. A scatter plot uses circle marks, with color encoding vehicle origin and size encoding weight, while tooltips reveal the car model name. The visualization is built using the Vega-Lite API, which wraps Vega and Vega-Lite, and includes a custom configuration to style axes and labels. Data is loaded asynchronously with d3.csv, and the chart canvas fills the browser window.

SShishiraRudrabhatla

86% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization shows the relationship between vehicle weight, horsepower, and fuel efficiency in a scatter plot, using a dataset of automobile specifications. The plot encodes weight on both the x-axis and color scale, while horsepower appears on the y-axis and miles per gallon determines point size. Built with the Vega-Lite API wrapped in D3.js, it renders as an SVG and includes interactive tooltips showing each car’s name. The code demonstrates programmatic chart construction through `vl.markCircle` and encoding methods, with a custom configuration adjusting axis styling and label fonts.

Wwzhang88

86% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between vehicle weight, horsepower, and fuel efficiency (mpg) in the Auto MPG dataset from the UCI Machine Learning Repository. Each circle represents a car, positioned by mpg on the x-axis and horsepower on the y-axis, with color encoding the country of origin and size encoding weight. The visualization is built using the vega-lite-api library in conjunction with Vega-Lite and Vega, while d3.csv loads the remote dataset. A custom config object adjusts axis styling, and the chart automatically fits the browser window with a tooltip displaying the car model name.

RROU

86% match