Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Mar 24, 2021

Created on Mar 19, 2021

This example visualizes automobile performance data from the UCI Auto MPG dataset, mapping model year on the x-axis, horsepower on the y-axis, and color-coding points by country of origin while sizing them by weight. The visualization is built using the Vega-Lite API, which registers with Vega and Vega-Lite, and renders as an SVG. It loads data via `d3.csv`, applies custom axis and label styling from a config object, and includes tooltips that display all data attributes on hover. The chart automatically fits the browser window dimensions.

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 automobile data from the UCI Machine Learning Repository’s Auto MPG dataset, plotting each car’s country of origin on the x-axis against its horsepower on the y-axis using semi-transparent, oversized circular marks. The chart is built with the Vega-Lite API, registered and rendered through Vega and Vega-Lite, with tooltips provided by Vega-Tooltip. Data is loaded asynchronously via d3.csv, and the visualization is styled with custom axis and label configurations defined in a separate config.js file, resulting in a clean, full-screen scatter plot.

Jjjacobatandover

95% 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 horsepower against its miles-per-gallon. Points are colored by country of origin, with size encoded by vehicle weight, and tooltips reveal the car’s name. The visualization is built using the Vega-Lite API (vl) with a custom config for axis styling, and rendered dynamically to fit the browser window. Data is loaded asynchronously via d3.csv, while Vega, Vega-Lite, and Vega-Embed handle the chart specification and SVG rendering.

VVilmer98

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository, plotting vehicle fuel efficiency (mpg) against horsepower with points colored by country of origin and sized by vehicle weight. The chart is built using the Vega-Lite API, which registers Vega and Vega-Lite libraries to render an SVG view. Data is loaded asynchronously via d3.csv, and the visualization encodes quantitative x- and y-fields, a nominal color field, and tooltips showing car names. The implementation includes custom axis styling and tooltip configuration for readability across the full browser window.

YYi-Qing

94% 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 positioned by horsepower and miles per gallon, colored by country of origin, and sized by vehicle weight. Hovering over a circle reveals the car’s name via a tooltip. The visualization is built using the Vega-Lite API, which registers Vega and Vega-Lite specifications through JavaScript code, with the data loaded via `d3.csv`. The chart uses an SVG renderer and applies custom axis and label styling from a configuration object.

YYedrup

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository as a scatter plot, encoding miles per gallon on the x-axis, horsepower on the y-axis, and vehicle origin as color, with point size reflecting weight. It uses the Vega-Lite API to declare the chart specification programmatically, registering it with Vega and Vega-Lite for rendering in SVG. The code also imports the dataset via d3.csv, applies custom axis and label styling through a config object, and enables interactive tooltips using the vega-tooltip Handler. The visualization auto-fits to the browser window dimensions.

Vvvs1680

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes car performance data from the auto-mpg dataset, plotting horsepower against miles per gallon and coloring points by country of origin. The visualization uses the Vega-Lite API to define a scatter plot with circles, where both color and size encode variables, and tooltips display car names. It loads data via d3.csv, configures a dark theme with custom axis styling, and renders the chart as SVG using Vega-Lite’s vega-lite-api library, integrated with vega-tooltip for interactive hover details.

AasafJortilles

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

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes automobile characteristics from the auto-mpg CSV dataset using the Vega-Lite API. It plots weight against horsepower as a scatter plot, with circle size encoding miles per gallon and color encoding country of origin, plus tooltips showing vehicle names. The code registers Vega-Lite with Vega, uses d3.csv for data loading, and applies a custom configuration for axis styling and typography. The visualization renders as SVG, sized to fit the browser window, with a semi-transparent fill and opacity adjustments for readability.

AAoibhinnRed

93% match