Skip to main content
SimilarExport ZIP
100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public
SShasvathan Pathmanaban
Last edited Nov 17, 2021
Created on Nov 17, 2021

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.

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
96% match
Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays a scatter plot of the Auto MPG dataset, showing the relationship between miles per gallon and horsepower. Each bar encodes weight through size and origin via color, with tooltips revealing car names. The visualization is built using the Vega-Lite API, which registers Vega and Vega-Lite with a custom tooltip handler. Data is loaded asynchronously via d3.csv, and the chart dynamically sizes to fit the window. The code also applies a custom config to adjust axis styling and label fonts for improved readability.

Pparshwa30122002@gmail.com
95% match
Loading thumbnail…

Fork of Vega-Lite API Template

This scatter plot visualizes the relationship between miles per gallon and horsepower for cars from the Auto MPG dataset, with color mapping to region of origin and point size encoding weight. Built with the Vega-Lite API, the visualization uses the `vl.markCircle` and `vl.encode` specifications to define the marks and channels, while `vl.x()` and `vl.y()` handle quantitative scales. Data is loaded asynchronously via D3’s `csv` function, and the chart is rendered with Vega, Vega-Lite, and Vega-Tooltip for interactive hover details.

AAakarshak Sthapak
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 visualization displays a scatter plot of auto MPG data, showing miles per gallon versus horsepower, with color encoding for origin and size encoding for weight. It uses the Vega-Lite API, rendering through Vega and Vega-Lite libraries with D3 for CSV data loading. The visualization includes tooltips for vehicle names and uses a custom configuration for improved readability. Data comes from the UCI Machine Learning Repository Auto MPG dataset, with a dark theme and larger fonts for enhanced presentation.

BBeihaiTianming
95% match
Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays a scatter plot of auto MPG data, mapping miles per gallon on the x-axis, horsepower on the y-axis, and using color and point size to encode vehicle origin and weight. The code uses the vega-lite-api to construct the chart declaratively, with vega-lite and vega handling rendering, and d3 fetching the CSV data from a Gist. It includes a tooltip showing vehicle names, configured through vega-tooltip.

Rrajamrit-singh
95% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset with an interactive scatter plot, mapping miles per gallon on the x-axis and horsepower on the y-axis. Circle size encodes vehicle weight, while color distinguishes the region of origin, and hovering reveals the car name via a tooltip. The visualization is built using the Vega-Lite API, which registers Vega and Vega-Lite libraries, and loads CSV data with D3’s `csv` function. Custom styling configures dark axis labels and a large font size for readability, with the chart automatically fitting the full viewport.

DDustin Brunner
95% match
Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatter plot visualizes the relationship between miles per gallon, horsepower, weight, and origin for classic automobiles from the UCI Auto MPG dataset. The visualization uses the Vega-Lite API in JavaScript to define the marks and encodings, with data loaded asynchronously via D3’s `csv` method. The chart is rendered as an SVG, and the Vega-Tooltip handler displays detailed vehicle names on hover. The code also customizes axis and label styles for improved readability, following the Vega-Lite configuration format.

AAamir Hameed mir
95% match