Skip to main content
SimilarExport ZIP
100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public
PPetko4
Last edited Aug 1, 2022
Created on Aug 1, 2022

This example shows a scatter plot of automobile data, with circles positioned by vehicle origin on the x-axis and horsepower on the y-axis. Tooltips reveal car names when hovering, using the vega-lite-api to construct the visualization. The code loads data from a CSV via d3.csv, then renders the chart with vega, vega-lite, and vega-tooltip, applying a custom config for styling and fitting the full window size.

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 visualizes automobile data by plotting car origins on the x-axis against horsepower on the y-axis, with the vehicle’s name available as a tooltip. Built using the vega-lite-api, it programs a scatter plot with semitransparent circular marks, configured to fit the entire viewport. The code loads an auto-mpg CSV dataset via D3’s `csv` method, registers Vega-Lite with a tooltip handler, and applies custom axis and label styling from a shared config module.

CChristian Rohrer
95% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a scatterplot of automobile data—engine displacement on the x-axis and horsepower on the y-axis—with tooltips displaying each vehicle’s name. The visualization is built using the Vega-Lite API, which is registered with vega and vega-lite, and rendered as an SVG via vega-tooltip for interactive hover details. The data is loaded asynchronously from a CSV file using d3.csv. The chart resizes to fill the viewport, with custom axis and label styling defined in a separate config module.

Nnecat1
94% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatter plot of automobile data, mapping miles per gallon on the x-axis against horsepower on the y-axis, with color encoding for the country of origin and point size reflecting vehicle weight. Tooltips reveal each car’s name. Built with the Vega-Lite API, it registers Vega, Vega-Lite, and Vega-Tooltip, loads CSV data via d3.csv, and applies a custom configuration for styled axes and labels. The chart renders in SVG and fits the browser window.

YYing-Liu21
94% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API with D3 to render a scatterplot of automobile data from a CSV file. The visualization encodes origin as the x-axis, horsepower as the y-axis, weight as color, and mpg as point size, with tooltips showing car names. It applies custom axis and label styling via the Vega-Lite config, and uses the vega-tooltip handler for interactive hover details. The chart is rendered as an SVG that fits the full window using the vega-lite-api’s `render()` method.

Llatifiss
94% 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 a CSV file, plotting engine displacement against horsepower with a tooltip that displays the car name. The code registers Vega, Vega-Lite, and Vega-Lite API with a tooltip handler, loads the data via d3.csv, and applies custom styling through a config object. It demonstrates a programmatic workflow where the chart specification, data loading, and rendering are separated across modules, culminating in a full-screen, interactive visualization.

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

Fork of Vega-Lite API Template

This example uses Vega-Lite API to render a scatter plot of automobile data, showing the relationship between engine displacement and horsepower, with each point representing a car model and tooltips displaying the vehicle name. The visualization loads data from a CSV file using d3.csv and builds the chart programmatically through the vega-lite-api library, which registers with Vega and Vega-Lite. The code customizes the appearance through Vega-Lite configuration options, adjusts the chart size to fit the window, and enables interactive tooltips via the vega-tooltip Handler.

HHarshavardhan Kamarthi
94% match