Skip to main content
SimilarExport ZIP
100%

vizualization_vega-lite-api

✓ Published0🌍 Public
Ssking8484
Last edited May 12, 2022
Created on May 12, 2022
Forked from loadingDataReact

This example visualizes the relationship between acceleration and horsepower for automobile models, with a tooltip displaying the vehicle name on hover. The visualization is built using the Vega-Lite API, which is registered with Vega and Vega-Lite, and rendered as SVG within a React application. Data is loaded asynchronously from a CSV file using D3’s `csvParse`. The chart uses configurable axis and label styling, and employs a dark color scheme for text and tooltips.

AI-generated description

Smiley face implementation with React & D3.

MIT Licensed

Similar vizzes

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

Vega-Lite API Playground

This example visualizes the relationship between horsepower and acceleration for cars, with tooltips revealing the vehicle name. Built using the Vega-Lite API, it abstracts away the typical D3 code by composing a scatterplot through function calls like `vl.markPoint()` and `vl.x().fieldQ()` for quantitative scales. The visualization loads CSV data from a GitHub gist via D3’s `csv` loader, and renders to SVG inside the browser. Configuration customizes axis fonts and colors, while the Vega-Lite library compiles the specification into Vega, which handles the rendering.

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

Vega-Lite API Template

This example shows the relationship between a vehicle’s acceleration and horsepower, with each point tooltipped by car name. It is built with the Vega-Lite API, which registers against Vega, Vega-Lite, and D3’s CSV loader. The visualization loads data from a remote CSV file, applies customized axis and label styling, and renders to SVG with a tooltip handler, fitting the full viewport.

CCurran Kelleher
89% 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
89% 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
89% match
Loading thumbnail…

Vega-Lite-Api

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.

SSaurabh Jaswal
89% match
Loading thumbnail…

Vega-lite Template

This example visualizes automobile data from a CSV file, mapping horsepower and acceleration along the axes while encoding weight as point size and origin as color. Built with Vega-Lite and React, the code loads CSS named colors data using d3.csv, then renders an interactive scatterplot through the vega-lite-api. The visualization includes tooltips showing car names, with custom axis and label styling configured through a separate config object.

FFarahnaz Wick
89% match