Vega-Lite API test

100%

Vega-Lite API test

✓ Published0🌍 Public

Last edited Jun 1, 2022

Created on Jun 1, 2022

This example visualizes the relationship between fuel efficiency (mpg), horsepower, weight, and origin using the Auto MPG dataset from the UCI Machine Learning Repository. A scatter plot displays each car as a circle, with position encoding mpg and horsepower, color indicating origin, and size mapping to weight. Hovering reveals the car name via tooltip. Built with the Vega-Lite API, the code registers vega and vega-lite, configures SVG rendering, and customizes axis and label styling through a configuration object. Data is loaded asynchronously via d3.csv from a Gist, with the visualization sized to fit 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…

Vega-Lite API Template

This example visualizes the relationship between fuel efficiency, horsepower, weight, and origin for vehicles from the Auto MPG dataset. It displays a scatter plot of mpg against horsepower, with point size encoding weight and color distinguishing vehicle origin. The visualization is built using the Vega-Lite API, which wraps Vega-Lite and Vega in a JavaScript interface, combined with d3.csv for data loading from a Gist-hosted CSV file. A custom tooltip from vega-tooltip displays the vehicle name, while the chart autosizes to fill the browser window.

Llakalia@wpi.edu

95% match

Loading thumbnail…

Vega-Lite API Template

This example visualizes the relationship between fuel efficiency (mpg), horsepower, weight, and country of origin for cars from the UCI Machine Learning Repository’s Auto MPG dataset. It uses the Vega-Lite API to compose a scatter plot with colored points by origin, sized by weight, and includes tooltips showing car names. The code registers the API with Vega and Vega-Lite, then fetches CSV data via D3’s `csv` method, applying a custom dark theme for readability. The view renders to SVG and fits the window dimensions.

Zzhangwbhi

94% match

Loading thumbnail…

Vega-Lite API Template

This example visualizes the relationship between fuel efficiency (mpg), horsepower, weight, and country of origin for automobiles from the UCI Machine Learning Repository Auto MPG dataset. It displays a scatter plot where each circle’s position encodes mpg and horsepower, color encodes origin, and size encodes weight. The code uses the Vega-Lite API to build the chart declaratively, with the `vl.markCircle`, `vl.x()`, `vl.y()`, and `vl.color()` methods. It loads CSV data via D3’s `csv` function, registers Vega-Lite components, and renders an interactive SVG with tooltips.

NNelson M

94% match

Loading thumbnail…

Vega-Lite API Template

This interactive scatter plot visualizes automotive data from the UCI Machine Learning Repository, showing the relationship between fuel efficiency (mpg) and horsepower while encoding car origin by color and weight by circle size. Hovering reveals the vehicle name via tooltips. Built with the Vega-Lite API, the visualization chains declarative specifications programmatically, registering Vega-Lite and Vega with the vega-lite-api library. The code customizes axis styling through a shared config object, loads data via d3.csv, and renders to an SVG using Vega’s renderer with automatic window sizing.

GGang Chen

94% match

Loading thumbnail…

Vega-Lite API Template

This example visualizes automobile fuel efficiency and performance data from the UCI Auto MPG dataset, plotting horsepower against miles per gallon with circle size encoding vehicle weight and color encoding country of origin. The visualization is built programmatically using the Vega-Lite API, which registers Vega and Vega-Lite libraries, configures a tooltip handler, and loads CSV data via d3.csv. It generates an interactive SVG scatter plot with custom axis styling, and the view auto-fits to the browser window dimensions.

EEFezerKW

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

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

93% match

Loading thumbnail…

Vega-Lite API

This visualization shows the relationship between miles per gallon and horsepower for cars from the UCI Auto MPG dataset, with points colored by origin and sized by horsepower. It uses the Vega-Lite API to construct a scatter plot with circle marks, encoding tooltips for car names. The code registers vega, vega-lite, and vega-lite-api with a tooltip handler, loads data via d3.csv, and renders an SVG chart that fits the window size. Custom axis and label styling are applied through a configuration object.

DDavid

93% match