Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Jul 2, 2021

Created on Jul 2, 2021

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.

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), 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 Vega-Lite API Template

This visualization displays the relationship between a car's fuel efficiency (mpg) and its horsepower for various vehicle origins, with the size of each circle representing the car's weight. The chart is built using the Vega-Lite API, which generates a specification that is rendered as an SVG. The code registers both Vega and Vega-Lite, uses a `d3.csv` call to load the Auto MPG dataset from the UCI Machine Learning Repository, and customizes axis and font styling for readability.

Hhiteshk-itis

95% match

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

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between vehicle weight, horsepower, and fuel efficiency (mpg) in the Auto MPG dataset from the UCI Machine Learning Repository. Each circle represents a car, positioned by mpg on the x-axis and horsepower on the y-axis, with color encoding the country of origin and size encoding weight. The visualization is built using the vega-lite-api library in conjunction with Vega-Lite and Vega, while d3.csv loads the remote dataset. A custom config object adjusts axis styling, and the chart automatically fits the browser window with a tooltip displaying the car model name.

RROU

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

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between fuel efficiency (mpg) and horsepower for cars, with each point colored by country of origin and sized by vehicle weight. It uses data from the UCI Machine Learning Repository’s Auto MPG dataset, loaded via `d3.csv`. The graphic is built declaratively using the Vega-Lite API, specifying a circle mark with encodings for position, color, and size. The code registers Vega, Vega-Lite, and the Vega-Lite API, then renders an interactive SVG chart fitted to the browser window, with a tooltip provided by Vega-Tooltip.

Yyejichun@naver.com

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository, plotting each car’s fuel efficiency (mpg) against its horsepower. Circles are colored by country of origin and sized by vehicle weight, with tooltips revealing the car model name. The visualization is built using the Vega-Lite API, which wraps d3.csv for data loading and vega-tooltip for interactive hover details. The plot dynamically fits the full viewport width and height, while custom axis and label styling are defined in a separate config file to improve readability.

Kkosakase

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

94% match