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)

db48e31ee85f44fe8730dfd94e654e92

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