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

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

Vega-Lite API Reference

• https://vega.github.io/vega-lite-api/api/
• markCircle: https://vega.github.io/vega-lite-api/api/markCircle.html
• encode: https://vega.github.io/vega-lite-api/api/encode.html
• fieldQ: https://vega.github.io/vega-lite-api/api/fieldQ.html
• fieldN: https://vega.github.io/vega-lite-api/api/fieldN.html