Example Zoomable #3

100%

Example Zoomable #3

✓ Published0🌍 Public

Last edited Feb 28, 2022

Created on Feb 28, 2022

This example visualizes automobile data from the UCI Machine Learning Repository’s Auto MPG dataset, plotting miles per gallon against horsepower as a scatter plot. Each point’s size encodes vehicle weight, while its color represents the region of origin, and hovering reveals the model name. The visualization is built with the vega-lite-api library, which compiles specifications into Vega-Lite and renders them via Vega, with d3.csv used to load the data. The chart is configured for full-window sizing and uses a custom dark theme for improved 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…

Vega-Lite API Template

This example visualizes automobile data from the UCI Machine Learning Repository’s Auto MPG dataset, plotting horsepower against miles per gallon. Points are colored by origin and sized by vehicle weight, with tooltips revealing model names. The visualization uses the Vega-Lite API, a JavaScript wrapper for Vega-Lite specifications, registered with Vega and Vega-Lite libraries, plus D3’s `csv` loader for data ingestion. Rendering occurs as an SVG via the `markCircle` and `encode` API methods, with custom axis styling from a config object.

Jjuanmy400

88% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository as a scatter plot, mapping miles per gallon on the x-axis against horsepower on the y-axis. Each point represents a car model, with a tooltip displaying the vehicle name on hover. The visualization is built using the Vega-Lite API, which wraps Vega and Vega-Lite specifications, while D3’s `csv` function loads the remote data. The chart renders as an SVG, with custom configuration adjusting axis style, label font sizes, and colors for improved readability.

KKimberly Nguyen

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

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

87% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization presents a scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository, showing the relationship between miles per gallon and horsepower for various car models. Each point’s size encodes vehicle weight, color indicates the country of origin, and hovering reveals the car name. Built with the Vega-Lite API, it registers Vega, Vega-Lite, and d3, using `vl.markCircle` for encoding and `d3.csv` for loading data. The plot spans the full browser window with a custom dark color config for axis labels and titles.

NNana Kwame

87% match

Loading thumbnail…

Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository as a scatter plot, mapping miles per gallon, horsepower, origin, weight, and car name to the x-axis, y-axis, color, size, and tooltip channels. It uses the Vega-Lite API to construct the specification programmatically, with Vega and Vega-Lite for rendering and Vega-Tooltip for interactive hover details. Data is loaded via d3.csv, and the chart fills the browser window with a custom configuration for font sizes and axis styling.

AAmine HAMOU

87% match

Loading thumbnail…

Vizhub3

This visualization presents the Auto MPG dataset from the UCI Machine Learning Repository as an interactive scatter plot, mapping miles per gallon against horsepower. Each circle represents a car model, with color encoding the country of origin, size encoding weight, and tooltips revealing the model name. The code uses the Vega-Lite API (via the `vega-lite-api` wrapper) to define the chart declaratively, with D3.js handling CSV data loading. Custom configurations adjust axis styling and typography for readability, and the visualization auto-fits to the browser window dimensions.

AAbhinay-Mannepalli

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

87% match