Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Mar 11, 2021

Created on Mar 11, 2021

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.

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 presents a scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository, showing the relationship between miles per gallon, horsepower, weight, and origin. The visualization uses the Vega-Lite API with d3.csv for data loading, and configures an SVG renderer with a custom dark theme. It encodes x, y, color, size, and tooltip channels through the vl.markCircle and vl.encode methods, with vega-tooltip handling interactive hover details. The chart automatically resizes to fill the viewport.

Vvarmps

97% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example presents a scatter plot of automobile data from the UCI Machine Learning Repository, showing the relationship between MPG and horsepower. Each point is colored by origin, sized by weight, and includes a tooltip revealing the vehicle name. The visualization uses the Vega-Lite API, registered with Vega and Vega-Lite, to declaratively encode the marks. Data is loaded asynchronously via D3's `csv` function, and the chart is rendered with a custom configuration that adjusts axis and label styling.

Mme-as-a-web-designer

97% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a scatter plot of automotive data from the UCI Machine Learning Repository’s Auto MPG dataset, visualizing miles per gallon against horsepower. Each point is colored by origin and sized by vehicle weight, with tooltips revealing car names. The visualization uses the Vega-Lite API to declaratively define the chart, which is embedded via vega, vega-lite, and vega-tooltip. Data loading relies on d3.csv, while custom axis and label styling are applied through a Vega-Lite config object.

MMohammadSorkhian

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

96% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to build an interactive scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository, sourced via a Gist. The visualization encodes miles per gallon on the x-axis, horsepower on the y-axis, and colors points by origin, while point size reflects vehicle weight. It renders as a full-window SVG using the vega-lite-api library, with tooltips generated through vega-tooltip. Custom configuration in config.js adjusts axis and label styling for readability. The code loads data asynchronously via d3.csv, applies a dark theme, and fits the chart to the viewport dimensions.

MMatt Woods

96% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization shows a scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository, encoding engine horsepower on the y-axis, miles per gallon on the x-axis, and using color to distinguish the vehicle origin with point size mapped to weight. The code builds the chart using the Vega-Lite API, registering Vega and Vega-Lite libraries alongside a tooltip handler. Data is loaded asynchronously via d3.csv, and the chart is rendered as an SVG that automatically fits the browser window, with custom axis and label styling defined in a separate config file.

SSkye Chen

96% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example demonstrates a scatter plot of automobile data from the UCI Machine Learning Repository, encoding vehicle weight on the x-axis, horsepower on the y-axis, and miles per gallon as both point size and color. The visualization is constructed programmatically using the Vega-Lite API, which builds a specification rendered as an SVG. The code imports data via D3’s CSV loader and registers Vega-Lite with custom tooltip handling from the Vega-Tooltip library. Axis styling is customized through a configuration object to improve readability.

TTyler Durham

96% match

Loading thumbnail…

Fork of 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. The visualization maps miles per gallon on the x-axis, horsepower on the y-axis, and encodes the car’s origin in color and weight in point size, with tooltips showing the vehicle name. Built with d3.csv for data loading and vega-tooltip for hover details, all marks are drawn as circles with opacity. The chart’s appearance is customized via a Vega-Lite config object, adjusting axis styles and typography for readability.

CCheng Tang

96% match