Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited May 13, 2022

Created on May 13, 2022

This example shows an interactive scatterplot of automobile data, plotting engine displacement against horsepower for individual car models. Each point represents a vehicle, with tooltips revealing the car’s name on hover. The visualization uses the Vega-Lite API to declare the chart specification, while D3’s `csv` function loads the auto-mpg dataset from a GitHub gist. The rendering relies on Vega and Vega-Lite scripts, with a custom dark-themed configuration for axis labels and titles, and the chart automatically fits the browser window dimensions.

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 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 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 data, plotting engine displacement against horsepower from an auto-mpg CSV dataset. Each point represents a car model, with tooltips revealing the vehicle’s name. The visualization is built using the Vega-Lite API, which composes a markPoint encoding with quantitative fields, and renders via Vega and Vega-Lite libraries. Custom configuration styles axes and labels, while `d3.csv` loads the external data source.

Ssd2beatles

96% match

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

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

96% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a scatter plot of automobile data, with engine displacement on the x-axis and horsepower on the y-axis. Each point is semi-transparent, allowing overlapping points to reveal density. It uses the Vega-Lite API to declaratively build the visualization, with D3’s CSV reader to load the auto-mpg dataset. The Vega tooltip handler is enabled for interactive hover details, and the chart resizes to fit the window.

HHoang Doan

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatter plot of automobile data, mapping engine displacement on the x-axis against horsepower on the y-axis, with each point representing a car model and its name shown as a tooltip on hover. The visualization uses the Vega-Lite API to define the chart specification programmatically, while D3’s `csv` function loads the dataset from a GitHub gist. The `vega` and `vega-lite` libraries handle rendering to SVG, and `vega-tooltip` provides interactive hover details. Custom axis styling and opacity settings are applied via the `config.js` file.

Mmisstong

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

95% match