Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Jul 11, 2023

Created on Jul 11, 2023

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.

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

96% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatter plot of automobile data, plotting engine displacement against horsepower from an auto-mpg CSV dataset. Each point represents a car model, with tooltips revealing the vehicle’s name. The visualization is built using the Vega-Lite API, which composes a markPoint encoding with quantitative fields, and renders via Vega and Vega-Lite libraries. Custom configuration styles axes and labels, while `d3.csv` loads the external data source.

Ssd2beatles

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

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

96% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatter plot of engine displacement against horsepower, with vehicle names accessible as tooltips. It uses the Vega-Lite API to construct the visualization declaratively, then renders it as SVG through Vega. The code loads automobile data from an external CSV file using `d3.csv`, and adapts the plot to the full viewport size. Configuration customizes axis and label styling for readability.

UUtsav Khatu

96% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a scatterplot of automobile data—engine displacement on the x-axis and horsepower on the y-axis—with tooltips displaying each vehicle’s name. The visualization is built using the Vega-Lite API, which is registered with vega and vega-lite, and rendered as an SVG via vega-tooltip for interactive hover details. The data is loaded asynchronously from a CSV file using d3.csv. The chart resizes to fill the viewport, with custom axis and label styling defined in a separate config module.

Nnecat1

96% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatter plot of automobile engine displacement against horsepower, with a tooltip revealing the vehicle name when hovering over each point. Built with the Vega-Lite API, the visualization uses D3.js for data loading via `d3.csv`, pulling the auto-mpg dataset from a GitHub Gist. The code registers Vega and Vega-Lite, configures custom axis and label styling, and relies on `vl.markPoint` with encoded quantitative fields to generate the interactive SVG output.

FFlamur

96% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows an interactive scatterplot of automobile data, plotting engine displacement against horsepower for individual car models. Each point represents a vehicle, with tooltips revealing the car’s name on hover. The visualization uses the Vega-Lite API to declare the chart specification, while D3’s `csv` function loads the auto-mpg dataset from a GitHub gist. The rendering relies on Vega and Vega-Lite scripts, with a custom dark-themed configuration for axis labels and titles, and the chart automatically fits the browser window dimensions.

Xxieyaoyue

96% match