Skip to main content
SimilarExport ZIP
100%

Fork of Vega-Lite API Template

✓ Published1🌍 Public
AArookie-2020
Last edited Jul 17, 2021
Created on Jul 17, 2021

This fork of the Vega-Lite API Template presents an interactive scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository, sourced via a GitHub Gist. The visualization shows vehicle fuel efficiency (mpg) against horsepower, with color encoding by country of origin and point size encoding weight, plus tooltips displaying car names. Built with the Vega-Lite API (vl), it registers Vega and Vega-Lite for rendering, uses d3.csv to load data, and applies custom axis and label styling from a config file. The chart auto-fits to the browser viewport with an SVG renderer and integrates vega-tooltip for hover interactions.

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 visualization displays an interactive scatter plot of the Auto MPG dataset, plotting miles per gallon against horsepower while encoding vehicle origin by color and weight by point size. Built with the Vega-Lite API, it combines vega, vega-lite, vega-tooltip, and d3.csv for data loading. The code configures axis styling, applies a responsive fit to the window, and uses interactive tooltips showing vehicle names. Data comes from the UCI Machine Learning Repository via a GitHub gist.

Cchar0496
95% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example presents an interactive scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository, showing vehicle fuel efficiency against horsepower. Each point encodes the car’s country of origin by color and its weight by size, with tooltips revealing the model name. The visualization is built using the Vega-Lite API, registered with Vega and Vega-Lite libraries, and renders as an SVG. Data is loaded asynchronously via d3.csv, while the Vega Tooltip handler enables interactive inspection of individual data points.

Ppakoensi
95% match
Loading thumbnail…

Fork of Vega-Lite API Template 2

This visualization presents an interactive scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository, showing vehicle fuel efficiency against horsepower, with color encoding for country of origin and size encoding for vehicle weight. Built using the Vega-Lite API in conjunction with D3 v5 and Vega-Tooltip, the visualization retrieves data via D3’s CSV loader and renders as a full-window SVG with customized axis styling and tooltips that display vehicle names on hover.

Mmuhammadshumas
95% match
Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, mapping fuel efficiency against horsepower, with color by origin and point size by weight. It uses the Vega-Lite API to declaratively define the visualization, with D3.js loading the CSV data. The example demonstrates integrating Vega-Lite's high-level grammar with a custom configuration for improved readability, including styled axes and labels, and fits the chart responsively to the full viewport while enabling tooltips through Vega Tooltip.

SSemyon
95% match
Loading thumbnail…

Fork of Vega-Lite API Template

This visualization uses a Vega-Lite API template to display an interactive scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository. The chart plots miles per gallon against horsepower, with points colored by country of origin and sized by vehicle weight. Built with the `vega-lite-api` library alongside D3.js, the visualization reads data from a CSV file and renders as an SVG. Axis labels and tick marks are styled with a custom configuration to improve readability.

AAmir
95% match
Loading thumbnail…

Fork of Vega-Lite API Template

This fork of a Vega-Lite API template displays a scatter plot of Auto MPG data from the UCI Machine Learning Repository, showing each car's miles per gallon versus horsepower. Points are colored by origin, sized by weight, and include tooltips revealing the vehicle name. The visualization uses the `vega-lite-api` and `vega-lite` libraries to define the encoding, while `d3.csv` loads the data and Vega-Tooltip provides interactive hover details. Rendering occurs as an SVG view that fills the browser window.

CChavaP06
95% match
Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, plotting fuel efficiency against horsepower. Each circle encodes vehicle origin through color and weight through size, with hover tooltips revealing model names. The visualization uses the Vega-Lite API to declaratively specify the chart, while D3.js (d3.csv) handles data loading. The code leverages vega-lite-api’s `vl` builder to chain mark and encoding specifications, with vega-tooltip providing interactive legends and tooltips.

Mmarquesjr79
94% match
Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, encoding vehicle weight as point size, origin as color, and miles per gallon against horsepower. Built with the Vega-Lite API, it registers Vega and Vega-Lite alongside the vega-tooltip Handler for hover interactions. The visualization uses a d3.csv fetch to load data, with a custom config adjusting axis styling and label fonts, and renders responsively to fit the full browser window.

DDataFeast_71
94% match