Skip to main content
SimilarExport ZIP
100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public
EEkuremaro
Last edited May 20, 2022
Created on May 19, 2022

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.

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 interactive scatter plot visualizes the relationship between fuel efficiency (mpg), horsepower, weight, and country of origin for classic automobiles. The visualization uses the Vega-Lite API to declaratively encode data dimensions onto circle position, size, and color, with tooltips revealing car names. It renders as a responsive SVG, loading data from the UCI Auto MPG dataset via d3’s `csv` function. The example primarily demonstrates how the `vega-lite-api` library can construct specifications programmatically, complemented by vega-tooltip for interactivity and custom config for styling.

Llingfa
97% 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
96% 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
96% 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 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 example presents an interactive scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository, visualizing relationships between fuel efficiency, horsepower, vehicle weight, and country of origin. Each circle’s position maps to miles per gallon and horsepower, while size encodes weight and color distinguishes origin, with tooltips revealing car names. Built with the Vega-Lite API, it registers Vega, Vega-Lite, and Vega-Tooltip through D3’s CSV loader for data retrieval, then renders a fit-sized SVG view with custom styling for readability.

SSepehr Roshanpour
95% match
Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatter plot explores the relationship between fuel efficiency (mpg) and horsepower for cars, with point color indicating region of origin and point size representing vehicle weight. The visualization is built using the Vega-Lite API, which programmatically constructs a Vega-Lite specification that is rendered to SVG via Vega and Vega-Lite libraries. Data comes from the UCI Auto MPG dataset, loaded asynchronously with d3.csv. The code customizes axis styling through a config object and adds interactive tooltips displaying car names through the Vega Tooltip handler.

Ttknaik
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 circles colored by region of origin and sized by vehicle weight. Built using the Vega-Lite API, it defines the visualization through method-chaining operations including `markCircle`, `encode`, and scale specifications. The example loads car data from the UCI Machine Learning Repository via d3’s `csv` function, and renders interactively with tooltips provided by the `vega-tooltip` Handler. Custom axis and label styling are applied through a shared configuration object.

Wweny1109
95% match