Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Mar 15, 2022

Created on Mar 12, 2022

This example visualizes the relationship between horsepower, acceleration, weight, and origin for cars in the Auto MPG dataset from the UCI Machine Learning Repository. A scatter plot maps horsepower to the x-axis and acceleration to the y-axis, with point size encoding weight and color distinguishing origin, while tooltips reveal car names. It is built with the Vega-Lite API (via `vl.markCircle` and `vl.encode`), configured through `config.js`, and loaded using D3’s `csv` function. The rendering pipeline combines Vega, Vega-Lite, and vega-tooltip, with the chart filling the browser window.

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 automobile acceleration, horsepower, and weight using an interactive scatter plot. Data from the UCI Auto MPG dataset is fetched as CSV via d3.csv, then rendered as circles over a dark-themed axis. The visualization leverages the Vega-Lite API (vl) with a custom config to stylize fonts and colors, while Vega-Tooltip provides hover details. The chart is dynamically sized to fit the browser window using window.innerWidth and window.innerHeight.

SSam Hege

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between acceleration, horsepower, and origin for automobiles in the UCI Machine Learning Repository’s Auto MPG dataset. Each car is plotted as a semitransparent circle, with color encoding the country of origin and tooltips revealing the model name. Built using the Vega-Lite API, the visualization loads data via d3.csv, renders with Vega’s SVG output, and applies custom axis and label styling from a shared configuration. The chart resizes to fit the browser window and uses Vega Tooltip for interactive hover details.

AAmnaRizvi-S

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization shows the relationship between vehicle weight, horsepower, and origin for cars in the Auto MPG dataset from the UCI Machine Learning Repository. A scatter plot encodes weight on the x-axis and horsepower on the y-axis, with circles colored by origin and sized by weight. Tooltips reveal the car name. The chart is built using the Vega-Lite API with d3.v5 for data fetching, rendered as an SVG, and customized with a dark axis and label configuration.

JJosh Gilfillan

93% match

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

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between vehicle horsepower, fuel efficiency (mpg), weight, and acceleration for a dataset of automobiles. It encodes weight as color and acceleration as circle size, with tooltips displaying car names. The visualization is built using the Vega-Lite API, which wraps Vega and Vega-Lite specifications, with data loaded asynchronously via D3’s `csv` function from an external URL. The chart is rendered in SVG using vega-tooltip for interactivity, while custom configuration adjusts axis appearance.

MMarmiya

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

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between fuel efficiency, horsepower, weight, and country of origin for cars from the UCI Auto MPG dataset. The scatter plot encodes miles per gallon on the x-axis, horsepower on the y-axis, color by origin, and point size by weight. It is built with the Vega-Lite API, which registers Vega, Vega-Lite, and Vega-Tooltip to render an interactive SVG chart. Data is loaded asynchronously via D3’s `csv` function, while the visualization code uses `vl.markCircle`, `.encode`, and `vl.x().fieldQ()` to define the marks and scales.

Aakiannejad123

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between horsepower and acceleration for automobiles from the auto-mpg dataset. A scatter plot encodes acceleration on the x-axis and horsepower on the y-axis, with semi-transparent points to reveal density. The visualization is built using the Vega-Lite API in conjunction with D3’s `csv` loader to fetch data. Vega and Vega-Lite handle rendering, while vega-tooltip provides interactive hover details. The code customizes axis styling and removes chart domains for a cleaner appearance.

AAlejo Cortiñaz

93% match