Fork of Vega-Lite API2026

100%

Fork of Vega-Lite API2026

✓ Published0🌍 Public

Last edited Feb 16, 2026

Created on Feb 16, 2026

This example uses a scatter plot to visualize relationships in the auto-mpg dataset, showing miles per gallon against horsepower with points colored by origin and sized by weight. The visualization is built using the Vega-Lite API for declarative specification, with data loaded via d3.csv. The chart leverages vega-lite-api’s chained methods for encoding, and integrates vega-tooltip for interactive hover details. The rendering uses the Vega view with SVG output, configured with custom styling for axis labels and titles.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to create a scatter plot of the auto-mpg dataset, showing the relationship between miles per gallon and horsepower, with color encoding by origin and size by horsepower. The visualization renders as an SVG, leveraging D3 and Vega-Lite for chart construction and encoding, and uses Vega-Tooltip for interactive data tooltips. The plot is configured for automatic resizing and includes custom axis styling for improved readability.

RRupendra Pamisetty

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatter plot of the Auto MPG dataset, mapping fuel efficiency against horsepower with points colored by origin and sized by vehicle weight. The visualization is built using the Vega-Lite API, which registers with Vega and Vega-Lite to compile specifications, and uses D3’s `csv` loader to fetch the data. The chart is rendered as an SVG, with a custom configuration for axes and labels, and includes an interactive tooltip showing the vehicle name via the Vega Tooltip library.

Mmagnushaese

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

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

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatter plot of Auto MPG data, with weight on the x-axis, horsepower on the y-axis, and color encoding the origin of each car. Point size represents miles per gallon, with tooltips showing car names. It uses the Vega-Lite API to construct the chart, which is rendered with Vega and Vega-Lite, while D3 fetches the CSV data. The visualization is configured for full-window display and includes custom styling for axes and labels.

Vvedanth bora

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to render a scatter plot of the Auto MPG dataset, showing the relationship between miles per gallon and horsepower for various car models. Points are colored by origin and sized by weight, with tooltips revealing the car name. The visualization is created programmatically using `vl.markCircle` and `vl.encode`, with data loaded via D3’s `csv` function. The view is fitted to the window size and styled using custom Vega-Lite configuration, relying on the Vega, Vega-Lite, and Vega-Tooltip libraries.

MMohammad jahangir alam

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization uses a scatter plot to display the relationship between miles per gallon and horsepower for vehicles from the Auto MPG dataset, with color indicating origin and dot size representing weight. Built with the Vega-Lite API, it loads data via `d3.csv` from a remote URL and uses custom configuration for axis styling. The visualization also incorporates the `vega-tooltip` handler for interactive hover details, and the chart automatically fits the browser window dimensions.

SShasvathan Pathmanaban

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example demonstrates a scatter plot of automobile data, mapping miles per gallon and horsepower with point size reflecting mpg and color indicating origin. The visualization uses the Vega-Lite API to declare the chart specification, with D3.js loading the CSV dataset from a GitHub gist. Rendering is handled by Vega and Vega-Lite, while Vega Tooltip provides interactive hover details. The chart fills the viewport, and custom axis, label, and title styling improve readability against the dark text on a light background.

MMalcolm Mead

94% match