Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Jun 17, 2024

Created on Jun 17, 2024

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.

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 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.

FFlamur

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

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 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 data—engine displacement on the x-axis and horsepower on the y-axis—with tooltips displaying each vehicle’s name. The visualization is built using the Vega-Lite API, which is registered with vega and vega-lite, and rendered as an SVG via vega-tooltip for interactive hover details. The data is loaded asynchronously from a CSV file using d3.csv. The chart resizes to fill the viewport, with custom axis and label styling defined in a separate config module.

Nnecat1

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

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between engine displacement and horsepower for a set of automobiles, with tooltips revealing the car name for each point. The visualization is built using the Vega-Lite API, which composes a scatter plot using `vl.markPoint()` with `fieldQ` encodings for the quantitative axes. Data is loaded asynchronously from a CSV file containing the auto-mpg dataset via `d3.csv`. The chart is rendered as SVG, with custom axis styling defined in a config object and interactive tooltips supplied by the vega-tooltip handler.

Zzykel

95% match