Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Dec 31, 2024

Created on Dec 31, 2024

This example visualizes the relationship between miles per gallon, horsepower, weight, and origin for automobiles from the UCI Machine Learning Repository Auto MPG dataset. It uses the Vega-Lite API to construct a scatter plot with circles, encoding mpg and horsepower as x and y axes, origin as color, and weight as size, with tooltips showing car names. The visualization is rendered in SVG via D3.js (d3.csv) and Vega-Lite, with a customized dark theme config and automatic sizing to fit the viewport.

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 example visualizes the relationship between miles per gallon, horsepower, vehicle weight, and origin using a scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository. The visualization encodes weight as point size and color as origin, with tooltips revealing car names. It is built with the Vega-Lite API, running through Vega and Vega-Lite rendering pipelines, and dynamically sizes the chart to the browser window. Data is loaded asynchronously via d3.csv, while a custom configuration adjusts axis and label styling.

Sstefanpullen

96% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between miles per gallon, horsepower, and weight for auto-mpg data from the UCI Machine Learning Repository. A scatter plot shows each car as a circle, with color encoding the region of origin and size encoding vehicle weight; hovering reveals the car’s name via tooltip. The visualization is built using the Vega-Lite API, which is registered with Vega and Vega-Lite libraries, and renders to SVG. Data is loaded asynchronously via d3.csv, with custom axis and label styling defined in a separate configuration file.

SSezer Gümüş

96% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository, showing the relationship between miles per gallon, horsepower, and vehicle weight, with color distinguishing the origin of each car. It uses the Vega-Lite API to construct a scatter plot with circle marks, encoding quantitative fields for x and y positions and weight for size, while tooltips display the vehicle name on hover. The code registers Vega, Vega-Lite, and the Vega-Lite API, loads data via d3.csv, and configures axis and label styling for readability. Rendered as an SVG that fills the window, the visualization supports interactive tooltips via Vega Tooltip.

AAnomatomato

96% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository, plotting miles per gallon against horsepower for individual cars. Each circle’s color encodes the car’s origin, while its size represents weight; hovering reveals the car’s name via a tooltip. The visualization is built using the Vega-Lite API, which composes a scatter plot with a circle mark and quantitative scales. It loads CSV data via d3.csv, renders with SVG through Vega-Lite’s view, and applies custom axis and label styling from a shared configuration object.

Ssofiamourap

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

96% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository, showing the relationship between miles per gallon and horsepower, with additional encodings for origin (color) and weight (size). The plot uses a scatter plot with semi-transparent circles, presenting data as points with tooltips displaying car names. The visualization is built using the vega-lite-api library, which wraps Vega-Lite specifications, with the `vl.markCircle` method configuring the marks and `vl.x()`/`vl.y()` for quantitative scales. Data is loaded asynchronously via `d3.csv`, and the final render uses Vega’s SVG output with a custom tooltip handler.

SSong Tao Chen

96% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository, plotting miles per gallon against horsepower as colored circles representing the car’s origin. It uses the Vega-Lite API to declare the scatter plot, with point size mapped to vehicle weight and tooltips showing car names. The visualization is rendered as SVG via Vega, with D3.js loading the CSV data and Vega Tooltip providing interactive labels. Custom axis and label styling in the configuration improve readability, and the chart resizes to fit the browser window.

EEngineerRajeev

96% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays the relationship between fuel efficiency (mpg), horsepower, origin, and weight for a set of automobiles. The code uses the Vega-Lite API to construct a scatter plot with circle marks, encoding mpg on the x-axis, horsepower on the y-axis, origin as color, and weight as size. Data is loaded from the UCI Machine Learning Repository's Auto MPG dataset via a CSV file, processed using `d3.csv`. The visualization is rendered as an SVG through Vega-Lite, with a custom configuration for axis styling and tooltips.

CCecilia831

95% match