10.-Vega-Lite API Template

100%

10.-Vega-Lite API Template

✓ Published1🌍 Public

Last edited Oct 14, 2021

Created on Oct 14, 2021

This example shows the relationship between car origin and horsepower using a scatter plot of the auto-mpg dataset, with vehicle names displayed as tooltips. The visualization is built entirely through the Vega-Lite API, which constructs a specification programmatically via `vl.markCircle`, `vl.x().fieldN`, `vl.y().fieldQ`, and `vl.tooltip()`. The code registers Vega, Vega-Lite, and Vega-Lite API, then renders the chart as an SVG with `vl.register` and `marks.render()`, using custom axis and label styling from the config object. Data is loaded asynchronously with `d3.csv` from a GitHub gist.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

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 displays a scatter plot of auto-mpg data, encoding horsepower, weight, and origin. A circle mark uses quantitative axes for mpg and horsepower, color by origin, and size by weight. It features a tooltip for vehicle names. Built with the Vega-Lite API, it renders an SVG chart using vega-lite-api, vega, vega-lite, and d3.csv, with custom styling via a config object. The data comes from the UCI Machine Learning Repository Auto MPG dataset, loaded asynchronously and displayed with interactive tooltips.

CCurran Kelleher

93% match

Loading thumbnail…

Vega-Lite API Template

This example demonstrates a scatter plot of automobile data, showing the relationship between horsepower and country of origin, with tooltips revealing car names. The visualization is built using the Vega-Lite API, which programmatically constructs a Vega-Lite specification through method chaining (e.g., `vl.markPoint`, `vl.x().fieldN`). The code registers Vega, Vega-Lite, and the Vega-Lite API in a D3 v5 environment, fetches CSV data via `d3.csv`, applies custom axis and label styling from a separate config module, and renders to SVG with an interactive tooltip handler from Vega-Tooltip.

PPriteshlip10

92% match

Loading thumbnail…

Vega-Lite API Template

This visualization displays the relationship between a car's origin and its horsepower using a circle scatter plot. It is built with the Vega-Lite API, which constructs a declarative specification that is rendered to SVG. The visualization fetches auto-mpg data from a CSV file using d3.csv, defines circle marks with custom opacity and size, and maps origin to the x-axis and horsepower to the y-axis. The API registers with Vega-Lite and Vega, and includes an interactive tooltip displaying the car's name.

Nnkohdatavis

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

92% match

Loading thumbnail…

Vega-Lite API Template II

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.

NNelson M

92% match

Loading thumbnail…

10.0 Vega-Lite API Template

This example uses the Vega-Lite API to render an interactive scatterplot of automobile data from a CSV file, visualizing acceleration, horsepower, weight, and origin. Circle marks are sized by weight, colored by origin, and include tooltips displaying car names via the fieldN encoding. The visualization leverages the vega, vega-lite, and vega-lite-api libraries, with a vega-tooltip handler for hover interactions. The plot fits the window dimensions and uses custom axis and label styling for improved readability.

EEric Weiss

91% match

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

91% match