Skip to main content
SimilarExport ZIP
100%

Vega-Lite API Template II

✓ Published1🌍 Public
NNelson M
Last edited Nov 18, 2023
Created on Nov 18, 2023

This example displays a scatter plot of the auto-mpg dataset, mapping engine displacement on the x-axis and horsepower on the y-axis, with vehicle names shown via tooltips. The visualization is built entirely through the Vega-Lite API in JavaScript, using `vl.markPoint` with opacity to show data density. It loads CSV data via D3’s `csv` function, configures axis and label styling in a separate `config.js`, and renders with Vega 5 and Vega-Lite 4. The chart auto-sizes to the window and uses the Vega Tooltip handler for interactive hover details.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

Vega-Lite API Template

This example demonstrates a scatter plot of automobile data from the auto-mpg dataset, showing the relationship between engine displacement and horsepower, with tooltips displaying car names. The visualization is built programmatically using the Vega-Lite API, which registers Vega and Vega-Lite libraries to create a lightweight, declarative chart specification. Data is loaded asynchronously via d3.csv, while the layout adapts to the full viewport with custom axis styling and opacity-adjusted point marks for readability. The result renders as scalable SVG through the Vega view engine.

Ddev-ignacio-h
94% match
Loading thumbnail…

Vega-Lite API Template

This example demonstrates a scatter plot of automotive engine displacement versus horsepower, where each point represents a vehicle and tooltips reveal its model name. Built with the Vega-Lite API, it registers Vega and Vega-Lite through the `vl.register()` function and loads data from a CSV file of auto-mpg statistics using `d3.csv`. The visualization uses `vl.markPoint()` with configurable opacity and axis styling, rendered as an SVG that scales to fit the browser window via `autosize({ type: 'fit' })`.

CCurran Kelleher
94% match
Loading thumbnail…

Vega-Lite API Template

This example demonstrates a scatter plot of automobile data, mapping engine displacement on the x-axis and horsepower on the y-axis, with tooltips revealing each vehicle’s name. It uses the Vega-Lite API to declaratively define the marks and encodings, registering with Vega and Vega-Lite for rendering as SVG. Data is loaded asynchronously from a CSV file via d3.csv, while the chart’s size adapts to the browser window. Configuration customizes axis and label styling, and Vega-Tooltip provides interactive hover information.

Llaplantalaplanta
94% match
Loading thumbnail…

Vega-Lite API Template

This example demonstrates a scatter plot of auto-mpg data, mapping acceleration to the x-axis and horsepower to the y-axis, with tooltips showing car names. Built with the Vega-Lite API, it uses vl.markPoint(), vl.x(), vl.y(), and vl.tooltip() to define the encoding, while the getData.js module loads CSV data via d3.csv. The visualization is rendered as SVG through Vega, with appearance customized in config.js and an interactive tooltip provided by vega-tooltip.

RRenan Barbosa
94% match
Loading thumbnail…

Vega-Lite API Template

This example displays a scatter plot of automobile data, showing the relationship between engine displacement and horsepower, with tooltips revealing the car model name. Built with the Vega-Lite API, the visualization loads data from a CSV using `d3.csv` and renders through the `vega` and `vega-lite` libraries. Point marks are configured with a fill, a fixed size, and reduced opacity, while axis styling is customized via a config object. The chart's dimensions adapt to the window size, and interactive tooltips are enabled using `vega-tooltip`.

Rrandom-program
94% match
Loading thumbnail…

Vega-Lite API Template - Part 1

This example demonstrates a scatter plot of automotive data, showing the relationship between horsepower and acceleration, with tooltips displaying car names. Built using the Vega-Lite API, it loads the auto-mpg dataset via D3’s `csv` function. The visualization uses `vl.markPoint`, `vl.x().fieldQ`, and `vl.y().fieldQ` to encode quantitative fields, with a custom config adjusting axis and font styles. Rendered through Vega-Lite’s SVG output, it integrates vega-tooltip for interactive hover details.

JJohn Jeevasaeyan
93% match
Loading thumbnail…

Vega-Lite API Template

This example displays a scatter plot of automobile data from the Auto MPG dataset, showing miles per gallon versus horsepower with points colored by origin and sized by weight. The visualization is built using the Vega-Lite API in JavaScript, which programmatically constructs a Vega-Lite specification that is then rendered by Vega. Data is loaded asynchronously from a CSV URL using D3’s `csv` function, and the chart fills the viewport with a fit autosize scheme. Tooltips are enabled via the Vega Tooltip handler, and custom axis and label styles are applied through a shared configuration object.

Ssamemurk21
93% match
Loading thumbnail…

Fork of Vega-Lite API Template

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.

MMagarsa Gudeta
93% match