Matrix Scatterplots in Vega-Lite API 1

100%

Matrix Scatterplots in Vega-Lite API 1

✓ Published0🌍 Public

Last edited Oct 11, 2021

Created on Oct 7, 2021

This example displays a small matrix of scatterplots comparing horsepower and displacement against fuel efficiency, with points colored by country of origin. Built with the Vega-Lite API, it uses the `repeat` operator to generate plots from a specification, encoding quantitative axes and a nominal color field. The visualization loads automobile data from the UCI Machine Learning Repository via a CSV fetched with d3’s `csv` function, and renders as SVG with custom axis styles and tooltips provided by Vega-Tooltip.

AI-generated description

A visualization constructed using the vega-lite-api.

The data shown here comes from the UCI Machine Learning Repository: Auto MPG Data Set, via Gist: Scatter Plot with Menus.

MIT Licensed

Similar vizzes

Loading thumbnail…

Matrix Scatter

This matrix scatterplot uses the Vega-Lite API to visualize relationships among four automobile attributes from the UCI Auto MPG dataset. The repeated small multiples layout plots horsepower and displacement on the x-axes against mpg and acceleration on the y-axes, with each circle’s position encoding the measured values. The visualization is built with vl.repeat() to generate the grid of charts, while the vega-tooltip handler provides hover interactions. Data is loaded asynchronously via d3.csv.

OOleJRask

90% match

Loading thumbnail…

Vega-Lite API Template

This example demonstrates how to use the Vega-Lite API to build a scatter plot of automobile data, showing the relationship between weight, horsepower, and fuel efficiency (mpg), with points colored by country of origin. The visualization leverages the vega-lite-api JavaScript library to construct the chart declaratively, then renders it using Vega and Vega-Lite with an SVG output. Data is loaded asynchronously from a CSV file using D3’s `csv` function. Custom styling is applied through a config object to adjust axis labels, fonts, and colors for improved readability.

MMGamboa

88% match

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

88% match

Loading thumbnail…

Fork of Vega-Lite API Template 2

This example displays a scatter plot of automobile fuel efficiency against horsepower, with points colored by country of origin and tooltips showing model names. The visualization uses the Vega-Lite API to construct the chart declaratively, combining `vl.markCircle` with encodings for the quantitative axes and nominal color. Data comes from the UCI Auto MPG dataset loaded via `d3.csv`. The code integrates vega, vega-lite, and vega-lite-api libraries, with additional tooltips from vega-tooltip and custom axis styling from a config object.

MMayank Kumar

88% 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

88% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays a scatter plot of automobile data, mapping displacement against horsepower, with points colored by country of origin and tooltips revealing model names. The example uses the Vega-Lite API (via `vega-lite-api`) to declaratively construct the chart, while D3's `csv` method loads the auto-mpg dataset. Rendering is handled by Vega and Vega-Lite with SVG output, and the tooltip functionality comes from the `vega-tooltip` Handler. Axis styling and color scheme are customized through a JSON config object, which is merged into the visualization's default appearance.

MMathieuSchaff

87% 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

87% match

Loading thumbnail…

Vega-Lite API Template

This example demonstrates a scatterplot visualization of automobile data, plotting weight against horsepower for various car models. Each point is colored by country of origin and sized by miles per gallon. The visualization is built using the Vega-Lite API, a programmatic interface to Vega-Lite, which leverages the Vega rendering engine. The code imports data from a CSV file, configures axis styles and tooltips, and uses the vega-tooltip library to display car names on hover.

AALI Akbar SABZI

87% match