Vega-lite

100%

✓ Published1🌍 Public

Last edited Feb 5, 2022

Created on Feb 5, 2022

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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

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

94% match

Loading thumbnail…

Vega-Lite API Template - experiment

This interactive scatter plot visualizes the relationship between vehicle weight, horsepower, and fuel efficiency (mpg) using the classic auto-mpg dataset, loaded via `d3.csv` from a remote GitHub Gist. Encoded as circles with size and color mapped to quantitative fields, the chart reveals correlations among these performance metrics. Built with the Vega-Lite API for programmatic specification, it renders through Vega, Vega-Lite, and the `vega-tooltip` Handler, with automatic resizing to fit the window.

Llaplantalaplanta

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

93% match

Loading thumbnail…

Vega-Lite API Template

This example demonstrates a scatter plot visualization of automotive data, showing the relationship between vehicle weight, horsepower, and fuel efficiency (mpg). The visualization uses the Vega-Lite API to construct a circle mark with position encoding for weight and horsepower, while color and size encode weight and mpg respectively. It pulls data from a CSV file using d3's `csv` method, and renders the chart as an SVG with a tooltip handler. The code registers Vega-Lite and uses its high-level declarative syntax to define the plot, with custom configuration for axis styling and dark text labels.

MMilena Belianovich Holtman

92% match

Loading thumbnail…

Vega-Lite API Template

This example visualizes the relationship between vehicle horsepower, weight, and fuel efficiency across different origins using a scatter plot. The visualization is built with the Vega-Lite API, which programmatically constructs a Vega-Lite specification through chained method calls such as `vl.markCircle()` and `vl.encode()`. Data comes from an auto-mpg CSV loaded via `d3.csv`, and the chart renders as an SVG using Vega’s rendering engine with tooltip support from Vega-Tooltip. The visualization is configured with custom axis and label styling to improve readability.

Mm1k3yp

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

92% match

Loading thumbnail…

Vega-Lite API Template

This example visualizes the relationship between automobile displacement, horsepower, and weight using a Vega-Lite scatter plot, with each point sized proportionally to vehicle weight. The vis lazily evaluates a Vega-Lite specification constructed programmatically through the `vega-lite-api` library’s fluent interface, which registers with Vega, Vega-Lite, and D3 (d3.v5). Data is loaded asynchronously via D3’s CSV parser from a GitHub-hosted auto-mpg dataset. The chart renders as an SVG, with tooltips enabled via `vega-tooltip` and axis styling customized in a separate config module.

CCurran Kelleher

92% match

Loading thumbnail…

Vega Vehicle Scatter Plot

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`.

AAmeer Nuri

91% match