ExploreVLAPI

100%

✓ Published0🌍 Public

Last edited May 17, 2022

Created on May 16, 2022

This example demonstrates how to build interactive visualizations using the Vega-Lite API within a React application. It loads automobile data from a remote JSON dataset and renders a scatterplot showing the relationship between miles per gallon and engine displacement, with color encoding for cylinders and faceting by origin. The visualization leverages the vega-lite-api library to construct the chart declaratively, while vega-tooltip enables hover interactions. Data is fetched asynchronously using a custom getData function, and the resulting chart is rendered as an SVG inside a React component.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Vega-Lite API Template

This example demonstrates a scatter plot of automobile data, showing the relationship between vehicle weight, horsepower, and miles per gallon. The visualization uses the Vega-Lite API within a React framework, loading data from a CSV file via D3’s `csv` method. It renders a circle mark for each car, with color encoding weight, size encoding mpg, and tooltips revealing the car name. The code registers Vega-Lite with Vega and integrates the Vega Tooltip handler for interactive labels.

RRahul Gupta

86% 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

85% match

Loading thumbnail…

vega

This example visualizes automobile data using a Vega-Lite scatter plot, with circles positioned by weight and horsepower, colored by origin, sized by miles per gallon, and showing car names on hover. The visualization is built with the vega-lite-api library, which compiles specifications to Vega, and is rendered as an SVG using the vega view. Data is loaded asynchronously from a CSV file with d3.csv, and the chart is dynamically sized to fit the window. The code includes custom styling for axes and tooltip formatting.

MMatt Lane

85% 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

85% match

Loading thumbnail…

Template Vega-Lite Api

This example demonstrates a scatter plot of automobile data, mapping miles per gallon, horsepower, weight, and origin using the Vega-Lite API. It shows how to declaratively build interactive visualizations with circle marks, color encoding, and tooltips. The code registers Vega, Vega-Lite, and vega-tooltip via `vl.register`, loads CSV data from a gist using d3.csv, and renders to an SVG view that fits the window. Appearance is customized with a configuration object, and the visualization auto-sizes with padding.

AAlan Santos

85% match

Loading thumbnail…

Vega-Lite API Template

This example uses the Vega-Lite API to render an interactive scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository. It maps miles per gallon on the x-axis, horsepower on the y-axis, vehicle origin to color, and weight to point size, with tooltips showing car names. The visualization is built programmatically via `vl.markCircle` and `vl.encode` methods, then rendered as SVG using the Vega and Vega-Lite libraries with a custom config for larger fonts and a dark color scheme. Data is loaded asynchronously using `d3.csv` from a remote gist.

Hhuashe418

84% match

Loading thumbnail…

Ep18: Vega-Lite API

This visualization displays automobile data from a CSV file, plotting engine origin, horsepower, weight, and miles per gallon as a scatter plot with circles of varying size and color. The example highlights the convenience of the Vega-Lite API (vl) for declarative charting, which constructs and renders the specification. It uses vega-lite and vega to compile the spec, d3.csv for data ingestion, and vega-tooltip to provide interactive tooltips on hover. The chart is configured to fit the browser window.

SStoo Sepp

83% match

Loading thumbnail…

Vega-Lite API Example

This example uses the Vega-Lite API to create a scatter plot of automobile data from a CSV file. The visualization encodes miles per gallon, horsepower, origin, and weight into position, color, and size, with a tooltip revealing the car name. It leverages vega-lite-api, vega, and vega-lite to generate an SVG chart, and d3.csv for data loading. The chart uses overlaid translucent circles and a custom config to improve label readability.

Bbakstorage00001

83% match