Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Apr 23, 2022

Created on Apr 23, 2022

This example shows a scatter plot of Auto MPG data, where each point represents a car with its miles per gallon on the x-axis, horsepower on the y-axis, and weight encoded by point size. The color distinguishes the car’s origin. The visualization is built using the Vega-Lite API, which programmatically constructs a specification that renders to SVG via Vega and Vega-Lite. Data is loaded asynchronously from a CSV URL using d3.csv. Interactive tooltips display car names, and custom configuration adjusts axis and label styling.

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 displays a scatter plot of Auto MPG data, with weight on the x-axis, horsepower on the y-axis, and color encoding the origin of each car. Point size represents miles per gallon, with tooltips showing car names. It uses the Vega-Lite API to construct the chart, which is rendered with Vega and Vega-Lite, while D3 fetches the CSV data. The visualization is configured for full-window display and includes custom styling for axes and labels.

Vvedanth bora

97% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a scatter plot of auto MPG data, encoding miles per gallon on the x-axis, horsepower on the y-axis, and using color for the car’s origin and size for weight, with tooltips revealing car names. The visualization is built with the Vega-Lite API, which compiles specifications to Vega, and rendered via D3 v5. It loads CSV data from the UCI Machine Learning Repository and customizes axis and label styling through a configuration object.

Ddimanya

97% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatter plot of the Auto MPG dataset, mapping fuel efficiency against horsepower with points colored by origin and sized by vehicle weight. The visualization is built using the Vega-Lite API, which registers with Vega and Vega-Lite to compile specifications, and uses D3’s `csv` loader to fetch the data. The chart is rendered as an SVG, with a custom configuration for axes and labels, and includes an interactive tooltip showing the vehicle name via the Vega Tooltip library.

Mmagnushaese

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example demonstrates a scatter plot of automobile data, mapping miles per gallon and horsepower with point size reflecting mpg and color indicating origin. The visualization uses the Vega-Lite API to declare the chart specification, with D3.js loading the CSV dataset from a GitHub gist. Rendering is handled by Vega and Vega-Lite, while Vega Tooltip provides interactive hover details. The chart fills the viewport, and custom axis, label, and title styling improve readability against the dark text on a light background.

MMalcolm Mead

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a scatter plot of auto-mpg data from the UCI Machine Learning Repository, plotting miles per gallon against horsepower with points colored by origin and sized by weight. The visualization is built using the Vega-Lite API, which registers Vega and Vega-Lite libraries and renders to SVG. Data is loaded asynchronously via d3.csv, and the chart encodes tooltips for vehicle names. The code customizes axis and font styles through a config file, demonstrating programmatic chart creation with the vega-lite-api wrapper.

Hhbatteram

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatter plot of automobile data, with horsepower on the y-axis and weight on the x-axis. Each point represents a vehicle, colored by its origin and sized according to miles per gallon, with a tooltip showing the car’s name. Built using the Vega-Lite API running on D3.js, it loads a CSV from a GitHub gist and renders into a full-window SVG with custom axis styling and tooltip configuration from Vega Tooltip.

Dducan114

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example presents an interactive scatter plot of the Auto MPG dataset, using circle marks to show the relationship between miles per gallon and horsepower. Point color encodes the country of origin, while size maps to vehicle weight. Built with the Vega-Lite API, the visualization loads data via D3’s `csv` function and renders to SVG. The code configures the chart’s dimensions and appearance through a custom config object, and tooltips are enabled via the Vega Tooltip handler.

Ggzm17

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the classic Auto MPG dataset as an interactive scatter plot, encoding miles per gallon on the x-axis, horsepower on the y-axis, and using color and size to represent the car’s origin and weight. Built with the Vega-Lite API, it registers Vega, Vega-Lite, and Vega-Tooltip to render an SVG chart that fills the browser window. The code loads CSV data via `d3.csv`, applies custom axis and label styling from a configuration object, and uses mark-circle encodings with tooltips to show vehicle names on hover.

PPirialMersus

95% match