Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published1🌍 Public

Last edited Dec 26, 2021

Created on Dec 26, 2021

This example demonstrates the relationship between automobile origin, model year, and name using a scatterplot of the auto-mpg dataset. The visualization reveals patterns in vehicle attributes across different manufacturers and time periods. It combines the Vega-Lite API for declarative chart specification with D3’s `csv` loader for data ingestion. The code registers Vega, Vega-Lite, and vega-tooltip, then renders an interactive SVG with origin-based color encoding, tooltips, and a fitted, full-window layout.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes automobile data by plotting car origins on the x-axis against horsepower on the y-axis, with the vehicle’s name available as a tooltip. Built using the vega-lite-api, it programs a scatter plot with semitransparent circular marks, configured to fit the entire viewport. The code loads an auto-mpg CSV dataset via D3’s `csv` method, registers Vega-Lite with a tooltip handler, and applies custom axis and label styling from a shared config module.

CChristian Rohrer

91% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a scatter plot of auto-mpg data, where each circle represents a vehicle’s origin and horsepower, with tooltips revealing the model name. The visualization is built using the Vega-Lite API, with D3.js (d3.csv) loading data from the UCI Machine Learning Repository’s Auto MPG dataset. The code registers Vega, Vega-Lite, and Vega-Tooltip, applies a custom configuration for axis and label styling, and renders the plot as an SVG that fits the browser window.

KKeyvan Rezaei

91% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between car origin and horsepower using a scatter plot of individual vehicle names as tooltips. It leverages the Vega-Lite API to declaratively define the chart, with D3.js handling CSV data loading from an online auto-mpg dataset. The visualization uses semi-transparent point marks with custom configuration for dark text and light gridlines, and it automatically sizes to fit the browser window. The code integrates Vega, Vega-Lite, and the Vega-Lite API library, with tooltip functionality provided by Vega Tooltip.

Vvarun-j312

90% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization uses the Vega-Lite API with D3 to render a scatterplot of automobile data from the auto-mpg CSV dataset. It plots horsepower against origin, with each point sized and colored by its country of origin, and includes tooltips showing vehicle names. The code registers Vega-Lite with Vega and D3, loads data via d3.csv, and configures axes and label styling for improved readability. The plot fills the entire browser window, with rendering handled through Vega’s SVG view and interactivity powered by vega-tooltip.

Nnncis

90% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between car origin and horsepower using a scatter plot. It renders points from the auto-mpg dataset, with each point colored by origin and positioned by horsepower. The visualization is built with the Vega-Lite API, which constructs a Vega-Lite specification that is then rendered by Vega. Data is loaded asynchronously via the d3.csv function, and tooltips display car names on hover. The code customizes the chart’s appearance through a config object, setting fonts and axis styles, and uses a dark color for text.

Sseanmdalrymple@protonmail.com

90% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatter plot of auto-mpg data with vehicle origin mapped to color, weight to point size, and tooltips revealing model names. It uses the vega-lite-api to compose marks and encodings, with a custom config for axis styling. Data loads via d3.csv from the UCI Machine Learning Repository, while vega-tooltip handles interactions. Rendering focuses on full-window SVG output.

SShijiaYan

90% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses a scatter plot to explore the relationships among automobile performance metrics, including engine displacement, horsepower, weight, and origin. The visualization is built with the Vega-Lite API, which programmatically constructs a Vega-Lite specification, and is rendered via Vega. It loads the auto-mpg dataset using D3’s `csv` function, then encodes the data with size and color channels. The chart is configured for full-screen display with custom axis and label styling from a separate config file, and includes a tooltip showing the car name.

Wweny1109

90% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to create a scatter plot of automobile data from the UCI Auto MPG dataset, loaded via `d3.csv`. The visualization encodes the vehicle’s country of origin on the x-axis and horsepower on the y-axis, with each point representing a car model and a tooltip showing its name. The plot uses a semi-transparent circle mark to emphasize overlapping points and is rendered on a full-window canvas via `vega-lite-api` with a custom dark-themed configuration for improved readability.

Aandrotop

90% match