Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Nov 13, 2021

Created on Nov 13, 2021

This example demonstrates a scatter plot of automobile data from the UCI Auto MPG dataset, where each point represents a car, with horsepower on both axes, color encoding region of origin, and size encoding vehicle weight. Hovering reveals the car name via tooltips. The visualization is built using the Vega-Lite API and rendered with D3.js, incorporating custom axis styling and a dark color scheme from the configuration file. Data is loaded asynchronously via D3’s CSV parser, and the chart is displayed across the full window with automatic resizing.

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

96% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a scatter plot of auto MPG data, encoding miles per gallon on the x-axis, horsepower on the y-axis, and using color for the car’s origin and size for weight, with tooltips revealing car names. The visualization is built with the Vega-Lite API, which compiles specifications to Vega, and rendered via D3 v5. It loads CSV data from the UCI Machine Learning Repository and customizes axis and label styling through a configuration object.

Ddimanya

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

95% match

Loading thumbnail…

Fork of Vega-Lite API Template 2

This example uses the Vega-Lite API to render an interactive scatter plot of automobile data from the UCI Machine Learning Repository’s Auto MPG dataset. The visualization encodes miles per gallon on the x-axis, horsepower on the y-axis, and uses both color (by origin) and size (by weight) to reveal patterns among vehicles. Built with vega-lite-api, it includes tooltips showing car names and configures axis styles for readability. The code loads data via d3.csv, renders the chart as SVG, and supports hover interactions through vega-tooltip.

Ggayatrisridhar

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

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a scatterplot of automobile data, plotting horsepower against model year, with points colored by vehicle weight and labeled interactively via tooltips. The visualization is constructed declaratively using the Vega-Lite API (vl) and rendered with Vega, while D3 is used to load the CSV dataset from a GitHub gist. The code applies custom configuration for axis styling and tooltip appearance, then dynamically sizes the chart to the full window. It demonstrates integrating Vega-Lite’s high-level grammar with D3’s data fetching capabilities.

PPaweł Oleniak

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a scatter plot of Auto MPG data, where each point represents a car with its miles per gallon on the x-axis, horsepower on the y-axis, and weight encoded by point size. The color distinguishes the car’s origin. The visualization is built using the Vega-Lite API, which programmatically constructs a specification that renders to SVG via Vega and Vega-Lite. Data is loaded asynchronously from a CSV URL using d3.csv. Interactive tooltips display car names, and custom configuration adjusts axis and label styling.

JJoseph Bermudez

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

94% match