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

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

Fork of Vega-Lite API Template

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.

Aaymen0023

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

Fork of Vega-Lite API Template

This example displays a scatter plot of automobile displacement against horsepower, with tooltips revealing model names. The visualization is built using the Vega-Lite API, which composes a point mark with quantitative fields and a nominal tooltip encoding. The code loads CSV data from a GitHub gist via D3’s `csv` function, then renders the chart using Vega’s SVG renderer. Dark theme styling and axis configurations are applied through a custom config object to improve readability.

IIker-Navarro

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 uses the Vega-Lite API to create a scatter plot of automotive data, showing the relationship between engine displacement and horsepower, with point size mapping to vehicle weight and color encoding the model year. A tooltip reveals the car name for each point. The visualization is built using the `vega-lite-api` library, which generates Vega-Lite specifications that are rendered via the Vega engine. Data is loaded from a CSV file using D3's `csv` function, and the chart is rendered as an SVG with a custom tooltip handler from `vega-tooltip`.

GGerasimos Katsagannis