Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template - scatter plot

✓ Published1🌍 Public

Last edited Feb 7, 2022

Created on Feb 7, 2022

A scatter plot visualizes the relationship between miles per gallon (mpg), horsepower, and weight for vehicles from the Auto MPG Data Set. The circles are colored by origin, with size encoding weight, and hovering reveals the vehicle name via tooltip. Built with d3.v5 and the Vega-Lite API, it uses `vl.markCircle`, `.encode()`, and `vl.x()`/`vl.y()` scales, while `getData.js` loads the CSV using d3.csv and config.js customizes axis and label styling.

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…

This scatter plot visualizes the relationship between miles per gallon and horsepower for cars from the Auto MPG dataset, with color mapping to region of origin and point size encoding weight. Built with the Vega-Lite API, the visualization uses the `vl.markCircle` and `vl.encode` specifications to define the marks and channels, while `vl.x()` and `vl.y()` handle quantitative scales. Data is loaded asynchronously via D3’s `csv` function, and the chart is rendered with Vega, Vega-Lite, and Vega-Tooltip for interactive hover details.

AAakarshak Sthapak

94% match

Loading thumbnail…

Fork of Fork of Vega-Lite API Template

This scatterplot visualizes the relationship between miles per gallon, horsepower, weight, and origin for vehicles from the UCI Auto MPG dataset. It uses Vega-Lite API to create a circle mark encoding mpg and horsepower on the axes, weight for size, and origin for color, with hover tooltips. The code loads CSV data via d3.csv, registers the Vega-Lite API with vega and vega-lite, and renders to SVG through vega-tooltip's handler.

Vvigneswaran009

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

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes a scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository, exploring the relationship between miles per gallon, horsepower, and weight. Points are colored by origin and sized by weight, with hover tooltips displaying car names. Built with the Vega-Lite API, the code uses `vl.markCircle` and `vl.encode` to define the visualization, while `vl.x().fieldQ('mpg')` and `vl.y().fieldQ('horsepower')` map quantitative fields. The data loads via `d3.csv`, and the chart renders through the Vega-Lite API's `render()` method.

XXiyu Zhai

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays the relationship between miles per gallon, horsepower, origin, weight, and car name from the Auto MPG dataset. The Vega-Lite API constructs a scatter plot where engine weight encodes point size and country of origin drives color, with a tooltip for each vehicle. It uses `vl.markCircle`, `vl.x().fieldQ('mpg')`, and `vl.y().fieldQ('horsepower')` for quantitative axes, while `config.js` customizes axis and label styling, and `getData.js` loads the CSV via `d3.csv`.

SSunbinSong

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

A scatter plot of the Auto MPG dataset shows vehicle time on the x-axis, miles per gallon on the y-axis, and weight encoded by color, with tooltips for temperature. The visualization is built using the Vega-Lite API, with `vl.markCircle`, `vl.x()`, `vl.y()`, and `vl.color()` to define the encoding. Data is loaded via `d3.csv` from a Gist, and the chart is rendered as an SVG with custom axis styling from a config object. Tooltips are handled by the Vega-Tooltip handler.

AAndrea Picciau

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example presents an interactive scatter plot of the Auto MPG dataset, using circle marks to show the relationship between miles per gallon and horsepower. Point color encodes the country of origin, while size maps to vehicle weight. Built with the Vega-Lite API, the visualization loads data via D3’s `csv` function and renders to SVG. The code configures the chart’s dimensions and appearance through a custom config object, and tooltips are enabled via the Vega Tooltip handler.

Ggzm17

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset with an interactive scatter plot, mapping miles per gallon on the x-axis and horsepower on the y-axis. Circle size encodes vehicle weight, while color distinguishes the region of origin, and hovering reveals the car name via a tooltip. The visualization is built using the Vega-Lite API, which registers Vega and Vega-Lite libraries, and loads CSV data with D3’s `csv` function. Custom styling configures dark axis labels and a large font size for readability, with the chart automatically fitting the full viewport.

DDustin Brunner

93% match