Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Vega-Lite Scatterplot

Public visualization

Post on XLinkedIn

Viewing a saved revision (read-only)

c3a3c2f32cf041d9821e7ba10e2c890c

Open

Vega-Lite Scatterplot

0 stars0🌍 Public
NNJ Smith
Last edited Sep 11, 2025
Created on Aug 17, 2025

This scatterplot visualizes automotive data, mapping miles per gallon and horsepower for individual cars, with the vehicles' country of origin (USA, Europe, or Japan) indicated by color. Built with the Vega-Lite API, the chart uses `markCircle()` for points and `encode()` with `fieldQ()` and `fieldN()` to bind quantitative axes and the categorical color channel. It loads the Auto MPG dataset from a CSV via `d3.csv`, converts string values to numbers, and renders the final result as an SVG through a Vega View.

AI-generated description

Vega-Lite Scatterplot

This project creates an interactive scatterplot using Vega-Lite API showing car data with:

  • X-axis: Miles per gallon (mpg)
  • Y-axis: Horsepower
  • Color: Car origin (USA, Europe, Japan)
  • Size: Weight

Setup

  1. Install dependencies: npm install
  2. Build the project: npm run build
  3. Serve the files locally (e.g., with npx serve or any local server)

Data Source

The visualization uses the Auto MPG dataset from https://github.com/vega/vega-datasets