Skip to main content
SimilarExport ZIP
100%

Scatter Plot with Small Points

✓ Published0🌍 Public
Mmtabaka
Last edited Apr 26, 2020
Created on Apr 26, 2020

This scatter plot uses small, solid points to show the relationship between miles per gallon and vehicle weight for cars from the auto-mpg dataset. The visualization is built with the vega-lite-api, which wraps Vega-Lite and Vega to create a declarative chart, then renders it as SVG. Data is loaded via `d3.csv`, and tooltips display the car name on hover. The chart scales both axes from zero and fits the full browser window.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot with Small Points

This scatter plot visualizes automotive data from an auto-mpg CSV dataset, mapping vehicle origin to weight with small circular points. Tooltips reveal the car model names on hover. Built using the vega-lite-api, it renders through Vega-Lite’s markPoint encoding, with axis styling and layout configured in a separate config.js file, and the data loaded asynchronously via d3.csv.

CCurran Kelleher
92% match
Loading thumbnail…

Scatter Plot with Small Points

This example displays a scatter plot of automobile data from the auto-mpg dataset, plotting engine displacement against horsepower. Each point represents a vehicle, with tooltips showing the car name on hover. The visualization is built using the vega-lite-api library, which wraps Vega-Lite specifications into JavaScript methods. The code registers Vega and Vega-Lite, loads the CSV data via d3.csv, and renders the chart as SVG with a custom configuration for styled axes and labels.

CCurran Kelleher
89% match
Loading thumbnail…

Cars Scatter Plot w/ Vega Lite API

This example presents a scatter plot of automobile data from a CSV file, showing the relationship between vehicle weight, horsepower, and origin, with point size mapped to miles per gallon. It uses the Vega-Lite API to declaratively define the chart’s encoding, including tooltips that reveal each car’s name. The code integrates Vega, Vega-Lite, Vega-Lite API, and Vega-Tooltip via d3.csv for data loading and a custom configuration for axis styling. The visualization renders as an SVG that fills the browser window, with points colored by origin and sized by fuel efficiency.

Hhunsingeruk@gmail.com
89% match
Loading thumbnail…

Vega-Lite API Template

This example displays a scatter plot of automobile data from the Auto MPG dataset, showing miles per gallon versus horsepower with points colored by origin and sized by weight. The visualization is built using the Vega-Lite API in JavaScript, which programmatically constructs a Vega-Lite specification that is then rendered by Vega. Data is loaded asynchronously from a CSV URL using D3’s `csv` function, and the chart fills the viewport with a fit autosize scheme. Tooltips are enabled via the Vega Tooltip handler, and custom axis and label styles are applied through a shared configuration object.

Ssamemurk21
88% 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
88% 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
88% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a scatter plot of Auto MPG data, where each point represents a car with its miles per gallon on the x-axis, horsepower on the y-axis, and weight encoded by point size. The color distinguishes the car’s origin. The visualization is built using the Vega-Lite API, which programmatically constructs a specification that renders to SVG via Vega and Vega-Lite. Data is loaded asynchronously from a CSV URL using d3.csv. Interactive tooltips display car names, and custom configuration adjusts axis and label styling.

JJoseph Bermudez
88% match
Loading thumbnail…

cars_scatter_plot

This scatter plot visualizes relationships among automobile characteristics from the auto-mpg dataset, plotting displacement against horsepower while encoding vehicle weight through point size and model year through color. Tooltips reveal car names on hover. The visualization is built with the vega-lite-api library, which registers Vega and Vega-Lite, and loads data asynchronously via d3.csv. The chart renders responsively using an SVG renderer with the vega-tooltip Handler for interactive annotations.

Ggoldpot
88% match