Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Oct 22, 2021

Created on Oct 22, 2021

This example uses the Vega-Lite API to create a scatter plot of automotive data from the UCI Machine Learning Repository’s Auto MPG dataset. It renders circles encoding horsepower, miles per gallon, origin, and weight, with tooltips showing car names. The visualization is built programmatically with `vl.markCircle` and `.encode`, powered by D3’s `csv` for data loading and Vega-Lite’s `config` for customized axis and label styling. A Vega Tooltip handler enables 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 uses the Vega-Lite API to create a scatter plot of the Auto MPG Data Set from the UCI Machine Learning Repository, loaded via D3’s `csv` function. The visualization renders circles encoding weight on the x-axis, horsepower on the y-axis, and a color scale for weight, with a tooltip displaying vehicle names. It demonstrates the declarative `vl` API, combining `markCircle`, `encode`, and configurable axes, while leveraging Vega, Vega-Lite, and Vega-Tooltip for interactive rendering. The chart fills the window and adapts to its size.

MManon ROMAIN

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to render an interactive scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository, displaying vehicle weight against horsepower with points colored by origin and sized by weight. A tooltip reveals the car’s name on hover. The code builds the visualization declaratively via `vl.markCircle`, `vl.encode`, and field mappings, then registers Vega-Lite with vega and vega-lite-api, using d3’s `csv` loader for data retrieval and custom configuration for styling axes and labels.

Mmaker57sk

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to render a scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository. The visualization encodes miles per gallon on the x-axis, horsepower on the y-axis, and uses both color (by origin) and size (by weight) as additional dimensions. Built with the vega-lite-api library version 0.1.0, it registers Vega and Vega-Lite, and includes a tooltip handler from vega-tooltip to display car names. The code uses `vl.markCircle`, `vl.x().fieldQ('mpg')`, and `vl.y().fieldQ('horsepower')` for the encoding, with data loaded asynchronously via d3’s `csv` function.

DDor Peled

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to create an interactive scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository. The visualization maps miles per gallon to the x-axis, horsepower to the y-axis, and encodes origin as color while weight drives circle size. Tooltips display car names on hover. The code registers Vega, Vega-Lite, and Vega-Tooltip through `vl.register`, then loads CSV data asynchronously with `d3.csv`. Rendering uses a fit-to-window SVG view with custom axis and label styling from a shared config object.

CCaleb Crum

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization presents a scatter plot of automotive data from the UCI Auto MPG dataset, graphing miles per gallon against horsepower. Each circle’s size encodes acceleration, while tooltips reveal the car’s name. The example demonstrates the Vega-Lite API workflow, using `vl.markCircle` with field encodings for quantitative axes and an opacity adjustment for overlapping points. The code builds the chart by processing CSV data via `d3.csv`, configuring axis styling through Vega-Lite’s `config`, and rendering with the vega-lite-api library alongside vega-tooltip for interactive hover details.

IIsar Ramses

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API and D3 to render an interactive scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository. The visualization shows miles per gallon against horsepower, with color encoding for origin and point size representing vehicle weight. Hovering over a point reveals the car’s name via a tooltip. The code constructs the chart declaratively with `vl` from vega-lite-api, loads data using `d3.csv`, and renders to SVG with vega-lite and vega-tooltip.

Rrmgoldberg24

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to create an interactive scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository. Each circle represents a vehicle, with horsepower on the y-axis, miles per gallon on the x-axis, weight mapped to circle size, and origin mapped to color. Tooltips reveal each car’s name. The code registers Vega-Lite with D3.js v5 for data loading via `d3.csv`, and customizes axis and label styling through a config object.

UUdoekpo Stephen

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

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.

Iisavedalex

94% match