Fork of Vega-Lite API Template

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

Fork of Vega-Lite API Template

This example shows a scatter plot of automobile displacement against horsepower, colored semi-transparently to reveal data density, with tooltips displaying car names. It uses the Vega-Lite API to construct the visualization declaratively, while D3.js handles CSV loading from an external dataset via `d3.csv`. The chart is rendered as an SVG, with custom configuration for axis styling and typography. The code registers Vega-Lite with the Vega runtime and integrates Vega-Tooltip for interactive hover details.

VVishwanath Hegde

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

Fork of Vega-Lite API Template

This example shows a scatter plot of automobile displacement against horsepower, with tooltips revealing vehicle names. Each point uses a semi-transparent fill to visualize overlapping data. The visualization is built using the Vega-Lite API, with custom configuration for axis styling and label fonts. Data is loaded asynchronously from a CSV file via `d3.csv`, and the chart is rendered as SVG using Vega-Lite’s `markPoint` encoding with quantitative scales for both axes.

DDaMei1993

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

Fork of Vega-Lite API Template

RReymond Mesuga

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

Fork of Vega-Lite API Template

This interactive scatter plot visualizes the relationship between vehicle displacement and horsepower, with tooltips revealing car model names. Built with the Vega-Lite API, it loads CSV data from a GitHub repository, renders points with an SVG renderer, and uses Vega Tooltip for hover details. The visualization auto-sizes to the browser window, applying custom color and font styling from a JSON config.

SSamirAhma