Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published1🌍 Public

Last edited Jul 11, 2021

Created on Jul 11, 2021

This example visualizes automobile data from the UCI Machine Learning Repository’s Auto MPG dataset, plotting each car’s country of origin on the x-axis against its horsepower on the y-axis using semi-transparent, oversized circular marks. The chart is built with the Vega-Lite API, registered and rendered through Vega and Vega-Lite, with tooltips provided by Vega-Tooltip. Data is loaded asynchronously via d3.csv, and the visualization is styled with custom axis and label configurations defined in a separate config.js file, resulting in a clean, full-screen scatter plot.

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 Auto MPG dataset from the UCI Machine Learning Repository, plotting each car’s origin against its horsepower as a scatter plot. It uses the Vega-Lite API to define the chart and encode the data, with circle marks colored by origin and tooltips showing car names on hover. The visualization loads CSV data via d3.csv, applies custom axis and label styling through a Vega-Lite config object, and renders the final output using Vega and Vega-Lite JavaScript libraries with SVG rendering and tooltip support.

LLorenzo Casbarra

96% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes automobile data from the UCI Machine Learning Repository’s Auto MPG dataset, plotting each car’s country of origin on the x-axis and horsepower on the y-axis as translucent circles. The visualization is built with the Vega-Lite API, using `vl.markCircle` and `vl.encode` to define the marks and channels, while `d3.csv` loads the remote CSV data. The code leverages vega, vega-lite, and vega-tooltip libraries for rendering and interactive tooltips, with a custom config adjusting axis styles and font sizes for readability.

Aaredmond-re

96% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository, plotting each car as a circle positioned by horsepower and miles per gallon, colored by country of origin, and sized by vehicle weight. Hovering over a circle reveals the car’s name via a tooltip. The visualization is built using the Vega-Lite API, which registers Vega and Vega-Lite specifications through JavaScript code, with the data loaded via `d3.csv`. The chart uses an SVG renderer and applies custom axis and label styling from a configuration object.

YYedrup

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

A scatter plot of automotive data visualizes the relationship between the country of origin and horsepower, with each car represented by a semi-transparent circle. The visualization uses the Vega-Lite API with the `data(await getData())` method to load and bind the Auto MPG dataset from the UCI Machine Learning Repository, then applies a custom configuration to adjust axis styles and typography. The code registers Vega, Vega-Lite, and the Vega-Tooltip handler, and sets the chart dimensions to fill the browser window using `.width(window.innerWidth)` and `.height(window.innerHeight)` with an autosize fit option.

Aadam

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository, plotting each car’s horsepower against its miles-per-gallon. Points are colored by country of origin, with size encoded by vehicle weight, and tooltips reveal the car’s name. The visualization is built using the Vega-Lite API (vl) with a custom config for axis styling, and rendered dynamically to fit the browser window. Data is loaded asynchronously via d3.csv, while Vega, Vega-Lite, and Vega-Embed handle the chart specification and SVG rendering.

VVilmer98

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between a car's country of origin and its horsepower using a scatter plot. Each point represents a car, with opacity applied to reveal overlapping data points, and a tooltip displays the car's name on hover. The visualization is built using the Vega-Lite API, which generates a specification rendered to SVG via Vega and Vega-Lite. It loads the Auto MPG dataset from the UCI Machine Learning Repository using `d3.csv`, and customizes axis styling and tooltip appearance through a configuration object.

Ww.fukuyama@gmail.com

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes automobile performance data from the UCI Auto MPG dataset, mapping model year on the x-axis, horsepower on the y-axis, and color-coding points by country of origin while sizing them by weight. The visualization is built using the Vega-Lite API, which registers with Vega and Vega-Lite, and renders as an SVG. It loads data via `d3.csv`, applies custom axis and label styling from a config object, and includes tooltips that display all data attributes on hover. The chart automatically fits the browser window dimensions.

OOlof Ollerstam

95% match

Loading thumbnail…

Fork of Vega-Lite API Viz

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository, plotting each car as a circle positioned by miles per gallon and horsepower, colored by country of origin, and sized by vehicle weight. Built with the Vega-Lite API, it registers Vega and Vega-Lite with a custom configuration that removes axis domains and enlarges label fonts for readability. Data is fetched asynchronously via d3’s `csv` loader, and tooltips are enabled through the vega-tooltip `Handler`. The visualization renders as an SVG, fitting to the browser window with padding, and includes interactive tooltips showing car names.

@@harrison_obetta

95% match