Skip to main content
SimilarExport ZIP
100%

Template do Vega-Lite API

✓ Published0🌍 Public
RRodrigo Zanco
Last edited May 11, 2021
Created on May 11, 2021

This example displays a scatter plot of automobile acceleration versus horsepower, with tooltips showing the car name. It uses the Vega-Lite API in JavaScript to define the visualization declaratively, while handling data loading and rendering through D3’s `csv` method and Vega’s runtime. The code retrieves the auto-mpg dataset from a GitHub gist and applies custom axis and label styling via a configuration object. The SVG output is rendered full-window with a tooltip handler from the vega-tooltip library.

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

Vega-Lite API Template

This example uses the Vega-Lite API to create a scatterplot of automobile data from a CSV file, mapping acceleration and horsepower on the axes with tooltips for car names. The visualization is rendered as an SVG via the vega and vega-lite libraries, with vega-lite-api constructing the mark specification programmatically. The code loads data asynchronously using d3.csv, applies custom axis and label styling from a config object, and fits the chart to the viewport with a tooltip handler from vega-tooltip.

Llubin-liu
94% match
Loading thumbnail…

Vega-Lite API Template

This example demonstrates a scatter plot of auto-mpg data, mapping acceleration to the x-axis and horsepower to the y-axis, with tooltips showing car names. Built with the Vega-Lite API, it uses vl.markPoint(), vl.x(), vl.y(), and vl.tooltip() to define the encoding, while the getData.js module loads CSV data via d3.csv. The visualization is rendered as SVG through Vega, with appearance customized in config.js and an interactive tooltip provided by vega-tooltip.

RRenan Barbosa
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
93% match
Loading thumbnail…

Vega-Lite API Template

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.

VVictor Masson
93% 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
93% 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
93% match