Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Vega-Lite API Template

✓ Published0🌍 Public
Vvigneswaran009
Last edited May 11, 2021
Created on May 10, 2021

This visualization displays the relationship between car origin and horsepower, with each car represented as a circular mark and hover tooltips revealing the model name. The code uses the Vega-Lite API to define the scatterplot encoding, while D3’s `csv` function loads the auto-mpg dataset from a GitHub gist. The visualization renders as SVG with custom axis styling and tooltip handling via `vega-tooltip`, and it fits to the full window using autosize.

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 the relationship between car origin and horsepower using a scatter plot of individual vehicle names as tooltips. It leverages the Vega-Lite API to declaratively define the chart, with D3.js handling CSV data loading from an online auto-mpg dataset. The visualization uses semi-transparent point marks with custom configuration for dark text and light gridlines, and it automatically sizes to fit the browser window. The code integrates Vega, Vega-Lite, and the Vega-Lite API library, with tooltip functionality provided by Vega Tooltip.

Vvarun-j312
94% match
Loading thumbnail…

Fork of Vega-Lite API Template

This scatterplot visualizes automobile data by plotting horsepower against origin, with each point representing a car model and tooltips revealing its name. Built with the Vega-Lite API, the chart uses `vl.markCircle` with encoding functions for x and y axes, while custom config adjusts font sizes and axis styling. Data is loaded asynchronously from a CSV using D3’s `csv` method, and the visualization renders full-screen with an SVG view and integrated tooltip handler.

Bbreadcircle
94% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between a car's country of origin and its horsepower using a scatter plot. Each point represents a car, with opacity applied to reveal overlapping data points, and a tooltip displays the car's name on hover. The visualization is built using the Vega-Lite API, which generates a specification rendered to SVG via Vega and Vega-Lite. It loads the Auto MPG dataset from the UCI Machine Learning Repository using `d3.csv`, and customizes axis styling and tooltip appearance through a configuration object.

Ww.fukuyama@gmail.com
93% match
Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatter plot visualizes the relationship between automobile horsepower, fuel efficiency, and origin using the Vega-Lite API, rendered with D3.js. Data from the auto-mpg.csv dataset is fetched via `d3.csv` and displayed as semi-transparent circles, where the x-axis encodes origin, the y-axis encodes horsepower, color distinguishes origin, and size maps to miles per gallon. The code builds the visualization by chaining `vl.markCircle()` and encoding methods, then applies a custom config for axes and typography, with tooltips enabled through the Vega-Tooltip handler.

CCatalina Vajiac
93% match
Loading thumbnail…

Fork of Fork of Vega-Lite API Template

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.

NNikhilchiguru-8
93% match
Loading thumbnail…

Fork of Vega-Lite API Template

This visualization uses the Vega-Lite API to plot automotive data from the auto-mpg.csv dataset, showing car origin along the x-axis, horsepower on the y-axis, and encoding weight through color and mpg through point size. The chart renders as an SVG using vega, vega-lite, and vega-lite-api, with d3.csv loading the data and vega-tooltip providing interactive hover details that reveal each car’s name. A custom config adjusts font sizes and axis colors for readability.

LLei Lei
93% match
Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays a scatter plot of automobile horsepower against cylinder count, with tooltips revealing car names on hover. It uses the Vega-Lite API to construct the chart specification, while d3.csv loads the auto-mpg dataset from a GitHub gist. The rendering pipeline combines Vega, Vega-Lite, and d3.v5, with vega-tooltip providing interactive hover details. Custom configuration adjusts axis styling and label fonts for improved readability across the full-screen SVG output.

MMark Lam
93% 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
93% match