Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Aug 28, 2022

Created on Aug 28, 2022

This example uses the Vega-Lite API to create a scatter plot from the auto-mpg dataset, mapping displacement and horsepower on the x- and y-axes. It configures point marks with transparency and tooltips showing the car name. The code builds the visualization by importing `vega`, `vega-lite`, and `vega-lite-api`, fetches data via `d3.csv` from a GitHub gist, and renders with a custom dark theme. It also integrates `vega-tooltip` for interactive hover information.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to render a scatter plot of automotive data, mapping engine displacement and horsepower for individual car models. It loads the auto-mpg dataset via `d3.csv` and displays a tooltip with the car name on hover. The chart employs a semi-transparent point mark with a custom dark theme and full-window sizing. The code integrates `vega`, `vega-lite`, and `vega-lite-api` alongside `vega-tooltip` for interactive exploration.

MMrunal Saoji

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to create an interactive scatter plot of the classic Auto MPG dataset. The visualization encodes quantitative fields for acceleration (x-axis) and horsepower (y-axis), with origin as color and cylinders as size, plus a tooltip for car name. The code loads data via `d3.csv`, renders with `vega` and `vega-lite`, and applies custom styling from `config.js` for axis ticks and label fonts. The chart auto-fits to the window, uses SVG rendering, and integrates `vega-tooltip` for hover details.

Ssmile2git

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization uses the Vega-Lite API to render a scatter plot of auto-mpg data, plotting engine displacement against horsepower for individual car models. Each point is semi-transparent to reveal overlapping density, and tooltips display the vehicle name on hover. The code loads CSV data via D3’s `csv` method, customizes axis and label styling through a Vega-Lite config object, and leverages the `vega-tooltip` Handler for interactive feedback.

Mmmohatra

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to render a scatter plot of automobile data from the auto-mpg CSV dataset, plotting displacement against horsepower with a tooltip revealing the car model. The visualization is built programmatically via `vl.markPoint` and encode methods, with the chart filling the browser window. Appearance is customized through a config object that removes axis domains and adjusts label styling, while `d3.csv` loads the data and a Vega Tooltip handler enables interactive hover details.

KKristopher Skelton

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API with D3 to create a scatter plot of auto-mpg data, plotting engine displacement against horsepower. Each point is a semi-transparent circle colored uniformly, with tooltips displaying the vehicle name. The visualization reads CSV data from a GitHub gist via D3’s `csv` function, and configures axes and label styling. It renders an SVG chart that fills the window using Vega-Lite’s `.width()` and `.height()` methods, with a custom tooltip handler from Vega-Tooltip.

Iiffath.namira@csedge.org

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatter plot of automobile displacement against horsepower, with tooltips revealing model names. The visualization is built using the Vega-Lite API, which composes a point mark with quantitative fields and a nominal tooltip encoding. The code loads CSV data from a GitHub gist via D3’s `csv` function, then renders the chart using Vega’s SVG renderer. Dark theme styling and axis configurations are applied through a custom config object to improve readability.

IIker-Navarro

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the vega-lite-api to render a scatter plot of automobile data, showing the relationship between engine displacement and horsepower, with tooltips displaying vehicle names. The visualization loads data from a CSV file using `d3.csv`, applies a custom dark theme through a Vega-Lite config object, and fills the viewport by setting chart width and height to the browser window dimensions. Interactive tooltips are enabled through vega-tooltip's `Handler`, and the chart renders as an SVG using D3 v5.

Ggatperdut

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to render a scatter plot of automotive data from a CSV file, showing the relationship between engine displacement and horsepower. Each point represents a vehicle, with a tooltip displaying the car's name. The visualization leverages the Vega-Lite API to construct the mark and encoding specifications, while Vega and Vega-Lite handle rendering. The code loads the data using `d3.csv` from the `d3` library, applies custom styling through a configuration object, and uses the `vega-tooltip` handler for interactive hover details.

Aalliefeld

93% match