Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Oct 14, 2022

Created on Oct 14, 2022

This visualization presents a scatter plot of Auto MPG data, showing relationships between vehicle attributes through a dense cluster of points. It uses the Vega-Lite API to construct the chart, with D3.js handling data loading via `d3.csv`. The visualization features tooltips that display RGB hex values when hovering over points. The chart is rendered dynamically, adapting its size to the browser window using the `vl.width()` and `vl.height()` methods from the vega-lite-api library, and includes custom styling from the config file for improved readability.

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

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization uses the Vega-Lite API to render a scatter plot of the Auto MPG data set from the UCI Machine Learning Repository. The plot encodes miles per gallon on the x-axis, horsepower on the y-axis, and uses color for the car’s origin while point size represents weight. It loads CSV data via d3.csv and builds the chart with vl.markCircle and vl.encode. The Vega-Lite API is registered with vega, vega-lite, and vega-tooltip, and the chart is automatically fitted to the window size.

Nny2cali

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization uses the Vega-Lite API to render a scatter plot of auto-mpg data, plotting engine displacement against horsepower for individual car models. Each point is semi-transparent to reveal overlapping density, and tooltips display the vehicle name on hover. The code loads CSV data via D3’s `csv` method, customizes axis and label styling through a Vega-Lite config object, and leverages the `vega-tooltip` Handler for interactive feedback.

Mmmohatra

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

A scatter plot of the Auto MPG dataset shows vehicle time on the x-axis, miles per gallon on the y-axis, and weight encoded by color, with tooltips for temperature. The visualization is built using the Vega-Lite API, with `vl.markCircle`, `vl.x()`, `vl.y()`, and `vl.color()` to define the encoding. Data is loaded via `d3.csv` from a Gist, and the chart is rendered as an SVG with custom axis styling from a config object. Tooltips are handled by the Vega-Tooltip handler.

AAndrea Picciau

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API and D3 to render an interactive scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository. The visualization shows miles per gallon against horsepower, with color encoding for origin and point size representing vehicle weight. Hovering over a point reveals the car’s name via a tooltip. The code constructs the chart declaratively with `vl` from vega-lite-api, loads data using `d3.csv`, and renders to SVG with vega-lite and vega-tooltip.

Rrmgoldberg24

93% match

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

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

92% 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 and horsepower, with points colored by region of origin. Mouse hover reveals tooltips with vehicle names. The visualization is built using the Vega-Lite API, which encodes the data through `vl.markCircle` and `vl.encode` specifications, with D3.js handling CSV loading via `d3.csv`. The final chart is rendered as SVG through Vega and Vega-Lite, with appearance customized through a shared config object.

AAman Bhashkar

92% match