Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Jan 8, 2022

Created on Jan 7, 2022

This scatterplot visualizes U.S. auto industry trends, plotting engine horsepower against miles per gallon, with each car’s origin shown by color and its weight by bubble size. The interactive tooltip reveals the vehicle’s name on hover. The visualization is built using the Vega-Lite API, which compiles specifications to Vega for rendering via SVG, and the data is loaded from a CSV of the Auto MPG dataset using `d3.csv`. Custom axis and label styling come from a shared 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 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 visualization displays a scatter plot of auto industry data from the UCI Machine Learning Repository’s Auto MPG dataset. It plots fuel efficiency (mpg) against horsepower, with points colored by origin, sized by vehicle weight, and showing car names as tooltips. The code uses the Vega-Lite API to generate the chart, leveraging `vl.markCircle`, `vl.encode`, and field encodings. The visualization is rendered with Vega, Vega-Lite, and Vega-Tooltip, pulling data via `d3.csv` and applying custom axis and label styling.

Mmoataznasr36

93% match

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

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, mapping miles per gallon against horsepower for individual car models. Each point is colored by origin and sized by vehicle weight, with hover tooltips revealing the car name. Built with Vega-Lite API, the visualization leverages `vl.markCircle`, positional encodings via `vl.x()` and `vl.y()`, and tooltips through `vl.tooltip()`. D3’s `csv` loader fetches the data, while Vega tooltip enhances interactivity, all running within a responsive, full-window layout.

JJoshua Holloway

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

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. It displays miles per gallon on the x-axis, horsepower on the y-axis, with color encoding by origin and size encoding by weight, plus tooltips for car names. The visualization fetches data via `d3.csv` and renders using `vega`, `vega-lite`, and `vega-lite-api`, with a custom config for axis styling and a Vega Tooltip handler. The chart is fit to the full window size.

JJessica Tucker

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

92% match

Loading thumbnail…

Fork of Vega-Lite API Template

A scatter plot of automotive data visualizes the relationship between the country of origin and horsepower, with each car represented by a semi-transparent circle. The visualization uses the Vega-Lite API with the `data(await getData())` method to load and bind the Auto MPG dataset from the UCI Machine Learning Repository, then applies a custom configuration to adjust axis styles and typography. The code registers Vega, Vega-Lite, and the Vega-Tooltip handler, and sets the chart dimensions to fill the browser window using `.width(window.innerWidth)` and `.height(window.innerHeight)` with an autosize fit option.

Aadam

92% match

Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatter plot explores the relationship between fuel efficiency and engine power across automobile models, with point size encoding weight and color encoding the region of origin. It loads Auto MPG data from the UCI Machine Learning Repository through a Gist URL via D3’s `csv` function. The visualization is built programmatically using the Vega-Lite API, which composes marks and encodings in JavaScript, then renders to SVG with Vega and adds tooltips via the vega-tooltip `Handler`. Custom axis and label styling come from a shared config object.

Ttjcocucci

92% match