Fork of Vega-Lite API Template

Vega-Lite API Template

This example visualizes the relationship between engine displacement, horsepower, weight, and model year for the classic Auto MPG dataset. A scatterplot maps displacement to the x-axis and horsepower to the y-axis, with circle size encoding weight and color encoding year via Vega-Lite’s quantitative field mappings. The code uses the Vega-Lite API (`vl.markCircle`, `vl.x().fieldQ()`) to build the specification, registers it through `vega-lite-api` with vega-tooltip for interactive hover details, and loads CSV data with `d3.csv`. Styling is customized through a config object.

DDavid Sjoberg

Fork of Vega-Lite API Template

This example visualizes the relationship between vehicle weight, horsepower, and miles per gallon from the auto-mpg dataset. It renders a scatter plot using Vega-Lite’s API, with circle size mapped to mpg, color to weight, and tooltips showing car names. The code builds the chart via `vl.markCircle` and `vl.encode`, then renders it with `vega`, `vega-lite`, and `vega-tooltip`, using `d3.csv` to load the data and custom config to adjust axis styling.

MMarco Malvicini

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset using a scatter plot where each point represents a car, with engine displacement on the x-axis, horsepower on the y-axis, color encoding the country of origin, and point size representing vehicle weight. Hovering reveals the car’s name via tooltips. The visualization is built entirely with the Vega-Lite API, using the `vl.markCircle` and `vl.encode` methods to define the marks and channels. Data loading relies on `d3.csv`, while rendering is handled by Vega and Vega-Lite’s runtime, with custom axis styling configured through a dedicated config object.

Ssd2beatles

Fork of Vega-Lite API Template

This example visualizes the relationship between vehicle weight, horsepower, and fuel efficiency using data from an auto-mpg dataset loaded via D3’s `csv` function. It renders a scatterplot where each point’s position encodes mpg and horsepower, color encodes origin, and size encodes weight, with tooltips showing car names. The visualization is built declaratively with the Vega-Lite API (`vl.markPoint`, `vl.encode`), registered with Vega and Vega-Lite, and rendered in SVG with a customized dark theme and axis styling.

JJenna Hamza

Fork of Vega-Lite API Template

This example presents a scatter plot of automotive data, showing the relationship between acceleration, horsepower, weight, and miles per gallon across different model years. Built with the Vega-Lite API, it uses `vl.markCircle` with encodings for x, y, color, size, and tooltip, pulling data from a CSV via `d3.csv`. The visualization is rendered as an SVG, with the tooltip handler integrated through `vega-tooltip`, and includes custom font styling from the `config` file.

SStefano Renzetti

Fork of Vega-Lite API Template

This example visualizes the classic Auto MPG dataset as an interactive scatter plot, encoding miles per gallon on the x-axis, horsepower on the y-axis, and using color and size to represent the car’s origin and weight. Built with the Vega-Lite API, it registers Vega, Vega-Lite, and Vega-Tooltip to render an SVG chart that fills the browser window. The code loads CSV data via `d3.csv`, applies custom axis and label styling from a configuration object, and uses mark-circle encodings with tooltips to show vehicle names on hover.

PPirialMersus

Fork of Vega-Lite API Template

This visualization displays a scatter plot of historical automobile data, plotting horsepower against miles per gallon, with point color encoding weight and size encoding displacement. Built with the Vega-Lite API, the code uses `vl.markCircle`, `vl.x().fieldQ()`, and `vl.y().fieldQ()` to define the encoding channels, while `vega-tooltip` provides interactive hover details. The data is loaded asynchronously via `d3.csv` from a GitHub-hosted CSV file containing auto-mpg measurements. The visualization renders using the Vega renderer within an SVG view, configured with custom axis styles for readability.

EEkuremaro

Fork of Vega-Lite API Template

This example visualizes the relationship between engine displacement, horsepower, weight, and origin for a dataset of automobiles from the auto-mpg CSV file. A scatter plot displays displacement on the x-axis and horsepower on the y-axis, with color encoding car origin and size encoding weight, while tooltips reveal vehicle names. Built using the Vega-Lite API, it registers Vega and Vega-Lite, loads data with d3.csv, and renders an interactive SVG visualization with a custom dark theme and tooltip handler.

PPratik Raja