Viewing a saved revision (read-only)
67333c0da9e346b1b3a7977644395a8d
Vega-Lite Scatterplot
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 descriptionVega-Lite Scatterplot Starter
This project creates a simple scatterplot using Vega-Lite API showing car data with:
- X-axis: Miles per gallon (mpg)
- Y-axis: Horsepower
- Color: Car origin (USA, Europe, Japan)
Learning Vega-Lite
This starter code demonstrates:
- Basic scatterplot with
markCircle() - Mapping data fields to visual properties with
encode() - Using quantitative (Q) and nominal (N) field types
- Configuring chart size and styling
- Loading data from a CSV file
- Converting data types
Setup
- Install dependencies:
npm install - Build the project:
npm run build - Serve the files locally (e.g., with
npx serveor any local server)
Data Source
The visualization uses the Auto MPG dataset from https://github.com/vega/vega-datasets