Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Mar 7, 2022

Created on Mar 7, 2022

This example uses the Vega-Lite API to render a scatter plot of automobile data from a CSV file, plotting engine displacement against horsepower with a tooltip that displays the car name. The code registers Vega, Vega-Lite, and Vega-Lite API with a tooltip handler, loads the data via d3.csv, and applies custom styling through a config object. It demonstrates a programmatic workflow where the chart specification, data loading, and rendering are separated across modules, culminating in a full-screen, interactive visualization.

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 uses the Vega-Lite API to render a scatter plot of automotive data from a CSV file, showing the relationship between engine displacement and horsepower. Each point represents a vehicle, with a tooltip displaying the car's name. The visualization leverages the Vega-Lite API to construct the mark and encoding specifications, while Vega and Vega-Lite handle rendering. The code loads the data using `d3.csv` from the `d3` library, applies custom styling through a configuration object, and uses the `vega-tooltip` handler for interactive hover details.

Aalliefeld

96% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the vega-lite-api to render a scatter plot of automobile data, showing the relationship between engine displacement and horsepower, with tooltips displaying vehicle names. The visualization loads data from a CSV file using `d3.csv`, applies a custom dark theme through a Vega-Lite config object, and fills the viewport by setting chart width and height to the browser window dimensions. Interactive tooltips are enabled through vega-tooltip's `Handler`, and the chart renders as an SVG using D3 v5.

Ggatperdut

96% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses Vega-Lite API to render a scatter plot of automobile data, showing the relationship between engine displacement and horsepower, with each point representing a car model and tooltips displaying the vehicle name. The visualization loads data from a CSV file using d3.csv and builds the chart programmatically through the vega-lite-api library, which registers with Vega and Vega-Lite. The code customizes the appearance through Vega-Lite configuration options, adjusts the chart size to fit the window, and enables interactive tooltips via the vega-tooltip Handler.

HHarshavardhan Kamarthi

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

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API with D3 to render a scatterplot of automobile data from a CSV file. The visualization encodes origin as the x-axis, horsepower as the y-axis, weight as color, and mpg as point size, with tooltips showing car names. It applies custom axis and label styling via the Vega-Lite config, and uses the vega-tooltip handler for interactive hover details. The chart is rendered as an SVG that fits the full window using the vega-lite-api’s `render()` method.

Llatifiss

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to render a scatterplot of automobile data from a CSV file, plotting engine displacement against horsepower with tooltips showing car names. The visualization relies on `vl.markPoint`, `vl.x().fieldQ()`, and `vl.y().fieldQ()` to encode quantitative fields, while the `config.js` file customizes axis and label styling for readability. Data is loaded asynchronously via `d3.csv`, and the chart is embedded using Vega, Vega-Lite, and Vega-Tooltip, with the output fitted to the full viewport.

AAshutosh5333

94% match

Loading thumbnail…

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

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to render a scatter plot of automobile data, mapping engine displacement to the x-axis, horsepower to the y-axis, and model year to color. The visualization is created programmatically via the `vl` API, with data loaded asynchronously from a remote CSV file using d3's `csv` function. The chart resizes to fit the browser window and includes a custom tooltip handler from Vega-Tooltip, while the `config` module customizes axis and label styling for improved readability.

Ddleoenri

94% match