Skip to main content
SimilarExport ZIP
100%

Vega-Lite API Template

✓ Published0🌍 Public
VVictor Masson
Last edited Aug 24, 2021
Created on Aug 24, 2021

This example demonstrates a scatter plot of automobile data, showing the relationship between acceleration and horsepower. Each point is colored by the car’s country of origin, with a tooltip displaying the car’s name. The visualization is built using the Vega-Lite API, which composes a specification programmatically and renders it as SVG. Data is loaded asynchronously from a CSV file via d3.csv, while vega-tooltip provides interactive hover details. The code also applies custom axis and label styling through the vega-lite config object for improved readability.

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, showing the relationship between acceleration and horsepower, with tooltips revealing car names on hover. Created using the Vega-Lite API, it loads CSV data from a GitHub gist via d3.csv, then renders the visualization through Vega-Lite’s markPoint encoding. The code registers vega, vega-lite, and the vega-tooltip handler, applies a custom dark-themed configuration for axes and labels, and embeds the result in the browser window.

Fforcox43
96% match
Loading thumbnail…

Vega-Lite API Template

This example demonstrates a scatter plot of automobile acceleration against horsepower, with tooltips revealing car names. Built using the Vega-Lite API, the visualization dynamically sizes to the browser window and applies custom styling for dark axis labels and green tick marks. Data is loaded from a CSV file via d3.csv, and the plot is rendered through Vega’s SVG renderer with tooltip support from vega-tooltip. The code leverages vl.markPoint, vl.x(), and vl.y() to define the encoding, showcasing a template for rapid declarative visualization development.

HHernanls
95% match
Loading thumbnail…

Vega-Lite API Template

This example demonstrates a scatterplot visualization of automobile data, plotting weight against horsepower for various car models. Each point is colored by country of origin and sized by miles per gallon. The visualization is built using the Vega-Lite API, a programmatic interface to Vega-Lite, which leverages the Vega rendering engine. The code imports data from a CSV file, configures axis styles and tooltips, and uses the vega-tooltip library to display car names on hover.

AALI Akbar SABZI
95% 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
95% match
Loading thumbnail…

Vega-Lite API Template

This example demonstrates an interactive scatterplot of automobile data, plotting acceleration against horsepower with points colored by origin. Built using the Vega-Lite API, the visualization renders via SVG and includes tooltips displaying car names. The code loads data from a CSV using d3.csv, registers Vega-Lite with vega and vega-tooltip, and configures axes and label styling. The visualization auto-fits its container dimensions and uses a custom dark color scheme.

JJohn Patrick Banas
94% match
Loading thumbnail…

Vega-Lite API Template

This example visualizes the relationship between acceleration and horsepower for a collection of automobiles, with each point representing a car and a tooltip revealing its name. It is built using the Vega-Lite API, which programmatically constructs a scatter plot through method chaining in `viz.js`. The code loads data from a CSV file via D3’s `csv` function, then renders the chart with Vega and Vega-Lite in an SVG view. The `config.js` file customizes axis styling and typography for improved readability.

AAntonio Rungo
94% match
Loading thumbnail…

Vega-Lite API Template

This example demonstrates a scatter plot of automotive data, showing the relationship between acceleration and horsepower for various car models, with tooltips revealing the car's name. Built using the Vega-Lite API for programmatic chart construction, it leverages `vl.markPoint()` and encoding methods like `vl.x()`, `vl.y()`, and `vl.tooltip()` to define the visualization. The code registers Vega and Vega-Lite via `vl.register()`, loads CSV data using `d3.csv()`, and applies custom styling from a `config.js` file to enhance readability. The visualization renders as an SVG, fitted to the browser window.

Mmoinamazon123
94% match
Loading thumbnail…

Vega-Lite API Template

This example demonstrates a scatter plot of automotive data, showing the relationship between acceleration and horsepower for various car models, with tooltips revealing the car's name. Built using the Vega-Lite API for programmatic chart construction, it leverages `vl.markPoint()` and encoding methods like `vl.x()`, `vl.y()`, and `vl.tooltip()` to define the visualization. The code registers Vega and Vega-Lite via `vl.register()`, loads CSV data using `d3.csv()`, and applies custom styling from a `config.js` file to enhance readability. The visualization renders as an SVG, fitted to the browser window.

Mmoinamazon123
94% match