Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published1🌍 Public

Last edited Jun 10, 2021

Created on Jun 10, 2021

This example visualizes Auto MPG data from the UCI Machine Learning Repository, plotting each car as a semi-transparent circle positioned by origin (categorical) and horsepower (quantitative), with tooltips revealing the vehicle name. The visualization is built entirely with the Vega-Lite API, leveraging `vl.markCircle`, `vl.x().fieldN`, `vl.y().fieldQ`, and `vl.tooltip` to define the encodings. Data is loaded asynchronously via D3’s `csv` function, while Vega, Vega-Lite, and the Vega Tooltip handler manage rendering and interaction. The configuration customizes axis styles and label colors to improve readability against a dark background.

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 fuel efficiency (mpg) against its horsepower. Each circle’s size encodes vehicle weight, while color distinguishes the region of origin, and hovering reveals the car’s name. The visualization is built programmatically using the Vega-Lite API (`vl.markCircle`, `vl.x`, `vl.y`), with data loaded asynchronously via `d3.csv`. Rendering is handled by Vega and Vega-Lite, with tooltips provided by Vega-Tooltip, and custom axis and label styling is applied through a shared config object.

MMohammed Jumail Shibily

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 weight and horsepower, colored by origin, and sized by miles per gallon. Hovering reveals the car name via a tooltip. The visualization is built with the Vega-Lite API (vl), which generates a Vega-Lite specification that is registered with vega and vegaLite and rendered as SVG. Data is loaded asynchronously using d3.csv from a Gist, and the chart uses custom axis and label styling from a shared config file.

LLaura Johnson

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

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, with color encoding for country of origin and size encoding for vehicle weight. The visualization is built using the Vega-Lite API, which is registered with Vega and configured to render as SVG. Data is fetched asynchronously via the `csv` import from d3, and the chart includes an opacity setting and tooltip support through the `vega-tooltip` Handler. The API calls include `markCircle`, `encode`, `fieldQ`, and `scale`, with custom axis styling from a separate config file.

Jjchen6912

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 model as a circle. It shows miles per gallon against horsepower, with the circle’s color encoding the country of origin and its size corresponding to vehicle weight. Built using the Vega-Lite API, the visualization is configured through `vl.markCircle` and `vl.encode`, while data is fetched asynchronously via `d3.csv` from a Gist URL. The rendering uses Vega-Lite’s SVG renderer with an autosize fit, and a custom tooltip handler and configuration object define the visual styling.

Jjasonamey

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 as a circle with engine horsepower on the y-axis and miles per gallon on the x-axis. Color encodes the country of origin, while circle size represents vehicle weight, and hovering reveals the car’s name via a tooltip. Built with the Vega-Lite API, the visualization registers Vega and Vega-Lite, loads data asynchronously using d3.csv, and renders an interactive SVG chart that resizes to fit the viewport. The code also applies custom axis and label styling through a configuration object.

RRoland

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

95% match