Skip to main content
SimilarExport ZIP
100%

Vega-Lite API Template

✓ Published2🌍 Public
CCurran Kelleher
Last edited Nov 15, 2019
Created on Nov 15, 2019

This example visualizes the relationship between automobile displacement, horsepower, and weight using a Vega-Lite scatter plot, with each point sized proportionally to vehicle weight. The vis lazily evaluates a Vega-Lite specification constructed programmatically through the `vega-lite-api` library’s fluent interface, which registers with Vega, Vega-Lite, and D3 (d3.v5). Data is loaded asynchronously via D3’s CSV parser from a GitHub-hosted auto-mpg dataset. The chart renders as an SVG, with tooltips enabled via `vega-tooltip` and axis styling customized in a separate config module.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

Vega-Lite API Template

This example visualizes the relationship between vehicle weight, horsepower, and fuel efficiency using a scatter plot, with each car represented as a circle colored by weight and sized by miles per gallon. The visualization is built with the Vega-Lite API, which registers Vega and Vega-Lite libraries to create the chart programmatically. Data is loaded from a CSV file via d3.csv, and the final SVG output is rendered to fill the browser window. Axis styling and tooltips are customized through the provided Vega-Lite config and the vega-tooltip handler.

CCurran Kelleher
94% match
Loading thumbnail…

Vega-Lite API Template

A scatter plot displays automobile origin, horsepower, and weight, with each point sized and colored by weight and tooltips revealing model names. The visualization uses the Vega-Lite API (`vl.markCircle`, `vl.x().fieldN`, `vl.y().fieldQ`) to construct a declarative spec, rendered as SVG via Vega-Lite and Vega. Data loads from a CSV of the Auto MPG dataset, and a custom config adjusts axis styling and font sizes. The example demonstrates programmatic chart building, programmatic width/height fitting, and tooltip integration via the `vega-tooltip` Handler.

Mmiklud
93% match
Loading thumbnail…

Vega-Lite API Template

This example visualizes the relationship between vehicle horsepower, weight, and fuel efficiency across different origins using a scatter plot. The visualization is built with the Vega-Lite API, which programmatically constructs a Vega-Lite specification through chained method calls such as `vl.markCircle()` and `vl.encode()`. Data comes from an auto-mpg CSV loaded via `d3.csv`, and the chart renders as an SVG using Vega’s rendering engine with tooltip support from Vega-Tooltip. The visualization is configured with custom axis and label styling to improve readability.

Mm1k3yp
93% match
Loading thumbnail…

Vega-Lite API Template

This example demonstrates a scatter plot of automobile data, using the Vega-Lite API abstraction over the Vega and Vega-Lite libraries. The visualization encodes vehicle weight and horsepower on the x and y axes, with color mapping to origin and point size reflecting miles per gallon. Data is loaded asynchronously from a CSV via d3’s csv method. The API’s programmatic interface constructs the mark specification, while a custom config enhances readability.

Ccoltonjcox92
92% match
Loading thumbnail…

Vega-Lite API Template

This example visualizes the relationship between engine displacement and horsepower using a scatter plot of vehicle data. The visualization employs a Vega-Lite specification constructed programmatically via the vega-lite-api library, with data loaded from a CSV file using d3.csv. The chart renders as a single SVG element sized to fit the viewport, with points colored by opacity to reveal density. Axis styling and font sizes are customized through a Vega-Lite configuration object, while tooltips are enabled through vega-tooltip.

GGnav3852
92% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between engine displacement and vehicle weight using a scatter plot of the auto-mpg dataset. The visualization is built with the Vega-Lite API, which registers Vega and Vega-Lite libraries to render an interactive SVG chart. Points are styled with size, opacity, and tooltips showing car names, while the chart automatically fits the window dimensions. Data loading uses D3's `csv` function, and appearance is customized through a reusable configuration object that adjusts axis labels, titles, and tooltip styling.

Llingfa
92% match
Loading thumbnail…

Vega-Lite API Template

This example demonstrates a scatter plot visualization of automotive data, showing the relationship between vehicle weight, horsepower, and fuel efficiency (mpg). The visualization uses the Vega-Lite API to construct a circle mark with position encoding for weight and horsepower, while color and size encode weight and mpg respectively. It pulls data from a CSV file using d3's `csv` method, and renders the chart as an SVG with a tooltip handler. The code registers Vega-Lite and uses its high-level declarative syntax to define the plot, with custom configuration for axis styling and dark text labels.

MMilena Belianovich Holtman
92% match
Loading thumbnail…

Vega-Lite API Template

This example visualizes automobile data from a CSV file, plotting engine displacement against horsepower as a scatter plot with points colored by model year, sized by vehicle weight, and displaying car names on tooltip. The visualization is built using the Vega-Lite API, which programmatically constructs a specification that is rendered as SVG through Vega and Vega-Lite. The data is loaded asynchronously via D3's `csv` function, and the chart includes visual customization through a custom config object that adjusts axis and label styling.

CCurran Kelleher
92% match