Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Aug 24, 2022

Created on Aug 24, 2022

This visualization displays the relationship between miles per gallon, horsepower, origin, weight, and car name from the Auto MPG dataset. The Vega-Lite API constructs a scatter plot where engine weight encodes point size and country of origin drives color, with a tooltip for each vehicle. It uses `vl.markCircle`, `vl.x().fieldQ('mpg')`, and `vl.y().fieldQ('horsepower')` for quantitative axes, while `config.js` customizes axis and label styling, and `getData.js` loads the CSV via `d3.csv`.

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 miles per gallon, horsepower, weight, and origin for automobiles from the Auto MPG dataset. Using the Vega-Lite API, it renders a scatter plot with color encoding for origin and size encoding for weight, while tooltips reveal vehicle names. The code leverages `vl.markCircle`, `vl.x()`, `vl.y()`, and `vl.color()` to define the marks, with data loaded via d3.csv from a GitHub Gist.

MMerceEscalante

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This scatter plot visualizes the relationship between miles per gallon, horsepower, weight, and origin for classic automobiles from the Auto MPG dataset. The visualization uses the Vega-Lite API with D3.js as its rendering framework, building interactive marks with circles sized by weight and colored by country of origin. Data loads asynchronously from a CSV file fetched via D3's CSV parser. The chart automatically fits the browser window and includes a tooltip showing each car's name, powered by the Vega Tooltip handler.

Xxychen0612.cs09@nycu.edu.tw

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This scatter plot visualizes the relationship between miles per gallon and horsepower for cars from the Auto MPG dataset, with color mapping to region of origin and point size encoding weight. Built with the Vega-Lite API, the visualization uses the `vl.markCircle` and `vl.encode` specifications to define the marks and channels, while `vl.x()` and `vl.y()` handle quantitative scales. Data is loaded asynchronously via D3’s `csv` function, and the chart is rendered with Vega, Vega-Lite, and Vega-Tooltip for interactive hover details.

AAakarshak Sthapak

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between miles per gallon, horsepower, weight, and country of origin for vehicles in the Auto MPG dataset from the UCI Machine Learning Repository. A scatter plot encodes weight as circle size and origin as color, with tooltips showing vehicle names. It is built using the vega-lite-api to construct the specification, with vega-lite and vega handling rendering, while d3.csv loads the data. The visualization is configured with custom axis and label styling via the config object.

Yyijunqian

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes a scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository, exploring the relationship between miles per gallon, horsepower, and weight. Points are colored by origin and sized by weight, with hover tooltips displaying car names. Built with the Vega-Lite API, the code uses `vl.markCircle` and `vl.encode` to define the visualization, while `vl.x().fieldQ('mpg')` and `vl.y().fieldQ('horsepower')` map quantitative fields. The data loads via `d3.csv`, and the chart renders through the Vega-Lite API's `render()` method.

XXiyu Zhai

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization presents a scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository, showing the relationship between miles per gallon and horsepower for various car models. Each point’s size encodes vehicle weight, color indicates the country of origin, and hovering reveals the car name. Built with the Vega-Lite API, it registers Vega, Vega-Lite, and d3, using `vl.markCircle` for encoding and `d3.csv` for loading data. The plot spans the full browser window with a custom dark color config for axis labels and titles.

NNana Kwame

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This scatter plot visualizes the relationship between miles per gallon, horsepower, weight, and origin for vehicles from the UCI Auto MPG dataset. The visualization uses the Vega-Lite API with D3.js to load CSV data and render interactive circles with tooltips. Point color encodes the vehicle’s country of origin, while point size reflects weight. The chart is configured to fill the browser window and uses custom axis and label styling for clarity. Data is fetched via d3.csv from a Gist-hosted CSV file.

JJasmine Ye Han

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization uses a scatter plot to display the relationship between miles per gallon and horsepower for vehicles from the Auto MPG dataset, with color indicating origin and dot size representing weight. Built with the Vega-Lite API, it loads data via `d3.csv` from a remote URL and uses custom configuration for axis styling. The visualization also incorporates the `vega-tooltip` handler for interactive hover details, and the chart automatically fits the browser window dimensions.

SShasvathan Pathmanaban

94% match