Vega Vehicle Scatter Plot

100%

Vega Vehicle Scatter Plot

✓ Published1🌍 Public

Last edited Oct 15, 2021

Created on Oct 13, 2021

This example renders a scatter plot of vehicle data from the auto-mpg CSV dataset, showing the relationship between weight, horsepower, and miles per gallon, with origin as a color-coded category. Built with React and the Vega-Lite API, it uses `vl.markCircle` to encode fields for x, y, size, color, and tooltip, while the `config.js` file customizes axis styles and label appearance. The visualization fetches data asynchronously via `d3.csv`, registers the Vega tooltip handler for interactive tooltips, and dynamically sizes the plot to fit the window using `autosize`.

AI-generated description

Vega Lite API

MIT Licensed

Similar vizzes

Loading thumbnail…

Vega-Lite API Template

This example demonstrates a scatter plot of automobile data, showing the relationship between vehicle weight, horsepower, and miles per gallon. The visualization uses the Vega-Lite API within a React framework, loading data from a CSV file via D3’s `csv` method. It renders a circle mark for each car, with color encoding weight, size encoding mpg, and tooltips revealing the car name. The code registers Vega-Lite with Vega and integrates the Vega Tooltip handler for interactive labels.

RRahul Gupta

92% match

Loading thumbnail…

Vega-lite

This example visualizes the relationship between vehicle weight, horsepower, and fuel efficiency (mpg) in a scatterplot. It uses the Vega-Lite API to declare point marks with multiple encodings—x maps to weight, y maps to horsepower, while color, size, and opacity encode additional quantitative fields. The code registers Vega-Lite with Vega and integrates React for rendering, loading data via `d3.csv` from an external auto-mpg dataset. Tooltips are enabled through the `vega-tooltip` Handler, and the chart auto-fits to the window dimensions.

RRoland

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

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

90% match

Loading thumbnail…

Vega-Lite API Template

This example displays a scatter plot of auto-mpg data, encoding horsepower, weight, and origin. A circle mark uses quantitative axes for mpg and horsepower, color by origin, and size by weight. It features a tooltip for vehicle names. Built with the Vega-Lite API, it renders an SVG chart using vega-lite-api, vega, vega-lite, and d3.csv, with custom styling via a config object. The data comes from the UCI Machine Learning Repository Auto MPG dataset, loaded asynchronously and displayed with interactive tooltips.

CCurran Kelleher

90% match

Loading thumbnail…

vega

This example visualizes automobile data using a Vega-Lite scatter plot, with circles positioned by weight and horsepower, colored by origin, sized by miles per gallon, and showing car names on hover. The visualization is built with the vega-lite-api library, which compiles specifications to Vega, and is rendered as an SVG using the vega view. Data is loaded asynchronously from a CSV file with d3.csv, and the chart is dynamically sized to fit the window. The code includes custom styling for axes and tooltip formatting.

MMatt Lane

89% match

Loading thumbnail…

Vega-Lite API Template

This interactive scatter plot visualizes the relationship between vehicle weight, horsepower, and fuel efficiency (mpg) in the Auto MPG dataset from the UCI Machine Learning Repository. The visualization uses the Vega-Lite API to declaratively define a markCircle with quantitative scales, color-encoding by country of origin, and tooltips displaying vehicle names. Rendered as an SVG, the chart supports interactive tooltips through vega-tooltip and d3.csv for asynchronous data loading, with a custom config for axis styling and fonts.

Aahora

89% match

Loading thumbnail…

Vega-Lite API Template

This example demonstrates a scatter plot of automobile data, visualizing relationships between fuel efficiency (mpg), engine power (horsepower), vehicle origin, and weight using five visual channels. Constructed with the Vega-Lite API and D3.js, it loads CSV data from a gist and renders an interactive plot through Vega’s SVG renderer. The code uses `vl.markCircle` and `vl.x().fieldQ` to map quantitative fields, with tooltips enabled via `vega-tooltip`. Styling configurations adjust axis tick colors and label fonts for readability.

RReinaFeng

89% match