Skip to main content
SimilarExport ZIP
100%

Fork of Vega-Lite API Template

✓ Published1🌍 Public
Ttnk-dev
Last edited Jun 21, 2021
Created on Jun 21, 2021

This example shows a scatter plot of automobile displacement versus horsepower, with a tooltip revealing car names. It uses the Vega-Lite API to declaratively define the visualization and D3’s `csv` loader to fetch the auto-mpg dataset from a GitHub gist. The view is rendered as an SVG, sized to fit the full window, with configurable axis and label styling applied via Vega-Lite’s `config` object.

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 shows a scatter plot of automobile displacement against horsepower, with each point representing a car model and tooltips revealing the vehicle name on hover. The visualization uses the Vega-Lite API to declaratively define the mark encoding and scales, while D3's `csv` function loads the auto-mpg dataset from a GitHub gist. The chart renders as a full-window SVG using Vega's renderer, with Vega-Tooltip handling interactive hover details. Custom axis and label styling from the `config` object improves readability against a clean background.

SSimon Davis
96% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a scatterplot of automobile displacement against horsepower, with tooltips displaying car model names. The visualization is built using the vega-lite-api library, which registers Vega and Vega-Lite for rendering, while D3’s `csv` function loads the auto-mpg dataset. Point opacity is set to 0.1 to reveal overlapping data density. The plot resizes to fit the window and applies custom axis and label styling from a separate config file.

Sseanmdalrymple@protonmail.com
96% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a scatterplot of automobile displacement against horsepower, with opacity to reveal overlapping points and tooltips displaying car names. The visualization is built using the Vega-Lite API, which compiles specifications to Vega, and renders with D3.js’s CSV loader to fetch the auto-mpg dataset. The code customizes axes and text styling via a config object, and integrates Vega-Tooltip for interactive hover details.

Ttjcocucci
96% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatter plot of automobile displacement against horsepower, with each point representing a vehicle and its name available via tooltip. The visualization uses Vega-Lite’s declarative API through the `vega-lite-api` library, combining it with D3’s `csv` loader to fetch the auto-mpg dataset. The plot features a dark-themed configuration, semi-transparent points, and an axis style that suppresses domain lines. Rendering is handled by Vega, with tooltip interactions enabled using `vega-tooltip`, and the chart auto-fits to the window size.

RReymond Mesuga
96% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatter plot of automobile displacement against horsepower, with each point representing a vehicle and its name available via tooltip. The visualization uses Vega-Lite’s declarative API through the `vega-lite-api` library, combining it with D3’s `csv` loader to fetch the auto-mpg dataset. The plot features a dark-themed configuration, semi-transparent points, and an axis style that suppresses domain lines. Rendering is handled by Vega, with tooltip interactions enabled using `vega-tooltip`, and the chart auto-fits to the window size.

RReymond Mesuga
96% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatter plot of automobile data from an auto-mpg CSV, showing the relationship between engine displacement and horsepower. The visualization is built using the Vega-Lite API, which composes specifications and renders them through Vega-Lite while leveraging D3’s `csv` loader to fetch and parse the data. Points are rendered as semi-transparent filled circles with tooltips that reveal vehicle names. The plot uses a custom config and a fit-to-window layout, with axis styling adjusted for readability.

Ccaptind
95% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatter plot of automobile displacement against horsepower, with tooltips revealing model names. The visualization is built using the Vega-Lite API, which composes a point mark with quantitative fields and a nominal tooltip encoding. The code loads CSV data from a GitHub gist via D3’s `csv` function, then renders the chart using Vega’s SVG renderer. Dark theme styling and axis configurations are applied through a custom config object to improve readability.

IIker-Navarro
95% match
Loading thumbnail…

Fork of Fork of Vega-Lite API Template

This example plots automobile data as a scatterplot of displacement against horsepower, with points colored by origin and hover tooltips showing car names. It uses the Vega-Lite API to declare the visualization, registered with Vega and Vega-Lite, while D3’s `csv` method loads the auto-mpg dataset from a GitHub gist. The resulting SVG view is rendered across the full browser window with custom axes, label styling, and tooltip handling provided by Vega Tooltip.

NNikhilchiguru-8
95% match