Vega-Lite API Template

100%

Vega-Lite API Template

✓ Published0🌍 Public

Last edited Oct 21, 2023

Created on Oct 21, 2023

This visualization displays the relationship between miles per gallon, horsepower, and model year for vehicles in the Auto MPG dataset from the UCI Machine Learning Repository. Using the Vega-Lite API, it renders a scatter plot where circle size encodes year and color encodes mpg. The code registers Vega-Lite with Vega, applies a custom configuration for axis styling, and loads the data via d3.csv. The rendering is fitted to the browser window with an SVG output.

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

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

Loading thumbnail…

Vega-Lite API Template

This gallery example demonstrates relationships among vehicle attributes in the Auto MPG dataset from the UCI Machine Learning Repository. A scatter plot displays miles per gallon on the x-axis and horsepower on the y-axis, with circles colored by country of origin and sized by vehicle weight. The visualization is built using the Vega-Lite API, which is registered with Vega and Vega-Lite libraries, and renders to SVG. Data loading uses d3.csv, while the vega-tooltip Handler enables interactive hover details showing the car model name.

EElvira Nassirova

93% match

Loading thumbnail…

Vega-Lite API Template

This example visualizes automobile data from the UCI Machine Learning Repository’s Auto MPG dataset, plotting horsepower against miles per gallon. Points are colored by origin and sized by vehicle weight, with tooltips revealing model names. The visualization uses the Vega-Lite API, a JavaScript wrapper for Vega-Lite specifications, registered with Vega and Vega-Lite libraries, plus D3’s `csv` loader for data ingestion. Rendering occurs as an SVG via the `markCircle` and `encode` API methods, with custom axis styling from a config object.

Jjuanmy400

92% match

Loading thumbnail…

Vega-Lite API Template

This example demonstrates a scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository, visualizing the relationship between fuel efficiency (miles per gallon) and horsepower. Points are colored by region of origin, sized by vehicle weight, and include tooltips showing model names. The visualization is built using the Vega-Lite API, which programmatically constructs a Vega-Lite specification, then renders it with Vega 5 and D3 v5 for SVG output. Custom configuration and a Vega Tooltip handler enhance readability, while the chart automatically fits the viewport dimensions.

Rrvdv

92% match

Loading thumbnail…

Vega-Lite Iteration

This visualization displays a scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository, mapping miles per gallon against horsepower while encoding vehicle origin by color and weight by point size. Built using the Vega-Lite API, it registers handlers through `vega`, `vega-lite`, and `vega-tooltip` to render interactive SVG graphics with hover tooltips. The code loads CSV data with `d3.csv`, applies a custom configuration for axis styling, and dynamically sizes the chart to fit the window dimensions.

CChris Briggs

92% match

Loading thumbnail…

Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository as a scatter plot, mapping miles per gallon, horsepower, origin, weight, and car name to the x-axis, y-axis, color, size, and tooltip channels. It uses the Vega-Lite API to construct the specification programmatically, with Vega and Vega-Lite for rendering and Vega-Tooltip for interactive hover details. Data is loaded via d3.csv, and the chart fills the browser window with a custom configuration for font sizes and axis styling.

AAmine HAMOU

92% match

Loading thumbnail…

Vega-Lite API Template

This visualization displays a scatter plot of vehicle fuel efficiency data from the UCI Auto MPG dataset, with horsepower on the y-axis, miles per gallon on the x-axis, and points colored by origin while sized by weight. It is built using the Vega-Lite API, which programmatically constructs Vega-Lite specifications, and renders through the Vega and Vega-Lite libraries. The code loads CSV data with d3.csv, applies custom axis and label styling from a config object, and renders an interactive SVG view with tooltips via vega-tooltip.

GGenpinZ

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

92% match