Skip to main content
SimilarExport ZIP
100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public
SShantanu
Last edited May 17, 2021
Created on May 17, 2021

This interactive scatter plot visualizes automobile performance data from the UCI Auto MPG dataset. Each circle represents a vehicle, positioned by miles per gallon and horsepower, colored by country of origin, and scaled by weight. The visualization is built using the Vega-Lite API, which constructs the chart specification, with Vega rendering the SVG output. D3 handles CSV data loading, while Vega-Tooltip provides interactive hover details. The interface automatically fits the chart to the browser window, with customized axis styling and enlarged typography 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 interactive scatter plot visualizes automobile performance data from the UCI Auto MPG dataset, showing miles per gallon against horsepower across different origins. The visualization uses square marks with color encoding for origin and size for vehicle weight, while tooltips display model names. Built with the Vega-Lite API, it registers Vega, Vega-Lite, and d3.csv for data loading, then renders an SVG view with custom axis and label styling. The plot automatically fits the browser window and uses Vega Tooltip for interactive hover details.

LLainu Kuruvilla
97% match
Loading thumbnail…

Fork of Vega-Lite API Template

This scatter plot uses the Auto MPG dataset from the UCI Machine Learning Repository to visualize relationships among vehicle attributes. Each circle represents a car, positioned by weight and horsepower, colored by country of origin, and sized by miles per gallon. The visualization is built with the Vega-Lite API, which generates the chart specification, while D3.js fetches the CSV data and renders the SVG output. Interactive tooltips display car names when hovering.

TTanupat B.
95% match
Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatter plot visualizes automobile fuel efficiency and performance data from the UCI Machine Learning Repository’s Auto MPG dataset. It shows the relationship between miles per gallon and horsepower, with color encoding country of origin, size encoding vehicle weight, and tooltips revealing car names. The visualization is built using Vega-Lite’s API built on D3, employing vl.markCircle and its encoding methods. The D3 csv function loads the data, while custom configuration in config.js adjusts axis styling for readability.

PPeter Krevenets
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, encoding horsepower, miles per gallon, origin, and weight for each vehicle. The visualization uses the Vega-Lite API to construct a circle mark with quantitative fields mapped to x and y axes, a nominal field for color, and a tooltip displaying the vehicle name. Built with vega-lite-api, vega, vega-lite, and vega-tooltip, the chart is styled with a custom configuration that disables axis domains and uses light gray ticks. Data is loaded asynchronously via d3.csv, with the plot sized to fill the viewport.

GGyromighty
95% match
Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays automobile data from the UCI Machine Learning Repository’s Auto MPG dataset as a scatter plot, showing miles per gallon against horsepower, with color encoding the country of origin and point size representing vehicle weight. The plot uses a dark-themed, large-label aesthetic for clarity. It is built with the Vega-Lite API, which is registered with Vega and Vega-Lite, and uses D3’s `csv` loader to fetch the data. The interactive tooltip is provided by Vega Tooltip, and the chart renders as SVG, fitting the full browser window.

Lleopoldovce2
95% match
Loading thumbnail…

Fork of Vega-Lite API Template

This visualization renders a scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository. Each circle represents a car, with miles per gallon on the x-axis, horsepower on the y-axis, color encoding the country of origin, and point size reflecting vehicle weight. Tooltips reveal the car names. The code uses the Vega-Lite API (vl) configured with vega, vega-lite, and vega-tooltip, while d3.csv fetches the remote data. Custom axis and label styling is applied through a shared config object before the SVG view renders to fill the window.

MMuhammadAaqib137
95% match
Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatter plot visualizes automobile efficiency and performance across different regions of origin. Each circle represents a vehicle, positioned by miles per gallon and horsepower, with color encoding the continent of manufacture and size reflecting vehicle weight. Hovering reveals the model name via tooltip. The visualization is constructed using the Vega-Lite API within a D3.js framework, loading data from the UCI Auto MPG dataset and rendering through Vega’s SVG output with custom styling for improved readability.

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