Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Vega-Lite API Template

✓ Published0🌍 Public
NNikhilchiguru-8
Last edited Mar 8, 2023
Created on Mar 8, 2023

This example plots automobile data as a scatterplot of displacement against horsepower, with points colored by origin and hover tooltips showing car names. It uses the Vega-Lite API to declare the visualization, registered with Vega and Vega-Lite, while D3’s `csv` method loads the auto-mpg dataset from a GitHub gist. The resulting SVG view is rendered across the full browser window with custom axes, label styling, and tooltip handling provided by Vega Tooltip.

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 shows a scatter plot of automobile displacement versus horsepower, with a tooltip revealing car names. It uses the Vega-Lite API to declaratively define the visualization and D3’s `csv` loader to fetch the auto-mpg dataset from a GitHub gist. The view is rendered as an SVG, sized to fit the full window, with configurable axis and label styling applied via Vega-Lite’s `config` object.

Ttnk-dev
95% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a scatter plot of automobile displacement against horsepower, with each point representing a car model and tooltips revealing the vehicle name on hover. The visualization uses the Vega-Lite API to declaratively define the mark encoding and scales, while D3's `csv` function loads the auto-mpg dataset from a GitHub gist. The chart renders as a full-window SVG using Vega's renderer, with Vega-Tooltip handling interactive hover details. Custom axis and label styling from the `config` object improves readability against a clean background.

SSimon Davis
94% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatter plot of automobile displacement versus horsepower, with each circle representing a car model and tooltips revealing the vehicle name. The visualization is built using the Vega-Lite API, which constructs a declarative specification rendered through Vega, and loads data from a CSV file containing auto-mpg statistics. The code registers Vega-Lite and Vega Tooltip for interactive hover effects, while custom configuration options adjust axis labels, typography, and the dark color palette. D3 is used only for fetching the dataset via its csv method.

DDeepanshu
94% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example presents a scatterplot of automobile data, showing the relationship between engine displacement and horsepower, with a tooltip revealing each car's name. The visualization is built using the Vega-Lite API, which registers Vega and Vega-Lite specifications, and leverages d3.csv to load the auto-mpg dataset from a GitHub gist. The view is configured to fit the full window size, with custom axis and label styling from a config file, and uses a semi-transparent point mark to handle overplotting. The rendering is handled by Vega's SVG renderer.

SSiddhant Bhardwaj
94% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a scatter plot of automobile displacement against horsepower, colored semi-transparently to reveal data density, with tooltips displaying car names. It uses the Vega-Lite API to construct the visualization declaratively, while D3.js handles CSV loading from an external dataset via `d3.csv`. The chart is rendered as an SVG, with custom configuration for axis styling and typography. The code registers Vega-Lite with the Vega runtime and integrates Vega-Tooltip for interactive hover details.

VVishwanath Hegde
94% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatter plot of automobile data from an auto-mpg CSV, showing the relationship between engine displacement and horsepower. The visualization is built using the Vega-Lite API, which composes specifications and renders them through Vega-Lite while leveraging D3’s `csv` loader to fetch and parse the data. Points are rendered as semi-transparent filled circles with tooltips that reveal vehicle names. The plot uses a custom config and a fit-to-window layout, with axis styling adjusted for readability.

Ccaptind
94% match
Loading thumbnail…

Fork of Vega-Lite API Template

This visualization uses the Vega-Lite API with D3 to render a scatterplot of automobile data from the auto-mpg CSV dataset. It plots horsepower against origin, with each point sized and colored by its country of origin, and includes tooltips showing vehicle names. The code registers Vega-Lite with Vega and D3, loads data via d3.csv, and configures axes and label styling for improved readability. The plot fills the entire browser window, with rendering handled through Vega’s SVG view and interactivity powered by vega-tooltip.

Nnncis
94% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a scatterplot of automobile displacement against horsepower, with opacity to reveal overlapping points and tooltips displaying car names. The visualization is built using the Vega-Lite API, which compiles specifications to Vega, and renders with D3.js’s CSV loader to fetch the auto-mpg dataset. The code customizes axes and text styling via a config object, and integrates Vega-Tooltip for interactive hover details.

Ttjcocucci
94% match