Vega-lite test1

100%

Vega-lite test1

✓ Published0🌍 Public

Last edited Jun 1, 2022

Created on Jun 1, 2022

This visualization displays the relationship between engine displacement (mpg), horsepower, weight, and country of origin for various automobile models. The data originates from the UCI Machine Learning Repository’s Auto MPG dataset. It is rendered using the Vega-Lite API, with vega-lite-api wrapping vega-lite and vega for chart generation, while d3 fetches the JSON data. The chart uses an interactive scatter plot with tooltips, circle size representing vehicle weight, and color indicating origin, with a total user session count displayed in the header.

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…

Vega-Lite API test

This example visualizes the relationship between fuel efficiency (mpg), horsepower, weight, and origin using the Auto MPG dataset from the UCI Machine Learning Repository. A scatter plot displays each car as a circle, with position encoding mpg and horsepower, color indicating origin, and size mapping to weight. Hovering reveals the car name via tooltip. Built with the Vega-Lite API, the code registers vega and vega-lite, configures SVG rendering, and customizes axis and label styling through a configuration object. Data is loaded asynchronously via d3.csv from a Gist, with the visualization sized to fit the viewport.

HHalcyonWjr

92% match

Loading thumbnail…

Vega-Lite API Template

A scatter plot of auto-mpg data shows the relationship between vehicle weight, horsepower, and fuel efficiency, with points colored by country of origin and sized by miles per gallon. The visualization is built with the Vega-Lite API, registering both Vega and Vega-Lite engines, and leverages D3’s `csv` module for data loading from a UCI Machine Learning Repository dataset. SVG rendering and tooltip interactions are configured through Vega-Lite’s `config` and `Handler` interfaces.

CCarlos Caballero

91% match

Loading thumbnail…

Vega-Lite API Template

This example visualizes the relationship between fuel efficiency (mpg), horsepower, weight, and country of origin for cars from the UCI Machine Learning Repository’s Auto MPG dataset. It uses the Vega-Lite API to compose a scatter plot with colored points by origin, sized by weight, and includes tooltips showing car names. The code registers the API with Vega and Vega-Lite, then fetches CSV data via D3’s `csv` method, applying a custom dark theme for readability. The view renders to SVG and fits the window dimensions.

Zzhangwbhi

91% match

Loading thumbnail…

Vega-Lite API Template

This example visualizes the relationship between fuel efficiency (mpg), horsepower, weight, and country of origin for automobiles from the UCI Machine Learning Repository Auto MPG dataset. It displays a scatter plot where each circle’s position encodes mpg and horsepower, color encodes origin, and size encodes weight. The code uses the Vega-Lite API to build the chart declaratively, with the `vl.markCircle`, `vl.x()`, `vl.y()`, and `vl.color()` methods. It loads CSV data via D3’s `csv` function, registers Vega-Lite components, and renders an interactive SVG with tooltips.

NNelson M

91% match

Loading thumbnail…

Vega-Lite API Template

This example presents a scatter plot of automobile data from the UCI Machine Learning Repository’s Auto MPG dataset, showing relationships between miles per gallon, horsepower, weight, and country of origin. The visualization is built using the Vega-Lite API (`vl.markCircle`, `vl.encode`) in a JavaScript framework, with data loading handled by `d3.csv` from D3 v7. The code registers Vega-Lite and Vega, applies custom axis styling from `config.js`, and renders a responsive SVG chart that fills the browser window with tooltips enabled via the Vega Tooltip handler.

OOleg Zhernovoy

90% match

Loading thumbnail…

Vega-Lite API Template

This example visualizes the relationship between fuel efficiency, horsepower, weight, and origin for vehicles from the Auto MPG dataset. It displays a scatter plot of mpg against horsepower, with point size encoding weight and color distinguishing vehicle origin. The visualization is built using the Vega-Lite API, which wraps Vega-Lite and Vega in a JavaScript interface, combined with d3.csv for data loading from a Gist-hosted CSV file. A custom tooltip from vega-tooltip displays the vehicle name, while the chart autosizes to fill the browser window.

Llakalia@wpi.edu

90% match

Loading thumbnail…

11-Vega-Lite API Template

This visualization displays auto-mpg data from the UCI Machine Learning Repository as a scatter plot of engine displacement against horsepower, with circle size encoding vehicle weight, color encoding origin, and tooltips showing model names. It uses the vega-lite-api JavaScript API to construct the Vega-Lite specification, which is rendered with Vega and Vega-Lite libraries. The code loads CSV data via d3.csv, applies a custom configuration for axis styling and font sizes, and fits the chart to the full browser window.

Mmygynt679

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

90% match