Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Dec 17, 2021

Created on Dec 17, 2021

This example displays a scatter plot of automobile engine displacement against horsepower, with a tooltip revealing the vehicle name when hovering over each point. Built with the Vega-Lite API, the visualization uses D3.js for data loading via `d3.csv`, pulling the auto-mpg dataset from a GitHub Gist. The code registers Vega and Vega-Lite, configures custom axis and label styling, and relies on `vl.markPoint` with encoded quantitative fields to generate the interactive SVG output.

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 depicts a scatter plot of automobile data, showing the relationship between engine displacement and horsepower, with tooltips revealing car names. Built with the Vega-Lite API, it uses `vl.markPoint` and `vl.encode` to define visual encodings, while D3’s `csv` loads the auto-mpg dataset. The chart is rendered as an SVG via Vega and Vega-Lite, with custom axis and label styling from the config file. Tooltips are handled by the Vega Tooltip handler.

MMagarsa Gudeta

97% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example demonstrates a scatter plot of automobile engine displacement versus horsepower, with each point representing a vehicle and tooltips revealing the model name. Built with the Vega-Lite API, the visualization uses `vl.markPoint` and `vl.x().fieldQ()`/`vl.y().fieldQ()` for quantitative axes, while `vl.tooltip().fieldN()` handles categorical labels. Data is loaded asynchronously from an auto-mpg CSV via `d3.csv`, and the chart is rendered to SVG with vega-tooltip for interactive hover details. The code also customizes axis and font styles through a shared configuration object.

JJason Tiller

97% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatter plot of automotive data, with engine displacement mapped to the x-axis and horsepower to the y-axis, using a semi-transparent point mark for each vehicle. The visualization is built with the Vega-Lite API, which composes the specification and rendering through Vega and Vega-Lite, while D3 (d3.csv) fetches the auto-mpg dataset from a remote URL. The code also applies custom axis and label styling via a config object, and includes a Vega Tooltip handler for interactive hovering.

ZZakaria Salogo

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

96% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatter plot of automobile engine displacement versus horsepower, with each point representing a car model and tooltips revealing the vehicle’s name. The visualization is built using the Vega-Lite API, which is registered with Vega and rendered as SVG, with data loaded from a CSV URL via d3’s `csv` function. The chart uses a custom configuration for axis styling and respects the browser window’s dimensions by setting width and height dynamically.

Sseitzfab

96% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example presents a scatterplot of automobile data, showing the relationship between engine displacement and horsepower, with a tooltip revealing each car's name. The visualization is built using the Vega-Lite API, which registers Vega and Vega-Lite specifications, and leverages d3.csv to load the auto-mpg dataset from a GitHub gist. The view is configured to fit the full window size, with custom axis and label styling from a config file, and uses a semi-transparent point mark to handle overplotting. The rendering is handled by Vega's SVG renderer.

SSiddhant Bhardwaj

96% match

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 displays a scatter plot of engine displacement against horsepower, with vehicle names accessible as tooltips. It uses the Vega-Lite API to construct the visualization declaratively, then renders it as SVG through Vega. The code loads automobile data from an external CSV file using `d3.csv`, and adapts the plot to the full viewport size. Configuration customizes axis and label styling for readability.

UUtsav Khatu

96% match