Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Feb 13, 2022

Created on Feb 13, 2022

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.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Vega-Lite API Template

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.

Ssrzadran

97% 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

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 visualization displays a scatterplot of automobile data, plotting horsepower against displacement for individual car models. Each point is rendered as a semi-transparent circle, with tooltips revealing the vehicle name on hover. The visualization is built using the Vega-Lite API, which registers with Vega and Vega-Lite to compile specifications and render SVG output. Data is loaded asynchronously from a remote CSV file using d3.csv, while the vega-tooltip Handler enables interactive tooltips. The chart dynamically fits its dimensions to the browser window through an autosize configuration.

Ggayatrisridhar

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, 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

96% 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

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 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