Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Sep 15, 2021

Created on Sep 15, 2021

This example demonstrates a scatter plot of U.S. city fuel efficiency data from the UCI Machine Learning Repository's Auto MPG dataset, encoding vehicle weight as point size and color by country of origin against highway miles per gallon and horsepower. The visualization uses the Vega-Lite grammar via the vega-lite-api JavaScript library, which wraps Vega-Lite specifications for programmatic chart construction. The code pulls CSV data using d3.csv, then renders the interactive SVG chart with tooltip support through vega-tooltip, customizing axis and label styling through a configuration object. The visualization is built with Vega 5 and Vega-Lite 4, running in a browser with automatic width and height fitting to the viewport.

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 interactive scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, mapping fuel efficiency against horsepower, with color by origin and point size by weight. It uses the Vega-Lite API to declaratively define the visualization, with D3.js loading the CSV data. The example demonstrates integrating Vega-Lite's high-level grammar with a custom configuration for improved readability, including styled axes and labels, and fits the chart responsively to the full viewport while enabling tooltips through Vega Tooltip.

SSemyon

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository, showing vehicle fuel efficiency against horsepower. Each circle’s size encodes vehicle weight and its color represents the country of origin, with tooltips revealing the car model name. The visualization is built using the Vega-Lite API, which compiles specifications into Vega and renders with D3. Data is fetched as CSV via D3’s `csv` function, and styling customizes axis labels and titles for readability.

Sseitzfab

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example presents an interactive scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository, showing vehicle fuel efficiency against horsepower. Each point encodes the car’s country of origin by color and its weight by size, with tooltips revealing the model name. The visualization is built using the Vega-Lite API, registered with Vega and Vega-Lite libraries, and renders as an SVG. Data is loaded asynchronously via d3.csv, while the Vega Tooltip handler enables interactive inspection of individual data points.

Ppakoensi

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example presents an interactive scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository, visualizing relationships between fuel efficiency, horsepower, vehicle weight, and country of origin. Each circle’s position maps to miles per gallon and horsepower, while size encodes weight and color distinguishes origin, with tooltips revealing car names. Built with the Vega-Lite API, it registers Vega, Vega-Lite, and Vega-Tooltip through D3’s CSV loader for data retrieval, then renders a fit-sized SVG view with custom styling for readability.

SSepehr Roshanpour

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

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes automobile fuel efficiency and performance data from the UCI Auto MPG dataset. A scatter plot shows each car’s miles per gallon against its horsepower, with color encoding country of origin and point size reflecting vehicle weight. Hovering reveals the car’s name via tooltip. The visualization is built with the Vega-Lite API, wrapping the Vega-Lite declarative grammar, and renders through Vega with an SVG renderer, using D3 for CSV data loading and Vega-Tooltip for interactions.

Mm. scott veach

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

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

93% match