Vega-Lite API Template{Temi}

100%

Vega-Lite API Template{Temi}

✓ Published0🌍 Public

Last edited Apr 14, 2021

Created on Apr 12, 2021

This interactive scatter plot visualizes the relationship between fuel efficiency (mpg) and horsepower for various car models, with point color indicating country of origin and point size reflecting vehicle weight. Built using the Vega-Lite API, the visualization reads data from the UCI Auto MPG dataset via d3.csv, renders with Vega-Lite’s markCircle encoding, and includes an interactive tooltip displaying car names. The chart dynamically fills the browser window through the API’s width, height, and autosize settings, with a custom config adjusting axis and label styling.

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 Template

This interactive scatter plot visualizes the relationship between vehicle weight, horsepower, and fuel efficiency (mpg) in the Auto MPG dataset from the UCI Machine Learning Repository. The visualization uses the Vega-Lite API to declaratively define a markCircle with quantitative scales, color-encoding by country of origin, and tooltips displaying vehicle names. Rendered as an SVG, the chart supports interactive tooltips through vega-tooltip and d3.csv for asynchronous data loading, with a custom config for axis styling and fonts.

Aahora

94% match

Loading thumbnail…

Vega-Lite API Template

This example visualizes automobile fuel efficiency and performance data from the UCI Auto MPG dataset, plotting horsepower against miles per gallon with circle size encoding vehicle weight and color encoding country of origin. The visualization is built programmatically using the Vega-Lite API, which registers Vega and Vega-Lite libraries, configures a tooltip handler, and loads CSV data via d3.csv. It generates an interactive SVG scatter plot with custom axis styling, and the view auto-fits to the browser window dimensions.

EEFezerKW

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

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatter plot visualizes the relationship between fuel efficiency (mpg), horsepower, and weight for various car models, with the country of origin represented by color. Built using the Vega-Lite API, it loads data from the UCI Auto MPG dataset and renders circles with a fixed size and opacity. The visualization leverages `vl.markCircle` and `vl.encode` for encoding, while `window.innerWidth` and `window.innerHeight` determine the canvas size. The code uses `d3.csv` for data ingestion and a custom `config` for axis styling, with tooltips handled via vega-tooltip. The visualization is generated dynamically and appended to the document body.

HHgeginat

93% match

Loading thumbnail…

Vega-Lite API Template

This interactive scatter plot visualizes automotive data from the UCI Machine Learning Repository, showing the relationship between fuel efficiency (mpg) and horsepower while encoding car origin by color and weight by circle size. Hovering reveals the vehicle name via tooltips. Built with the Vega-Lite API, the visualization chains declarative specifications programmatically, registering Vega-Lite and Vega with the vega-lite-api library. The code customizes axis styling through a shared config object, loads data via d3.csv, and renders to an SVG using Vega’s renderer with automatic window sizing.

GGang Chen

93% match

Loading thumbnail…

Vega-Lite API Template

This example demonstrates a scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository, visualizing the relationship between fuel efficiency (miles per gallon) and horsepower. Points are colored by region of origin, sized by vehicle weight, and include tooltips showing model names. The visualization is built using the Vega-Lite API, which programmatically constructs a Vega-Lite specification, then renders it with Vega 5 and D3 v5 for SVG output. Custom configuration and a Vega Tooltip handler enhance readability, while the chart automatically fits the viewport dimensions.

Rrvdv

93% match

Loading thumbnail…

Vega-Lite API_Car

This interactive scatter plot explores automobile fuel efficiency and performance using the UCI Machine Learning Repository's Auto MPG dataset. It displays miles per gallon against horsepower, with circles sized by vehicle weight, colored by country of origin, and offering tooltips for car names. Built with the Vega-Lite API for D3, the visualization leverages `vl.markCircle`, `vl.x().fieldQ()`, and `vl.y().fieldQ()` to encode these dimensions. The code loads data via `d3.csv`, applies a custom configuration for readable axes and fonts, and renders an SVG that fills the browser window.

SSkye Chen

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatter plot visualizes the relationship between fuel efficiency (mpg), horsepower, weight, and country of origin for classic automobiles. The visualization uses the Vega-Lite API to declaratively encode data dimensions onto circle position, size, and color, with tooltips revealing car names. It renders as a responsive SVG, loading data from the UCI Auto MPG dataset via d3’s `csv` function. The example primarily demonstrates how the `vega-lite-api` library can construct specifications programmatically, complemented by vega-tooltip for interactivity and custom config for styling.

Llingfa

93% match