Skip to main content
SimilarExport ZIP
100%

Fork of Vega-Lite API Template

✓ Published1🌍 Public
RRoberto M
Last edited Nov 24, 2021
Created on Nov 24, 2021

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.

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 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.

RRolf Niggemann
95% match
Loading thumbnail…

Fork of Fork of Vega-Lite API Template

This visualization displays the relationship between fuel efficiency (mpg), horsepower, and weight for a sample of automobiles, colored by country of origin. Using the Vega-Lite API with D3.js for data loading, it renders a scatter plot where circle size encodes vehicle weight and tooltips reveal the car model name. The data comes from the UCI Machine Learning Repository's Auto MPG dataset, loaded via `d3.csv`. The visualization pipeline combines `vl.markCircle`, `vl.x`, and `vl.y` encodings with a custom configuration for styling and tooltip handling.

EEngineerRajeev
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 I

This interactive scatter plot visualizes the relationship between fuel efficiency (mpg), horsepower, weight, and country of origin for automobiles from the UCI Auto MPG dataset. The visualization uses the Vega-Lite API to declaratively encode data fields onto circular marks, with color distinguishing origin and size mapping to weight. It reads CSV data via `d3.csv`, renders with Vega’s SVG renderer, and includes Vega-Tooltip for interactive hover details. The chart resizes to fit the browser window and applies custom axis and label styling for readability.

FFonda Irena Santoso
95% match
Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatter plot visualizes the relationship between horsepower, fuel efficiency (MPG), and vehicle weight for classic cars, with color encoding by country of origin. Built using the Vega-Lite API on top of Vega and Vega-Lite, it renders as a single SVG, configured through `vl.markCircle` and the `encode` method. Data is loaded asynchronously from a CSV via `d3.csv`, sourced from the UCI Auto MPG dataset. The visualization adapts to the browser window and includes tooltips via the Vega Tooltip handler.

EEkuremaro
95% match
Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays the relationship between vehicle weight, horsepower, and fuel efficiency across different countries of origin, using a bubble chart where each point represents a car model. The data comes from the auto-mpg.csv dataset, loaded via d3's csv method. Built with the Vega-Lite API, it registers both Vega and Vega-Lite libraries, and constructs the plot using vl.markCircle with encodings for x, y, color, size, and tooltip. The visualization is rendered as an SVG, with custom config styling for axes and guide labels, and includes an interactive tooltip via the vega-tooltip Handler.

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