Skip to main content
SimilarExport ZIP
100%

Vega-Lite API Template

✓ Published0🌍 Public
RRenan Barbosa
Last edited Apr 3, 2020
Created on Apr 3, 2020

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.

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

Vega-Lite API Template

This example visualizes the relationship between acceleration and horsepower for vehicles from the auto-mpg dataset, with each point representing a car and a tooltip revealing its name. The visualization uses the Vega-Lite API to construct a scatterplot with configurable opacity and point size, rendered as an SVG. The code loads CSV data via d3.csv, registers the Vega-Lite API with Vega and the Vega-Tooltip handler, and fits the chart to the full browser window.

CCurran Kelleher
94% match
Loading thumbnail…

Template do Vega-Lite API

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.

RRodrigo Zanco
94% match
Loading thumbnail…

Vega-Lite API Template

This example visualizes the relationship between a car’s acceleration and horsepower from the classic Auto MPG dataset, plotting each vehicle as a point with a tooltip that reveals its name. The visualization is built using the Vega-Lite API, which programmatically constructs a scatter plot via `vl.markPoint`, `vl.x().fieldQ('acceleration')`, and `vl.y().fieldQ('horsepower')`. Data is loaded asynchronously with D3’s `csv` function from a GitHub gist, while the chart is rendered to SVG and wrapped with interactive tooltips from `vega-tooltip`. The appearance uses custom config for larger fonts and lighter grid lines.

Bbakstorage00001
94% match