Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Mar 16, 2021

Created on Mar 16, 2021

The visualization displays a scatterplot of automobile engine data, plotting displacement against horsepower, with each point representing a vehicle model and its name revealed on hover. It uses the vega-lite-api library to construct the chart declaratively, while D3’s `csv` method loads the dataset from a remote URL. Visual styling is customized through a config object that adjusts axis and label formatting. The resulting SVG render is fit to the browser window, with points shown as semi-transparent circles due to their high opacity value.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays a scatter plot of automobile data, plotting engine displacement against horsepower, with each point representing a vehicle model. The visualization uses the Vega-Lite API template, which leverages the vega-lite-api library to construct the chart programmatically. The code loads data from a CSV file using d3's csv function, then renders the marks using Vega and Vega-Lite with SVG output. Tooltips are enabled via Vega-Tooltip, and the visualization dynamically sizes itself to fit the browser window.

JJay

97% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatter plot of automobile engine displacement versus horsepower, with each point representing a car model and tooltips revealing the vehicle’s name. The visualization is built using the Vega-Lite API, which is registered with Vega and rendered as SVG, with data loaded from a CSV URL via d3’s `csv` function. The chart uses a custom configuration for axis styling and respects the browser window’s dimensions by setting width and height dynamically.

Sseitzfab

96% match

Loading thumbnail…

Fork of Vega-Lite API Template

This scatter plot visualizes the relationship between engine displacement and horsepower for a collection of automobiles. The visualization uses the Vega-Lite API to generate a chart with customizable point styling, including a semi-transparent fill and a tooltip that reveals the car’s name on hover. It loads data from a CSV file fetched via d3.csv, renders the chart into an SVG using the Vega-Lite renderer, and applies a custom config to adjust axis labels and colors. The plot resizes to fit the browser window using autosize settings.

SSahaj Singh

96% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays a scatterplot of automobile data, plotting engine displacement against horsepower for individual car models. Each point is rendered with low opacity to reveal density patterns, and hovering reveals the car’s name via tooltip. Built with the Vega-Lite API, it uses `vl.markPoint()` and `vl.encode()` to define the chart, with data loaded asynchronously via `d3.csv()` from a GitHub-hosted dataset. The code integrates Vega, Vega-Lite, and Vega-Tooltip, customizing axis styling through the `config` object.

Ffjvoris

96% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays a scatter plot of automobile data, mapping engine displacement on the x-axis against horsepower on the y-axis. Each point represents a vehicle, with color encoding the model year, size encoding vehicle weight, and tooltips revealing the car name. The code uses the vega-lite-api to construct the chart, with data loaded from a CSV of auto-mpg statistics via d3.csv. It renders as an SVG through Vega-Lite, applying custom configuration for axis styling and font sizes, and integrates a Vega Tooltip handler for interactive hover details.

Eericemc3

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This scatter plot visualizes the relationship between engine displacement and horsepower for a collection of automobiles, using data loaded from a remote CSV file. Each point represents a car model, with tooltips revealing the vehicle's name on hover. The visualization is built using the Vega-Lite API, which constructs a specification rendered through the Vega and Vega-Lite libraries. Data is fetched asynchronously using d3.csv, and the chart configures axis styles and dark guide labels for a polished appearance.

HHarsh Vijay

95% 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 vehicle name for each point. The scatter plot is constructed using the Vega-Lite API, which is registered with Vega and Vega-Lite, and rendered as SVG. Data is loaded from a CSV file using D3’s `csv` function, while the visualization’s appearance is customized through a configuration object that adjusts axis styles and font sizes. The chart fills the entire viewport and uses semi-transparent points to reveal overlapping data.

SSarah Elkeurti

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This scatter plot visualizes the relationship between engine displacement and horsepower for various car models, with tooltips revealing the car's name on hover. Built with the Vega-Lite API, it renders as SVG and automatically fits the browser window. The visualization loads the auto-mpg.csv dataset from a GitHub gist, applies custom axis and label styling, and uses semi-transparent square marks to represent data points, revealing overlapping clusters.

DDeepak Tomson

95% match