Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Apr 25, 2022

Created on Apr 20, 2022

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.

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

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 from the auto-mpg CSV dataset, plotting displacement against horsepower with a tooltip revealing the car model. The visualization is built programmatically via `vl.markPoint` and encode methods, with the chart filling the browser window. Appearance is customized through a config object that removes axis domains and adjusts label styling, while `d3.csv` loads the data and a Vega Tooltip handler enables interactive hover details.

KKristopher Skelton

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatter plot of automotive data, mapping engine displacement on the x-axis against horsepower on the y-axis, with each point’s opacity and size fixed. The visualization uses the Vega-Lite API, registered with vega and vega-lite, to render the mark as SVG. Data is loaded asynchronously via D3’s `csv` from a remote GitHub gist, with axis labels and tooltips showing the vehicle name. The view adapts to the full window size and includes a config for styling.

Aarmansepahvand

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to render a scatterplot of automotive data from a CSV, mapping engine displacement and horsepower onto the x- and y-axes, with color encoding by origin and point size representing miles per gallon. It loads the data via `d3.csv` and builds the visualization with `vl.markPoint`, `vl.x`, `vl.y`, and other encoding functions, then renders to SVG using Vega and Vega-Lite, with a custom tooltip handler and configuration for improved readability.

AAnHaiTrinh

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

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a scatter plot of automobile data, mapping engine displacement on the x-axis and horsepower on the y-axis, with a tooltip displaying the vehicle name on hover. It uses the vega-lite-api to construct the visualization spec, which is then rendered through Vega-Lite and Vega, with d3.csv loading the data from a remote URL. The chart is configured with custom axis and label styling, and it automatically fits the full browser window.

Sstefanpullen

94% match