Skip to main content
SimilarExport ZIP
100%

Vega-Lite Scatterplot

✓ Published0🌍 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 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

MIT Licensed

Similar vizzes

Loading thumbnail…

Vega-Lite API Template

This example demonstrates a scatter plot of automotive data, showing the relationship between miles per gallon and horsepower, with points colored by country of origin. Built with the Vega-Lite API wrapper for JavaScript, it composes visualizations programmatically using methods like `vl.markPoint()`, `vl.x()`, `vl.y()`, and `vl.color()`. The code loads CSV data via `d3.csv`, applies a custom configuration for axis styling, and renders an interactive SVG view with tooltips through vega-tooltip.

SSam
92% match
Loading thumbnail…

Vega-Lite API_Car

This interactive scatter plot explores automobile fuel efficiency and performance using the UCI Machine Learning Repository's Auto MPG dataset. It displays miles per gallon against horsepower, with circles sized by vehicle weight, colored by country of origin, and offering tooltips for car names. Built with the Vega-Lite API for D3, the visualization leverages `vl.markCircle`, `vl.x().fieldQ()`, and `vl.y().fieldQ()` to encode these dimensions. The code loads data via `d3.csv`, applies a custom configuration for readable axes and fonts, and renders an SVG that fills the browser window.

SSkye Chen
92% match
Loading thumbnail…

Vega-Lite API Template

This example presents a scatter plot of automobile data from the UCI Machine Learning Repository’s Auto MPG dataset, showing relationships between miles per gallon, horsepower, weight, and country of origin. The visualization is built using the Vega-Lite API (`vl.markCircle`, `vl.encode`) in a JavaScript framework, with data loading handled by `d3.csv` from D3 v7. The code registers Vega-Lite and Vega, applies custom axis styling from `config.js`, and renders a responsive SVG chart that fills the browser window with tooltips enabled via the Vega Tooltip handler.

OOleg Zhernovoy
92% match
Loading thumbnail…

Vega-Lite API Template

This example shows a scatter plot of automotive data, mapping engine horsepower against fuel efficiency (mpg), with points colored by country of origin and tooltips revealing car model names. It uses the Vega-Lite API to declaratively construct the visualization, while D3’s `csv` method loads the auto-mpg dataset. The vega-lite-api library registers vega and vega-lite, and the chart is rendered into an SVG via a vega view with tooltip support from vega-tooltip. The code customizes axis styles and appearance through a config object.

CCurran Kelleher
91% match
Loading thumbnail…

Vega-Lite API Template

This example displays a scatter plot of auto-mpg data, encoding horsepower, weight, and origin. A circle mark uses quantitative axes for mpg and horsepower, color by origin, and size by weight. It features a tooltip for vehicle names. Built with the Vega-Lite API, it renders an SVG chart using vega-lite-api, vega, vega-lite, and d3.csv, with custom styling via a config object. The data comes from the UCI Machine Learning Repository Auto MPG dataset, loaded asynchronously and displayed with interactive tooltips.

CCurran Kelleher
91% match
Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays a scatter plot of automotive data from the UCI Auto MPG data set, mapping fuel efficiency (mpg) against horsepower. Each circular mark is colored by country of origin and sized by vehicle weight, with tooltips revealing car model names. The chart demonstrates the Vega-Lite API (vl) for D3, where the programmatic specification defines encoding channels like `vl.x().fieldQ('mpg')` and `vl.color().fieldN('origin')`. The code registers Vega, Vega-Lite, and the Vega-Lite API, then reads CSV data via `d3.csv` to render interactive SVG output.

Jjames.haarbauer@dunya-analytics.com
91% match
Loading thumbnail…

Vega-Lite API

This example demonstrates a scatterplot of automotive data, mapping the country of origin along the x-axis, horsepower on the y-axis, with weight mapped to color and miles per gallon mapped to point size. Built with the Vega-Lite API, it constructs the visualization declaratively using `vl.markCircle()`, `vl.x()`, `vl.y()`, `vl.color()`, and `vl.size()`. The chart loads data from a CSV via D3’s `csv()` and uses the Vega-Lite runtime to render interactively with tooltips.

Bboreilly26
91% match
Loading thumbnail…

Vega-Lite API Template

This example demonstrates a scatter plot of auto MPG data, showing miles per gallon versus horsepower, with points colored by origin and sized by vehicle weight. The visualization is built using the Vega-Lite API, which is registered with Vega and Vega-Lite, and rendered as SVG. Data is loaded via d3.csv from a Gist hosting the UCI Machine Learning Repository’s Auto MPG dataset. Interactive tooltips display car names, with layout and axis styling configured through a custom config object.

CCeciliaW888
91% match