Skip to main content
SimilarExport ZIP
100%

Vega-Lite API Template

✓ Published8🌍 Public
CCurran Kelleher
Last edited Sep 9, 2020
Created on Sep 9, 2020

This example demonstrates a Vega-Lite API template for creating a scatterplot visualization. It plots engine displacement against horsepower, with point size encoding the count of cars at each binned coordinate pair. The visualization uses the `vega-lite-api` library to programmatically build the specification, fetching automobile data from a CSV file via `d3.csv`. The rendered chart incorporates a custom config for axis styling and tooltips via `vega-tooltip`, and automatically fits to the window dimensions.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

Vega-Lite API Template

This example uses the Vega-Lite API to render a scatter plot of automotive data from a CSV file, mapping engine displacement to horsepower and coloring points by model year. The visualization is built programmatically by registering Vega-Lite with the `vl` API, fetching data via `d3.csv`, and applying custom axis and label styling from a config object. The chart is rendered as an SVG, with tooltips enabled through Vega Tooltip to display car names on hover.

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

This example uses the Vega-Lite API to render a scatterplot of automotive data from a CSV file, plotting engine horsepower against the origin of each vehicle. The visualization employs semi-transparent black circles to reveal overlapping points, with tooltips displaying car names on hover. The code registers Vega, Vega-Lite, and Vega-Tooltip libraries, fetches data via d3.csv, and applies a custom configuration for axis styling and label fonts. The chart dynamically fits the browser window using an autosize type of “fit” with padding.

CCurran Kelleher
94% match
Loading thumbnail…

Vega-Lite API Template

This visualization uses a scatter plot to explore the relationship between engine displacement and horsepower in automobile data. The data is loaded from a CSV file fetched from a gist URL using the `d3.csv` function. Built with the Vega-Lite API, the example registers Vega and Vega-Lite, configures an SVG renderer, and adds tooltips via the `vega-tooltip` Handler. Point marks are encoded with quantitative fields on both axes, scaled with `zero: false`, and include a tooltip displaying the vehicle name, with overall appearance customized in a separate config file.

AAustin Pagotto
94% match
Loading thumbnail…

Vega-Lite API Template

This example demonstrates a scatter plot of automobile data, showing the relationship between engine displacement and horsepower, with each point representing a car model. The visualization is built using the Vega-Lite API, which constructs a specification that is then compiled and rendered by Vega and Vega-Lite. Data is loaded asynchronously from a CSV file via `d3.csv`, and the plot is configured with custom axis styles and tooltips via the `vega-tooltip` Handler. The chart fills the browser window and uses an interactive SVG renderer.

Ddreesmpk
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 displacement against horsepower, with tooltips revealing car model names. The visualization is constructed programmatically using the Vega-Lite API, which builds an interactive chart through chained method calls. Data flows from a CSV file fetched via `d3.csv`, while the chart specification uses `vl.x().fieldQ()` and `vl.y().fieldQ()` for quantitative encodings. The rendering pipeline combines Vega and Vega-Lite libraries, with a custom configuration adjusting axis styles and font sizes for readability. The chart automatically fits to the browser window size and employs a translucent point style to show density.

Ssimfen
93% match
Loading thumbnail…

Vega-Lite API Template

This example demonstrates a scatter plot of automobile data, showing the relationship between engine displacement and horsepower, with tooltips revealing the car model name. The visualization is built programmatically using the Vega-Lite API, which constructs a Vega-Lite specification through a fluent JavaScript interface. Data is loaded from a CSV file using d3’s `csv` function, and the resulting chart is rendered as an SVG via the `v.render()` method, with custom axis and label styling applied through a configuration object.

Eestebanba
93% match