Skip to main content
SimilarExport ZIP
100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public
KKeyvan Rezaei
Last edited May 27, 2021
Created on May 27, 2021

This example uses the Vega-Lite API to render an interactive scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository. It displays each car as a circle positioned by mileage-per-gallon and horsepower, with color encoding geographical origin and size encoding weight, while tooltips reveal the vehicle name. The visualization is built with d3.v5 for CSV loading, the Vega-Lite API for declarative chart specification, and Vega-Tooltip for interactive hover details. The code configures axis styling and a dark color palette to improve 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…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to render an interactive scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository. It displays each car as a circle positioned by mileage-per-gallon and horsepower, with color encoding geographical origin and size encoding weight, while tooltips reveal the vehicle name. The visualization is built with d3.v5 for CSV loading, the Vega-Lite API for declarative chart specification, and Vega-Tooltip for interactive hover details. The code configures axis styling and a dark color palette to improve readability.

KKeyvan Rezaei
100% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to render an interactive scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository. The visualization maps miles per gallon on the x-axis, horsepower on the y-axis, and encodes the car’s origin in color and weight in point size, with tooltips showing the vehicle name. Built with d3.csv for data loading and vega-tooltip for hover details, all marks are drawn as circles with opacity. The chart’s appearance is customized via a Vega-Lite config object, adjusting axis styles and typography for readability.

CCheng Tang
97% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to construct an interactive scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository. The plot displays each car as a circle, with its position determined by miles per gallon and horsepower, while color encodes the country of origin and size reflects vehicle weight. The visualization is built using the vega-lite-api library, which registers Vega and Vega-Lite specifications, and includes tooltips via vega-tooltip. Data is loaded through d3.csv, and the chart resizes to fit the browser window.

RRahel Gunaratne
96% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to create an interactive scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository. Each circle represents a vehicle, with horsepower on the y-axis, miles per gallon on the x-axis, weight mapped to circle size, and origin mapped to color. Tooltips reveal each car’s name. The code registers Vega-Lite with D3.js v5 for data loading via `d3.csv`, and customizes axis and label styling through a config object.

UUdoekpo Stephen
96% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a scatter plot of auto-mpg data, where each circle represents a vehicle’s origin and horsepower, with tooltips revealing the model name. The visualization is built using the Vega-Lite API, with D3.js (d3.csv) loading data from the UCI Machine Learning Repository’s Auto MPG dataset. The code registers Vega, Vega-Lite, and Vega-Tooltip, applies a custom configuration for axis and label styling, and renders the plot as an SVG that fits the browser window.

KKeyvan Rezaei
96% match
Loading thumbnail…

Fork of Vega-Lite API Template 2

This example uses the Vega-Lite API to render an interactive scatter plot of automobile data from the UCI Machine Learning Repository’s Auto MPG dataset. The visualization encodes miles per gallon on the x-axis, horsepower on the y-axis, and uses both color (by origin) and size (by weight) to reveal patterns among vehicles. Built with vega-lite-api, it includes tooltips showing car names and configures axis styles for readability. The code loads data via d3.csv, renders the chart as SVG, and supports hover interactions through vega-tooltip.

Ggayatrisridhar
96% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to create an interactive scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository. The visualization maps miles per gallon to the x-axis, horsepower to the y-axis, and encodes origin as color while weight drives circle size. Tooltips display car names on hover. The code registers Vega, Vega-Lite, and Vega-Tooltip through `vl.register`, then loads CSV data asynchronously with `d3.csv`. Rendering uses a fit-to-window SVG view with custom axis and label styling from a shared config object.

CCaleb Crum
96% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API and D3 to render an interactive scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository. The visualization shows miles per gallon against horsepower, with color encoding for origin and point size representing vehicle weight. Hovering over a point reveals the car’s name via a tooltip. The code constructs the chart declaratively with `vl` from vega-lite-api, loads data using `d3.csv`, and renders to SVG with vega-lite and vega-tooltip.

Rrmgoldberg24
95% match