Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Fork of Vega-Lite API Template

✓ Published0🌍 Public
NNaimisha-M
Last edited Jul 3, 2022
Created on Jul 3, 2022

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.

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 interactive scatter plot visualizes the relationship between horsepower, miles per gallon, weight, and origin for cars from the UCI Auto MPG dataset. Built with the Vega-Lite API and rendered via Vega, it encodes each car as a circle positioned by acceleration and engine displacement, with color indicating country of origin and size reflecting vehicle weight. Tooltips display car model names. The visualization uses D3's csv loader to fetch data from a Gist URL, and the chart resizes to fit the browser window.

NNaimisha-M
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 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.

CCecilia831
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
Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatter plot explores the relationship between fuel efficiency (mpg) and horsepower for cars, with point color indicating region of origin and point size representing vehicle weight. The visualization is built using the Vega-Lite API, which programmatically constructs a Vega-Lite specification that is rendered to SVG via Vega and Vega-Lite libraries. Data comes from the UCI Auto MPG dataset, loaded asynchronously with d3.csv. The code customizes axis styling through a config object and adds interactive tooltips displaying car names through the Vega Tooltip handler.

Ttknaik
95% match
Loading thumbnail…

Fork of Fork of Vega-Lite API Template

This scatterplot visualizes the relationship between miles per gallon, horsepower, weight, and origin for vehicles from the UCI Auto MPG dataset. It uses Vega-Lite API to create a circle mark encoding mpg and horsepower on the axes, weight for size, and origin for color, with hover tooltips. The code loads CSV data via d3.csv, registers the Vega-Lite API with vega and vega-lite, and renders to SVG through vega-tooltip's handler.

Vvigneswaran009
94% match
Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays the relationships among weight, horsepower, and fuel efficiency (mpg) for vehicles in the UCI Auto MPG data set, with each car plotted as a semi-transparent circle whose size reflects mpg, color encodes weight, and tooltips reveal model names. It uses the Vega-Lite API to declare the scatter plot specification, which is registered with Vega and Vega-Lite libraries. The data is loaded asynchronously via d3.csv, while d3.v5 provides the underlying parsing, and the visualization scales responsively to fill the browser window with customized axis and label styling for readability.

SS-Zins
94% match
Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays the relationship between fuel efficiency (mpg), horsepower, weight, and origin for classic automobiles, using a scatter plot with circle size encoding weight and color encoding country of origin. Hovering reveals car model names via tooltips. The chart is built with the Vega-Lite API, which translates a declarative specification into Vega and renders as SVG, with data sourced from the UCI Auto MPG dataset fetched via D3’s CSV loader. Custom axis and label styling come from a shared configuration object.

Pparshwa30122002@gmail.com
94% match