Skip to main content
SimilarExport ZIP
100%

Vega-Lite API Scatter Plot

✓ Published0🌍 Public
AAdnan
Last edited May 21, 2023
Created on May 21, 2023

This scatter plot visualizes the relationship between vehicle weight and horsepower for a dataset of automobiles, with points colored by country of origin. The visualization is built using the Vega-Lite API, which is registered with Vega and Vega-Lite to render SVG graphics. Data is loaded via D3’s `csv` function from a remote Gist, and tooltips are handled by Vega-Tooltip to display car names on hover. The chart’s appearance is customized through a configuration object that styles axis labels and titles.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

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
94% 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
92% match
Loading thumbnail…

Vega-Lite API Template

A scatter plot of auto-mpg data shows the relationship between vehicle weight, horsepower, and fuel efficiency, with points colored by country of origin and sized by miles per gallon. The visualization is built with the Vega-Lite API, registering both Vega and Vega-Lite engines, and leverages D3’s `csv` module for data loading from a UCI Machine Learning Repository dataset. SVG rendering and tooltip interactions are configured through Vega-Lite’s `config` and `Handler` interfaces.

CCarlos Caballero
92% match
Loading thumbnail…

Vega-Lite API Template

This example visualizes the relationship between vehicle weight, horsepower, and fuel efficiency using a scatter plot, with each car represented as a circle colored by weight and sized by miles per gallon. The visualization is built with the Vega-Lite API, which registers Vega and Vega-Lite libraries to create the chart programmatically. Data is loaded from a CSV file via d3.csv, and the final SVG output is rendered to fill the browser window. Axis styling and tooltips are customized through the provided Vega-Lite config and the vega-tooltip handler.

CCurran Kelleher
92% match
Loading thumbnail…

Vega-Lite API Scatter Plot Template

This visualization presents a scatter plot of auto-mpg data from the UCI Machine Learning Repository, using points to show vehicle weight versus horsepower. Color encodes the country of origin, while point size maps to miles per gallon. The plot is built with the Vega-Lite API, registering Vega and Vega-Lite libraries, and uses D3’s CSV parser to fetch data from a Gist. The code configures tooltips via vega-tooltip and customizes axis and label styling through a separate config object.

JJohn Kobbeman
92% match
Loading thumbnail…

Vega-Lite API - scatter plot

This example demonstrates a scatter plot of vehicle data using the Vega-Lite API, showing the relationship between miles per gallon and horsepower across different car origins, with point size encoding weight and tooltips displaying car names. The visualization leverages `vl.markCircle` with opacity for density perception, and custom scales that avoid zero-based axes. It loads CSV data from a GitHub gist via d3.csv, then renders to SVG using Vega and Vega-Lite with a dark-on-light custom config. The code registers vega-tooltip for interactive hover labels and uses d3.v5.

Kkatjur01
92% match
Loading thumbnail…

Vega-Lite API Template

This example shows a scatterplot of automotive data, plotting horsepower against weight while encoding country of origin by color and miles per gallon by point size. The visualization is built using the Vega-Lite API, which registers with Vega and Vega-Lite to render an SVG view. Data is loaded asynchronously from a CSV file using d3.csv, and the chart is configured with custom axis styles and tooltips via vega-tooltip. The vega-lite-api’s method chaining defines the encoding and mark specifications.

AAnthonyAl-Rifai
92% match
Loading thumbnail…

Vega-Lite API Scatter Plot

This scatter plot visualizes automobile data from the auto-mpg CSV dataset, showing the relationship between horsepower and origin on x and y axes. Each point represents a car model, with tooltips revealing the car name. Built with Vega-Lite API in conjunction with d3.csv for data loading, the visualization uses vega and vega-lite for chart specification, vega-tooltip for interactive hover details, and applies custom styling through a config object to adjust axis and label appearance.

CCaroline Ghisolfi
91% match