Skip to main content
SimilarExport ZIP
100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public
RRolf Niggemann
Last edited Mar 11, 2021
Created on Mar 11, 2021

This visualization displays the relationship between automobile fuel efficiency (mpg) and horsepower, with points colored by country of origin and sized by vehicle weight. Built with the Vega-Lite API and rendered as an interactive SVG, it loads the Auto MPG dataset from the UCI Machine Learning Repository via a CSV file. The code uses vl.markCircle and vl.encode for the scatter plot, with a tooltip handler from vega-tooltip to show car model names on hover.

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 fuel efficiency (mpg) and horsepower for cars, with each point colored by country of origin and sized by vehicle weight. It uses data from the UCI Machine Learning Repository’s Auto MPG dataset, loaded via `d3.csv`. The graphic is built declaratively using the Vega-Lite API, specifying a circle mark with encodings for position, color, and size. The code registers Vega, Vega-Lite, and the Vega-Lite API, then renders an interactive SVG chart fitted to the browser window, with a tooltip provided by Vega-Tooltip.

Yyejichun@naver.com
96% match
Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatter plot explores the relationship between fuel efficiency (mpg) and horsepower across vehicles from different origins, with point size encoding weight and color indicating country of origin. Built using the Vega-Lite API on top of D3, the visualization leverages `vl.markCircle`, `vl.x().fieldQ()`, `vl.y().fieldQ()`, `vl.color().fieldN()`, and `vl.size().fieldQ()` to map the Auto MPG dataset from the UCI Machine Learning Repository. The code registers Vega-Lite specifications, applies a custom dark-themed configuration for readability, and renders to an SVG canvas with tooltips for inspecting data points.

Mmuwu16
96% match
Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays the relationship between vehicle horsepower, fuel efficiency (mpg), and weight, with points colored by country of origin and labeled by model name using hover tooltips. It renders an interactive scatter plot from the UCI Auto MPG dataset, loaded via CSV through `d3.csv`. The chart is built using the Vega-Lite API, which composes specifications programmatically, leverages `vl.markCircle` for rendering, and integrates `vega-tooltip` for interactivity within an SVG-based D3 view.

RRoberto M
95% match
Loading thumbnail…

Fork of Vega-Lite API Template

This scatter plot visualizes the relationship between fuel efficiency (mpg) and engine power (horsepower) for a set of automobiles, with each point color-coded by the vehicle’s country of origin. Built on the Vega-Lite API, it loads the Auto MPG dataset from the UCI Machine Learning Repository via a CSV fetched with d3.csv. The visualization uses `vl.markCircle`, `vl.x`, `vl.y`, `vl.color`, and `vl.tooltip` to encode the data, while custom config axis rules and a tooltip handler improve readability and interactivity.

Sseanowh
95% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository, plotting vehicle fuel efficiency (mpg) against horsepower with points colored by country of origin and sized by vehicle weight. The chart is built using the Vega-Lite API, which registers Vega and Vega-Lite libraries to render an SVG view. Data is loaded asynchronously via d3.csv, and the visualization encodes quantitative x- and y-fields, a nominal color field, and tooltips showing car names. The implementation includes custom axis styling and tooltip configuration for readability across the full browser window.

YYi-Qing
95% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository, plotting each car’s fuel efficiency (mpg) against its horsepower. Circles are colored by country of origin and sized by vehicle weight, with tooltips revealing the car model name. The visualization is built using the Vega-Lite API, which wraps d3.csv for data loading and vega-tooltip for interactive hover details. The plot dynamically fits the full viewport width and height, while custom axis and label styling are defined in a separate config file to improve readability.

Kkosakase
95% match
Loading thumbnail…

Fork of Vega-Lite API Template

This scatter plot visualizes the relationship between fuel efficiency (mpg) and horsepower for classic automobiles, with point size encoding weight and color indicating country of origin. The visualization is built using the Vega-Lite API, which wraps Vega-Lite specifications in JavaScript methods. Data is loaded asynchronously from a CSV file via d3.csv, sourced from the UCI Machine Learning Repository’s Auto MPG dataset. The code configures axis labels, tooltips, and a fixed-point rendering style, and renders the chart to SVG using the Vega renderer.

Iiblub
94% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between fuel efficiency (miles per gallon) and horsepower across automobile models, with color mapping to the country of origin and point size encoding vehicle weight, and includes tooltips displaying model names. It uses the Vega-Lite API (vl) to declaratively define the scatter plot specification, with data loaded from the UCI Machine Learning Repository’s Auto MPG dataset via d3.csv. The visualization is rendered through Vega’s and Vega-Lite’s JavaScript libraries, integrating the Vega Tooltip for interactive hover details, and applies a custom configuration for axis and label styling.

GGerasimos Katsagannis
94% match