Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Oct 6, 2023

Created on Oct 6, 2023

This visualization displays the relationships among weight, horsepower, and fuel efficiency (mpg) for vehicles in the UCI Auto MPG data set, with each car plotted as a semi-transparent circle whose size reflects mpg, color encodes weight, and tooltips reveal model names. It uses the Vega-Lite API to declare the scatter plot specification, which is registered with Vega and Vega-Lite libraries. The data is loaded asynchronously via d3.csv, while d3.v5 provides the underlying parsing, and the visualization scales responsively to fill the browser window with customized axis and label styling for 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 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üş

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

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository, showing vehicle fuel efficiency against horsepower. Each circle’s size encodes vehicle weight and its color represents the country of origin, with tooltips revealing the car model name. The visualization is built using the Vega-Lite API, which compiles specifications into Vega and renders with D3. Data is fetched as CSV via D3’s `csv` function, and styling customizes axis labels and titles for readability.

Sseitzfab

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatter plot visualizes the relationship between fuel efficiency (mpg), horsepower, and weight for various car models, with the country of origin represented by color. Built using the Vega-Lite API, it loads data from the UCI Auto MPG dataset and renders circles with a fixed size and opacity. The visualization leverages `vl.markCircle` and `vl.encode` for encoding, while `window.innerWidth` and `window.innerHeight` determine the canvas size. The code uses `d3.csv` for data ingestion and a custom `config` for axis styling, with tooltips handled via vega-tooltip. The visualization is generated dynamically and appended to the document body.

HHgeginat

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays the relationship between fuel efficiency (mpg), horsepower, origin, and weight for a set of automobiles. The code uses the Vega-Lite API to construct a scatter plot with circle marks, encoding mpg on the x-axis, horsepower on the y-axis, origin as color, and weight as size. Data is loaded from the UCI Machine Learning Repository's Auto MPG dataset via a CSV file, processed using `d3.csv`. The visualization is rendered as an SVG through Vega-Lite, with a custom configuration for axis styling and tooltips.

CCecilia831

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization presents a scatter plot of auto MPG data from the UCI Machine Learning Repository, mapping miles per gallon against horsepower. Each circle’s size encodes vehicle weight, while color distinguishes origin, and hovering reveals the car’s name. The visualization is built using the Vega-Lite API, with d3.csv loading the data and vega-tooltip providing interactive details. The chart fills the browser window, and a custom config adjusts axis and label styling for readability.

SSumit Kumar

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays the relationship between fuel efficiency (mpg) and horsepower for a set of automobiles, with points colored by origin and sized by weight, using the vega-lite-api to construct a scatter plot. The code loads CSV data from the UCI Auto MPG dataset via d3.csv, then renders the chart with Vega-Lite and Vega, configured with a custom dark theme for improved readability. Hovering over a point reveals the car’s name through a vega-tooltip handler. The visualization fills the entire viewport and uses a fit autosize mode with zero-suppressed scales.

Hhimchan94

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This scatterplot visualizes the relationships among car attributes in the Auto MPG dataset from the UCI Machine Learning Repository, showing fuel efficiency (mpg) against horsepower, with color encoding by origin, size encoding by weight, and tooltips revealing car names. The visualization is built programmatically using the Vega-Lite API, which registers Vega and Vega-Lite in the browser, fetches data via d3.csv, and configures visual styling such as axis tick colors and font sizes. It renders as inline SVG, sized responsively to the window, with Vega-Tooltip handling interactive details on hover.

Jj-PGi

94% match