TestViz

100%

✓ Published0🌍 Public

Last edited May 3, 2022

Created on May 3, 2022

This visualization shows the relationship between engine displacement and horsepower for classic automobiles, with tooltips revealing each car’s name. Built using vega-lite-api, it renders a scatterplot of the auto-mpg dataset loaded via d3.csv. The chart applies a custom config to adjust font sizes and axis styling, and uses vega’s svg renderer with vega-tooltip for interactive hover details.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

Test

This scatterplot shows the relationship between engine displacement and horsepower for a set of cars, with each point sized and colored to represent data density. The visualization fetches live data from a PHP endpoint via `d3.json` and renders it using the vega-lite-api library, which builds a Vega-Lite specification. Point opacity is set to 0.1 to reveal overlapping clusters, while tooltips display the car name using the vega-tooltip handler. The chart is configured with custom axis styling and fills the entire viewport.

TTheLoki2020

87% match

Loading thumbnail…

Vega-Lite API Template

This visualization displays the relationship between engine displacement and horsepower for a collection of automobiles, with each point representing an individual car model. The data is loaded from a CSV file using the d3 `csv` function and rendered as a scatter plot using the Vega-Lite API. The visualization uses `vl.markPoint` with encoded x and y fields, and includes interactive tooltips showing the car name via the `vega-tooltip` Handler. The plot is configured to fit the browser window using `autosize` and applies custom axis and label styling from the config file.

RRohit Krishnan

87% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between engine displacement and horsepower for classic automobiles, with tooltips revealing each car’s name. It uses the Vega-Lite API to declare the scatterplot marks and encodings, while customizing axis and label styling via a shared config object. Data is loaded asynchronously from a CSV using d3.csv, then rendered as an SVG through Vega’s view system. The visualization fills the browser window and fades overlapping points for readability.

AAakarshak Sthapak

86% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays the relationship between engine displacement and horsepower for a collection of automobiles, with tooltips revealing the model name for each point. It uses the Vega-Lite API to declaratively define the scatter plot, with D3.js (d3.csv) loading the auto-mpg dataset from a GitHub gist. The code registers Vega, Vega-Lite, and Vega-Tooltip, and renders the chart as SVG, adjusting the view to fit the window size.

GGregS1290

86% match

Loading thumbnail…

scatter_plot

This scatter plot visualizes the relationship between engine displacement and horsepower for a collection of automobiles, with each point representing a vehicle model. The visualization is built using the Vega-Lite API, which registers with Vega and Vega-Lite to render the chart as SVG. Data is loaded asynchronously from a CSV file using D3’s `csv` method, and the plot applies a config for custom axis and label styling. Tooltips, enabled via the vega-tooltip handler, display each car’s name on hover, while point opacity and size convey density across the dataset.

Ggoldpot

86% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays the relationship between engine displacement and horsepower for a sample of automobiles, with interactivity through tooltips that reveal the car model name on hover. Built with the Vega-Lite API, it constructs a scatter plot using semi-transparent points and custom axes. Data is loaded asynchronously via D3’s `csv` function from an external Auto MPG dataset. The code integrates Vega, Vega-Lite, and Vega-Lite API for rendering, while Vega-Tooltip provides hover information.

BBruno Simoes

86% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between engine displacement and horsepower for a set of automobiles, with tooltips revealing the car name for each point. The visualization is built using the Vega-Lite API, which composes a scatter plot using `vl.markPoint()` with `fieldQ` encodings for the quantitative axes. Data is loaded asynchronously from a CSV file containing the auto-mpg dataset via `d3.csv`. The chart is rendered as SVG, with custom axis styling defined in a config object and interactive tooltips supplied by the vega-tooltip handler.

Zzykel

86% match

Loading thumbnail…

Vega-Lite API Template

This example displays a scatter plot of automobile data, showing the relationship between engine displacement and horsepower, with tooltips revealing the car model name. Built with the Vega-Lite API, the visualization loads data from a CSV using `d3.csv` and renders through the `vega` and `vega-lite` libraries. Point marks are configured with a fill, a fixed size, and reduced opacity, while axis styling is customized via a config object. The chart's dimensions adapt to the window size, and interactive tooltips are enabled using `vega-tooltip`.

Rrandom-program

86% match