Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Jun 5, 2021

Created on Jun 5, 2021

This example visualizes automobile attributes by plotting engine displacement against horsepower, with each point representing a vehicle and tooltips revealing the car’s name. Built using the Vega-Lite API, it registers Vega and Vega-Lite, fetches data from a CSV via d3’s `csv` method, and renders an SVG chart. The visualization uses custom axis and label styling from a configuration object, with marks as semi-transparent points sized at 90 pixels. It leverages `vl.markPoint`, `vl.x().fieldQ`, and `vl.y().fieldQ` for quantitative encodings, and fits the chart to the window dimensions.

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 engine displacement and horsepower for a sample of automobiles, with each point representing a car model and tooltips revealing its name. The visualization is built programmatically using the Vega-Lite API, which composes the chart specification through chained methods like `vl.markPoint`, `vl.x().fieldQ`, and `vl.y().fieldQ`. It loads CSV data via d3’s `csv` function, applies custom axis and label styling from a configuration object, and renders as an SVG using the Vega and Vega-Lite libraries with Vega-Tooltip for interactive hover details.

Mmatg

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example demonstrates a scatter plot of automobile engine displacement versus horsepower, with each point representing a vehicle and tooltips revealing the model name. Built with the Vega-Lite API, the visualization uses `vl.markPoint` and `vl.x().fieldQ()`/`vl.y().fieldQ()` for quantitative axes, while `vl.tooltip().fieldN()` handles categorical labels. Data is loaded asynchronously from an auto-mpg CSV via `d3.csv`, and the chart is rendered to SVG with vega-tooltip for interactive hover details. The code also customizes axis and font styles through a shared configuration object.

JJason Tiller

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example depicts a scatter plot of automobile data, showing the relationship between engine displacement and horsepower, with tooltips revealing car names. Built with the Vega-Lite API, it uses `vl.markPoint` and `vl.encode` to define visual encodings, while D3’s `csv` loads the auto-mpg dataset. The chart is rendered as an SVG via Vega and Vega-Lite, with custom axis and label styling from the config file. Tooltips are handled by the Vega Tooltip handler.

MMagarsa Gudeta

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

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes automobile performance data, plotting engine displacement against horsepower as a dense scatterplot of semi-transparent points. The visualization uses the Vega-Lite API via `vega-lite-api` and `vl.markPoint`, with a custom dark-themed configuration that removes axis domains and enlarges typography. Data is loaded asynchronously from a CSV using D3’s `csv` function, while tooltips display each car’s name. Rendering is handled through Vega and Vega-Lite, with the chart sized to fit the full browser window.

YYibo Zhang

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between engine displacement and horsepower in automobiles, with tooltips revealing car names. Built using the vega-lite-api, it constructs a scatterplot via `vl.markPoint` and encodes quantitative x- and y-axes with `vl.x()` and `vl.y()`. Data loads asynchronously from a CSV via `d3.csv`, then renders through Vega and Vega-Lite, styled with a custom config for cleaner axis labels. The visualization fills the browser window using `autosize({ type: 'fit' })` and applies semi-transparent points for readability.

SSamirAhma

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

94% match