scatter plot

100%

✓ Published0🌍 Public

Last edited Jul 1, 2022

Created on Jul 1, 2022

This scatter plot visualizes the relationship between engine displacement, horsepower, and vehicle origin, with circle size encoding weight. The visualization uses the vega-lite-api to construct the chart, which is rendered with Vega-Lite and Vega. Data is loaded from a remote CSV file of auto-mpg records using d3.csv. The plot maps displacement to the x-axis and horsepower to the y-axis, while color differentiates origin and size scales by weight.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

scatter_plot

This scatter plot visualizes the relationship between engine displacement and horsepower for a collection of automobiles, with each point representing a vehicle and its name available via tooltip. The visualization uses the vega-lite-api library to define the chart, which is rendered through Vega-Lite’s SVG backend, and pulls data from a CSV file using d3.csv. The plot is configured with custom axis styling and a dark color scheme, while points are rendered with a subtle opacity to reveal density in overlapping regions.

SsunilthkGmail

90% match

Loading thumbnail…

scatter_plot

This scatter plot visualizes the relationship between engine displacement and horsepower for a collection of automobiles, with each point representing a vehicle model. The visualization is built using the Vega-Lite API, which registers with Vega and Vega-Lite to render the chart as SVG. Data is loaded asynchronously from a CSV file using D3’s `csv` method, and the plot applies a config for custom axis and label styling. Tooltips, enabled via the vega-tooltip handler, display each car’s name on hover, while point opacity and size convey density across the dataset.

Ggoldpot

89% match

Loading thumbnail…

109550048-lris scatter plot

This scatter plot shows the relationship between engine displacement and horsepower for a dataset of cars, with color encoding the country of origin and tooltips revealing the model name. Data is loaded from a remote CSV file, while the visualization is built using the vega-lite-api library, which registers Vega and Vega-Lite to render the chart as an SVG. The plot is configured with circles of fixed size and opacity, and axes are styled with custom colors and font sizes.

TTrashBoatDora

87% match

Loading thumbnail…

Vega-Lite API Template

This example visualizes the relationship between engine displacement and horsepower using a scatter plot of vehicle data. The visualization employs a Vega-Lite specification constructed programmatically via the vega-lite-api library, with data loaded from a CSV file using d3.csv. The chart renders as a single SVG element sized to fit the viewport, with points colored by opacity to reveal density. Axis styling and font sizes are customized through a Vega-Lite configuration object, while tooltips are enabled through vega-tooltip.

GGnav3852

86% match

Loading thumbnail…

Fork of Vega-Lite API Template

This scatter plot displays the relationship between engine displacement and horsepower for a collection of automobiles, with each circle’s area scaled by vehicle weight. The visualization is rendered using the Vega-Lite API, a programmatic wrapper around Vega-Lite and Vega, with tooltips supplied by the vega-tooltip library. Data is loaded as CSV from a remote source using d3.csv, and the plot’s axis styles and dimensions are customized via a configuration object.

NNikhilchiguru-8

86% match

Loading thumbnail…

Scatter Plots

This interactive scatter plot visualizes the relationship between a vehicle’s miles per gallon and its horsepower, with each dot colored by country of origin and sized by weight. The visualization is built using the Vega-Lite API, which programmatically constructs the chart specification by chaining methods like `vl.x().fieldQ('mpg')` and `vl.color().fieldN('origin')`. Data is loaded asynchronously from the UCI Auto MPG dataset using the `csv` function from d3. The chart fills the browser window and includes tooltips, which are enabled through the Vega-Tooltip handler.

MMeAzuree

85% match

Loading thumbnail…

Scatter Plot with Small Points

This scatter plot visualizes the relationship between engine displacement and horsepower for a sample of automobiles. The small, solid points are rendered without strokes, with tooltips displaying the vehicle name on hover. Built using the vega-lite-api specification, the visualization loads data from a CSV file via d3.csv and renders through Vega-Lite’s SVG renderer. Axes and labels are customized in a separate config file, with the chart fitting the full window dimensions.

Llscholz1

85% match

Loading thumbnail…

Vega-Lite API Template

This example visualizes the relationship between fuel efficiency, horsepower, weight, and origin for vehicles from the Auto MPG dataset. It displays a scatter plot of mpg against horsepower, with point size encoding weight and color distinguishing vehicle origin. The visualization is built using the Vega-Lite API, which wraps Vega-Lite and Vega in a JavaScript interface, combined with d3.csv for data loading from a Gist-hosted CSV file. A custom tooltip from vega-tooltip displays the vehicle name, while the chart autosizes to fill the browser window.

Llakalia@wpi.edu

85% match