Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published1🌍 Public

Last edited Jul 18, 2022

Created on Jul 18, 2022

This example visualizes the relationship between acceleration, horsepower, and origin for automobiles in the UCI Machine Learning Repository’s Auto MPG dataset. Each car is plotted as a semitransparent circle, with color encoding the country of origin and tooltips revealing the model name. Built using the Vega-Lite API, the visualization loads data via d3.csv, renders with Vega’s SVG output, and applies custom axis and label styling from a shared configuration. The chart resizes to fit the browser window and uses Vega Tooltip for interactive hover details.

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 horsepower, acceleration, weight, and origin for cars in the Auto MPG dataset from the UCI Machine Learning Repository. A scatter plot maps horsepower to the x-axis and acceleration to the y-axis, with point size encoding weight and color distinguishing origin, while tooltips reveal car names. It is built with the Vega-Lite API (via `vl.markCircle` and `vl.encode`), configured through `config.js`, and loaded using D3’s `csv` function. The rendering pipeline combines Vega, Vega-Lite, and vega-tooltip, with the chart filling the browser window.

Hhenry c

94% 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 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.

Jjjacobatandover

94% match

Loading thumbnail…

Fork of Fork of Vega-Lite API Template

This visualization plots automobile acceleration against horsepower, colored by country of origin, with tooltips revealing model names. The scatterplot uses data from the UCI Auto MPG dataset, loaded via `d3.csv`. Built with the Vega-Lite API, it composes a circle mark with quantitative x and y encodings and a nominal color encoding, rendered as SVG. The code customizes axis and label styling through a Vega-Lite config object to improve readability.

AAmnaRizvi-S

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

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

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

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

92% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository, showing relationships between fuel efficiency, horsepower, weight, and country of origin for various car models. A circle mark encodes weight as size, origin as color, and includes tooltips showing car names. The visualization is built using the Vega-Lite API, which registers Vega and Vega-Lite libraries, with D3’s `csv` function loading the remote data file. The code configures axes and styling through a custom config object, and renders the chart as an SVG using the `vega-tooltip` handler.

Ppavan0828

92% match