ACE - Fork of Vega-Lite API Template

100%

ACE - Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Jul 13, 2021

Created on Jul 13, 2021

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository, plotting vehicle fuel efficiency (mpg) against horsepower. Each circle’s size encodes weight, while color distinguishes the origin of the vehicle, and hovering reveals the car’s name. Built with the Vega-Lite API and D3’s `csv` loader, the chart uses `vl.x()`, `vl.y()`, `vl.color()`, and `vl.size()` for encoding, with a fixed circle size and opacity. The visualization is configured to fit the window dimensions and uses a custom dark theme via `config.js`.

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

92% 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 with points colored by origin and sized by vehicle weight. Tooltips display car names on hover. The visualization is built using the Vega-Lite API and rendered through D3.js, with data loaded via D3’s `csv` function. The chart is created programmatically using `vl.markCircle` with encodings for quantitative and nominal fields, and includes custom configuration for axis styles and text formatting.

Aantanta28

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

91% 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 fuel efficiency (mpg) against its horsepower. Circles are colored by country of origin and sized by vehicle weight, with tooltips revealing the car model name. The visualization is built using the Vega-Lite API, which wraps d3.csv for data loading and vega-tooltip for interactive hover details. The plot dynamically fits the full viewport width and height, while custom axis and label styling are defined in a separate config file to improve readability.

Kkosakase

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

90% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository. A scatter plot maps miles per gallon and horsepower, with each point’s size encoding vehicle weight and color distinguishing country of origin. Hovering reveals the car’s name via a tooltip. Built with the Vega-Lite API in a D3.js framework, the code uses `vl.markCircle` and `vl.encode` to construct the visualization, with `d3.csv` fetching the data and `vega-tooltip` providing interactivity.

RRobin

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

90% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository, showing the relationship between miles per gallon and horsepower, with additional encodings for origin (color) and weight (size). The plot uses a scatter plot with semi-transparent circles, presenting data as points with tooltips displaying car names. The visualization is built using the vega-lite-api library, which wraps Vega-Lite specifications, with the `vl.markCircle` method configuring the marks and `vl.x()`/`vl.y()` for quantitative scales. Data is loaded asynchronously via `d3.csv`, and the final render uses Vega’s SVG output with a custom tooltip handler.

SSong Tao Chen

90% match