Vega-Lite API Template 9

100%

Vega-Lite API Template 9

✓ Published2🌍 Public

Last edited Nov 23, 2021

Created on Oct 12, 2021

This example pairs a large scatter plot of Auto MPG data with a smaller navigator chart, both built using the Vega-Lite API and rendered with D3’s SVG support. The main view encodes horsepower and acceleration on x and y axes, colored by vehicle class, while the navigator repeats the same encoding across a grid of attribute pairs from the dataset. The code registers Vega-Lite with vega-tooltip for interactivity, loads data via `d3.csv`, and applies separate appearance configurations for each chart.

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 10

This visualization uses the Vega-Lite API with D3 to display a scatter plot of Auto MPG data from the UCI Machine Learning Repository, encoding horsepower and acceleration on the axes while coloring points by vehicle class. A second miniature chart, generated with repeated row and column facets, serves as a navigation overview. The code customizes axes and label styling through separate config objects and fetches data via D3’s CSV loader. Both charts are rendered as SVG using Vega-Lite’s API.

OOleJRask

93% match

Loading thumbnail…

Vega-Lite API Template

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.

CCurran Kelleher

91% match

Loading thumbnail…

Vega-Lite API Template II

This example displays a scatter plot of the auto-mpg dataset, mapping engine displacement on the x-axis and horsepower on the y-axis, with vehicle names shown via tooltips. The visualization is built entirely through the Vega-Lite API in JavaScript, using `vl.markPoint` with opacity to show data density. It loads CSV data via D3’s `csv` function, configures axis and label styling in a separate `config.js`, and renders with Vega 5 and Vega-Lite 4. The chart auto-sizes to the window and uses the Vega Tooltip handler for interactive hover details.

NNelson M

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

90% match

Loading thumbnail…

Vega-Lite API Template

This example demonstrates a scatter plot of automobile data, mapping engine displacement on the x-axis and horsepower on the y-axis, with tooltips revealing each vehicle’s name. It uses the Vega-Lite API to declaratively define the marks and encodings, registering with Vega and Vega-Lite for rendering as SVG. Data is loaded asynchronously from a CSV file via d3.csv, while the chart’s size adapts to the browser window. Configuration customizes axis and label styling, and Vega-Tooltip provides interactive hover information.

Llaplantalaplanta

90% match

Loading thumbnail…

Vega-Lite API Template

This example uses the Vega-Lite API to create an interactive scatter plot of the UCI Auto MPG dataset, mapping miles per gallon, horsepower, weight, and origin to the x-axis, y-axis, size, and color channels respectively. The visualization is rendered in SVG via Vega and Vega-Lite, with a tooltip showing car names. The code registers the vega-lite-api with a custom tooltip handler, loads data asynchronously using d3.csv, and applies a shared config for axis and label styling. The chart fits the full window and uses a dark color scheme.

Rrobin88824

90% match

Loading thumbnail…

Vega-Lite API

This example demonstrates a scatter plot of automobile data, showing the relationship between miles per gallon and horsepower, with tooltips displaying vehicle names. The visualization is built using the vega-lite-api library, which provides a fluent JavaScript interface for the Vega-Lite grammar. The code registers Vega and Vega-Lite, loads the auto-mpg dataset from a CSV file via d3.csv, and renders the plot as a scalable vector graphic. The visualization fills the entire browser window and employs a dark-themed configuration to enhance readability, with a low opacity mark size for improved depth perception.

KKelly Egan

90% match

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

90% match