Skip to main content
SimilarExport ZIP
100%

Vega-Lite-Api

✓ Published0🌍 Public
SSaurabh Jaswal
Last edited Oct 20, 2022
Created on Oct 20, 2022
Forked from Smiley Face Part 1

This example shows a scatter plot of automotive data from the auto-mpg CSV dataset, mapping acceleration on the x-axis and horsepower on the y-axis with tooltips displaying vehicle names. The visualization is built with Vega-Lite API, leveraging the `vl.markPoint()` method for the chart and `vl.x().fieldQ()`/`vl.y().fieldQ()` for quantitative encodings. It uses React for the component structure, D3’s `csv` loader in `getData.js` to fetch data, and Vega-Lite’s tooltip module for interactive hover details. The styling configuration adjusts font sizes and axis appearance, while the page loads Vega, Vega-Lite, and Vega-Tooltip libraries via CDN.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

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