Vega-Lite API Template

100%

Vega-Lite API Template

✓ Published541🌍 Public

Last edited Oct 22, 2021

Created on Sep 2, 2019

This example displays a scatter plot of auto-mpg data, encoding horsepower, weight, and origin. A circle mark uses quantitative axes for mpg and horsepower, color by origin, and size by weight. It features a tooltip for vehicle names. Built with the Vega-Lite API, it renders an SVG chart using vega-lite-api, vega, vega-lite, and d3.csv, with custom styling via a config object. The data comes from the UCI Machine Learning Repository Auto MPG dataset, loaded asynchronously and displayed with interactive tooltips.

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…

Vega-Lite API Template

This example demonstrates a scatter plot of auto MPG data, showing miles per gallon versus horsepower, with points colored by origin and sized by vehicle weight. The visualization is built using the Vega-Lite API, which is registered with Vega and Vega-Lite, and rendered as SVG. Data is loaded via d3.csv from a Gist hosting the UCI Machine Learning Repository’s Auto MPG dataset. Interactive tooltips display car names, with layout and axis styling configured through a custom config object.

CCeciliaW888

96% match

Loading thumbnail…

Vega-Lite API Template

This example shows a scatter plot of auto-mpg data, mapping miles per gallon against horsepower, with color encoding for country of origin and point size for vehicle weight. Tooltips reveal car names on hover. The visualization is built using the vega-lite-api library, which wraps Vega-Lite specifications programmatically, with data loaded via d3.csv from the UCI Machine Learning Repository. It renders as an SVG through Vega, with a custom configuration for axis styling and tooltip interactions.

CCees Klap

96% match

Loading thumbnail…

Vega-Lite API Template

This example uses the Vega-Lite API to render an interactive scatter plot of automobile data from the UCI Auto MPG dataset, loaded via d3.csv. A circle mark encodes origin on the x-axis, horsepower on the y-axis, weight as color, and mpg as size, with tooltips showing car names. The visualization leverages vega-lite-api’s fluent interface, registered with vega and vega-lite, and includes vega-tooltip for interactivity. A custom config adjusts axis, label, and title styling for readability, while the chart fits the window using autosize and SVG rendering.

JjohnmurphyLC

95% match

Loading thumbnail…

Vega-Lite API Template

A scatter plot displays automobile origin, horsepower, and weight, with each point sized and colored by weight and tooltips revealing model names. The visualization uses the Vega-Lite API (`vl.markCircle`, `vl.x().fieldN`, `vl.y().fieldQ`) to construct a declarative spec, rendered as SVG via Vega-Lite and Vega. Data loads from a CSV of the Auto MPG dataset, and a custom config adjusts axis styling and font sizes. The example demonstrates programmatic chart building, programmatic width/height fitting, and tooltip integration via the `vega-tooltip` Handler.

Mmiklud

95% match

Loading thumbnail…

Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository as a scatter plot, mapping miles per gallon, horsepower, origin, weight, and car name to the x-axis, y-axis, color, size, and tooltip channels. It uses the Vega-Lite API to construct the specification programmatically, with Vega and Vega-Lite for rendering and Vega-Tooltip for interactive hover details. Data is loaded via d3.csv, and the chart fills the browser window with a custom configuration for font sizes and axis styling.

AAmine HAMOU

95% match

Loading thumbnail…

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. It maps miles per gallon on the x-axis, horsepower on the y-axis, vehicle origin to color, and weight to point size, with tooltips showing car names. The visualization is built programmatically via `vl.markCircle` and `vl.encode` methods, then rendered as SVG using the Vega and Vega-Lite libraries with a custom config for larger fonts and a dark color scheme. Data is loaded asynchronously using `d3.csv` from a remote gist.

Hhuashe418

95% match

Loading thumbnail…

Vega-Lite API Template

This example presents a scatter plot of automobile data from the UCI Machine Learning Repository’s Auto MPG dataset, showing relationships between miles per gallon, horsepower, weight, and country of origin. The visualization is built using the Vega-Lite API (`vl.markCircle`, `vl.encode`) in a JavaScript framework, with data loading handled by `d3.csv` from D3 v7. The code registers Vega-Lite and Vega, applies custom axis styling from `config.js`, and renders a responsive SVG chart that fills the browser window with tooltips enabled via the Vega Tooltip handler.

OOleg Zhernovoy

95% match

Loading thumbnail…

Vega-Lite API Template

This interactive scatter plot visualizes automotive data from the UCI Machine Learning Repository, showing the relationship between fuel efficiency (mpg) and horsepower while encoding car origin by color and weight by circle size. Hovering reveals the vehicle name via tooltips. Built with the Vega-Lite API, the visualization chains declarative specifications programmatically, registering Vega-Lite and Vega with the vega-lite-api library. The code customizes axis styling through a shared config object, loads data via d3.csv, and renders to an SVG using Vega’s renderer with automatic window sizing.

GGang Chen

95% match