Vega-Lite API Template

100%

Vega-Lite API Template

✓ Published1🌍 Public

Last edited Jul 24, 2020

Created on Jul 24, 2020

This visualization displays the relationship between a car's origin and its horsepower using a circle scatter plot. It is built with the Vega-Lite API, which constructs a declarative specification that is rendered to SVG. The visualization fetches auto-mpg data from a CSV file using d3.csv, defines circle marks with custom opacity and size, and maps origin to the x-axis and horsepower to the y-axis. The API registers with Vega-Lite and Vega, and includes an interactive tooltip displaying the car's name.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

Vega-Lite API Template

This visualization displays the relationship between the origin of a car and its horsepower using data from the UCI Machine Learning Repository’s Auto MPG dataset. Rendered as a circular scatter plot, each point represents a car, with opacity enhancing readability when points overlap. The code leverages the Vega-Lite API, specifically `vl.markCircle` and `vl.encode` for visual encoding, while `d3.csv` handles data loading. The visualization automatically fits the browser window and includes a custom tooltip via Vega-Tooltip, with axis styling customized through a separate configuration file.

Ggoyalshivam204

95% match

Loading thumbnail…

Vega-Lite API Template

This example displays a scatter plot of auto-mpg data, encoding horsepower, weight, and origin. A circle mark uses quantitative axes for mpg and horsepower, color by origin, and size by weight. It features a tooltip for vehicle names. Built with the Vega-Lite API, it renders an SVG chart using vega-lite-api, vega, vega-lite, and d3.csv, with custom styling via a config object. The data comes from the UCI Machine Learning Repository Auto MPG dataset, loaded asynchronously and displayed with interactive tooltips.

CCurran Kelleher

93% match

Loading thumbnail…

Vega-Lite API Template

This visualization displays automobile data from the auto-mpg dataset, plotting the origin of each vehicle against its horsepower as circles. The chart uses the Vega-Lite API within a D3.js framework, leveraging `vl.markCircle()` for the points and `vl.x().fieldN()` and `vl.y().fieldQ()` for the categorical and quantitative encodings. Data is loaded via `d3.csv`, and the rendering pipeline combines Vega, Vega-Lite, and Vega-Tooltip to provide interactive tooltips with vehicle names. A custom configuration adjusts axis styling and font sizes for improved readability.

MMonish Vassantrai

93% match

Loading thumbnail…

10.-Vega-Lite API Template

This example shows the relationship between car origin and horsepower using a scatter plot of the auto-mpg dataset, with vehicle names displayed as tooltips. The visualization is built entirely through the Vega-Lite API, which constructs a specification programmatically via `vl.markCircle`, `vl.x().fieldN`, `vl.y().fieldQ`, and `vl.tooltip()`. The code registers Vega, Vega-Lite, and Vega-Lite API, then renders the chart as an SVG with `vl.register` and `marks.render()`, using custom axis and label styling from the config object. Data is loaded asynchronously with `d3.csv` from a GitHub gist.

JJorge MataH

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

92% match

Loading thumbnail…

Vega-Lite API Scatter Plot

This scatter plot visualizes automobile data from the auto-mpg CSV dataset, showing the relationship between horsepower and origin on x and y axes. Each point represents a car model, with tooltips revealing the car name. Built with Vega-Lite API in conjunction with d3.csv for data loading, the visualization uses vega and vega-lite for chart specification, vega-tooltip for interactive hover details, and applies custom styling through a config object to adjust axis and label appearance.

CCaroline Ghisolfi

92% match

Loading thumbnail…

Fork of Vega-Lite API Template

This circular scatterplot visualizes the relationship between a car’s origin and its horsepower, using data from a CSV file of automobile specifications. Each semi-transparent dot marks a single vehicle, with the transparency building up in dense areas to reveal clusters. The visualization is generated programmatically through the Vega-Lite API, which translates the declarative spec into Vega for rendering. The `vl.markCircle` method defines the marks, while `.encode` maps the categorical `origin` field to the x-axis and the quantitative `horsepower` field to the y-axis. A toolkit is configured for enhanced axis styling and readability.

Ccaineosborne

92% match

Loading thumbnail…

Vega-Lite API Template

A scatter plot displays automobile origin, horsepower, and weight, with each point sized and colored by weight and tooltips revealing model names. The visualization uses the Vega-Lite API (`vl.markCircle`, `vl.x().fieldN`, `vl.y().fieldQ`) to construct a declarative spec, rendered as SVG via Vega-Lite and Vega. Data loads from a CSV of the Auto MPG dataset, and a custom config adjusts axis styling and font sizes. The example demonstrates programmatic chart building, programmatic width/height fitting, and tooltip integration via the `vega-tooltip` Handler.

Mmiklud

92% match