Skip to main content
SimilarExport ZIP
100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public
TTarul170720
Last edited Dec 10, 2021
Created on Dec 10, 2021

This example visualizes the relationship between miles per gallon, horsepower, and weight across cars from different origins, using the Auto MPG dataset from the UCI Machine Learning Repository. The visualization is built with the Vega-Lite API, which wraps Vega and Vega-Lite specifications in JavaScript. It renders a bar chart with semi-transparent bars colored by origin, sized by weight, and includes tooltips showing car names via `vega-tooltip`. The chart fits the full window size and uses a custom dark theme from an exported config object.

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 visualizes the relationship between miles per gallon, horsepower, weight, and origin for automobiles from the UCI Machine Learning Repository Auto MPG dataset. It uses the Vega-Lite API to construct a scatter plot with circles, encoding mpg and horsepower as x and y axes, origin as color, and weight as size, with tooltips showing car names. The visualization is rendered in SVG via D3.js (d3.csv) and Vega-Lite, with a customized dark theme config and automatic sizing to fit the viewport.

Ddrandalldesign
95% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between miles per gallon, horsepower, vehicle weight, and origin using a scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository. The visualization encodes weight as point size and color as origin, with tooltips revealing car names. It is built with the Vega-Lite API, running through Vega and Vega-Lite rendering pipelines, and dynamically sizes the chart to the browser window. Data is loaded asynchronously via d3.csv, while a custom configuration adjusts axis and label styling.

Sstefanpullen
94% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between horsepower, miles per gallon, and vehicle weight for cars from the UCI Machine Learning Repository's Auto MPG dataset. A scatter plot uses circle marks, with color encoding vehicle origin and size encoding weight, while tooltips reveal the car model name. The visualization is built using the Vega-Lite API, which wraps Vega and Vega-Lite, and includes a custom configuration to style axes and labels. Data is loaded asynchronously with d3.csv, and the chart canvas fills the browser window.

SShishiraRudrabhatla
94% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between miles per gallon and horsepower for automobiles from the UCI Auto MPG data set, with point color encoding the region of origin and point size encoding vehicle weight. A tooltip displays the car’s name and origin on hover. The visualization is built using the Vega-Lite API, with custom configuration for axis styling and font sizes. Data is loaded via `d3.csv`, and the chart adapts to the full browser window using dynamic height and width, rendered as an SVG through vega-tooltip for interactivity.

Pparshwa30122002@gmail.com
94% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between miles per gallon, horsepower, and weight for auto-mpg data from the UCI Machine Learning Repository. A scatter plot shows each car as a circle, with color encoding the region of origin and size encoding vehicle weight; hovering reveals the car’s name via tooltip. The visualization is built using the Vega-Lite API, which is registered with Vega and Vega-Lite libraries, and renders to SVG. Data is loaded asynchronously via d3.csv, with custom axis and label styling defined in a separate configuration file.

SSezer Gümüş
94% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository, plotting miles per gallon against horsepower with points colored by origin and sized by vehicle weight. Tooltips display car names on hover. The visualization is built using the Vega-Lite API and rendered through D3.js, with data loaded via D3’s `csv` function. The chart is created programmatically using `vl.markCircle` with encodings for quantitative and nominal fields, and includes custom configuration for axis styles and text formatting.

Aantanta28
94% match
Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays the relationship between miles per gallon and horsepower for a subset of automobile models, with point size encoding vehicle weight and color distinguishing geographic origin. Hovering reveals each car’s name via a tooltip. Built with the Vega-Lite API for chart specification, it loads CSV data from the UCI Auto MPG dataset and renders interactively using D3.js, Vega, and the vega-tooltip handler.

Ggon araseon
94% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository, showing the relationship between miles per gallon, horsepower, and vehicle weight, with color distinguishing the origin of each car. It uses the Vega-Lite API to construct a scatter plot with circle marks, encoding quantitative fields for x and y positions and weight for size, while tooltips display the vehicle name on hover. The code registers Vega, Vega-Lite, and the Vega-Lite API, loads data via d3.csv, and configures axis and label styling for readability. Rendered as an SVG that fills the window, the visualization supports interactive tooltips via Vega Tooltip.

AAnomatomato
94% match