Skip to main content
SimilarExport ZIP
100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public
CCecilia831
Last edited Jun 5, 2021
Created on Jun 5, 2021

This visualization displays the relationship between fuel efficiency (mpg), horsepower, origin, and weight for a set of automobiles. The code uses the Vega-Lite API to construct a scatter plot with circle marks, encoding mpg on the x-axis, horsepower on the y-axis, origin as color, and weight as size. Data is loaded from the UCI Machine Learning Repository's Auto MPG dataset via a CSV file, processed using `d3.csv`. The visualization is rendered as an SVG through Vega-Lite, with a custom configuration for axis styling and tooltips.

AI-generated description

A visualization constructed using the vega-lite-api.

The data shown here comes from the UCI Machine Learning Repository: Auto MPG Data Set, via Gist: Scatter Plot with Menus.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays the relationship between fuel efficiency (mpg) and horsepower for a set of automobiles, with points colored by origin and sized by weight, using the vega-lite-api to construct a scatter plot. The code loads CSV data from the UCI Auto MPG dataset via d3.csv, then renders the chart with Vega-Lite and Vega, configured with a custom dark theme for improved readability. Hovering over a point reveals the car’s name through a vega-tooltip handler. The visualization fills the entire viewport and uses a fit autosize mode with zero-suppressed scales.

Hhimchan94
95% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between fuel efficiency, horsepower, weight, and origin using data from the UCI Auto MPG dataset. Scatter plots map miles per gallon and horsepower, while point size encodes vehicle weight and color distinguishes geographic origin. The visualization is built with the Vega-Lite API, which registers Vega and Vega-Lite libraries, and uses d3.csv for data loading. Custom axis styling and tooltips enhance readability, with the view rendered as an SVG that fits the full window.

SSpuddy2884
95% match
Loading thumbnail…

Fork of Vega-Lite API Template

This dashboard visualizes the relationship between fuel efficiency (MPG), horsepower, origin, and weight in a scatterplot of the Auto MPG dataset from the UCI Machine Learning Repository. Each circle is positioned by MPG and horsepower, colored by country of origin, and sized according to vehicle weight. The example uses the Vega-Lite API, registering `vega` and `vega-lite` libraries to build a declarative spec programmatically. Data is loaded via `d3.csv`, and the chart renders as an SVG with custom tooltips provided by the `vega-tooltip` handler.

Aaakarshgoel01
95% match
Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays the relationship between fuel efficiency (mpg), horsepower, weight, and origin for a set of automobiles. Each circle’s position, size, and color encode the quantitative and categorical attributes, with tooltips revealing vehicle names on hover. The chart is built using the Vega-Lite API, which registers Vega and Vega-Lite libraries, and retrieves its dataset from the UCI Machine Learning Repository’s Auto MPG dataset via a CSV loaded with d3.csv. The code customizes axis styling and uses a responsive, full-window layout for presentation.

Bbilalialikissankpeyi
95% match
Loading thumbnail…

Fork of Vega-Lite API Template

This visualization shows the relationship between fuel efficiency (miles per gallon), horsepower, weight, and country of origin for a sample of automobiles from the UCI Auto MPG dataset. A scatter plot maps mpg to the horizontal axis and horsepower to the vertical axis, with point size encoding weight and color distinguishing origin. The implementation uses the Vega-Lite API to declare the chart specification, while d3.csv loads the remote dataset. Custom axis styling and tooltips are configured through Vega-Lite’s config object and the Vega Tooltip handler, rendering in SVG.

EEngineerRajeev
95% match
Loading thumbnail…

Fork of Vega-Lite API Template

This scatter plot visualizes the relationship between fuel efficiency (mpg) and horsepower for classic automobiles, with point size encoding weight and color indicating country of origin. The visualization is built using the Vega-Lite API, which wraps Vega-Lite specifications in JavaScript methods. Data is loaded asynchronously from a CSV file via d3.csv, sourced from the UCI Machine Learning Repository’s Auto MPG dataset. The code configures axis labels, tooltips, and a fixed-point rendering style, and renders the chart to SVG using the Vega renderer.

Iiblub
95% match
Loading thumbnail…

Fork of Fork of Fork of Vega-Lite API Template

This visualization displays the relationship between fuel efficiency (mpg), horsepower, weight, and origin for cars from the UCI Auto MPG dataset. Using the Vega-Lite API with D3.js for data loading, it renders a scatter plot with circles sized by weight and colored by origin, featuring interactive tooltips that reveal car names. The code integrates Vega, Vega-Lite, and Vega-Tooltip libraries within a D3 framework, customizing axis styles and plot dimensions to fit the full browser viewport.

NNaimisha-M
95% match
Loading thumbnail…

Fork of Fork of Vega-Lite API Template

This visualization displays the relationship between fuel efficiency (mpg), horsepower, and weight for a sample of automobiles, colored by country of origin. Using the Vega-Lite API with D3.js for data loading, it renders a scatter plot where circle size encodes vehicle weight and tooltips reveal the car model name. The data comes from the UCI Machine Learning Repository's Auto MPG dataset, loaded via `d3.csv`. The visualization pipeline combines `vl.markCircle`, `vl.x`, and `vl.y` encodings with a custom configuration for styling and tooltip handling.

EEngineerRajeev
95% match