Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Jul 8, 2021

Created on Jul 8, 2021

This example visualizes the relationship between engine displacement and horsepower in the auto-mpg dataset, plotting points as a scatterplot with opacity to reveal density. Built using the Vega-Lite API, it defines a point mark with quantitative fields for both axes and tooltips showing car names. The code registers Vega and Vega-Lite, fetches CSV data via d3.csv, and renders the chart as SVG, applying custom axis and label styling from a config object.

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 in the auto-mpg dataset, with tooltips showing car model names for each point. The visualization uses the Vega-Lite API to declare a scatter plot with semi-transparent points, while D3’s csv loader fetches the data from a GitHub gist. The code registers Vega, Vega-Lite, and vega-tooltip through the vl API, customizes axes and label styling via a config object, and renders an SVG chart that fills the browser window.

DDaMei1993

96% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between engine displacement and horsepower for vehicles from the auto-mpg dataset, with tooltips showing car names on hover. It is built using the Vega-Lite API, which generates a scatter plot encoded with quantitative fields for both axes, rendered as semi-transparent points. The code registers Vega, Vega-Lite, and Vega-Lite API libraries, applies a custom dark-themed configuration in config.js, and loads CSV data asynchronously via d3.csv. The chart fills the entire browser window by dynamically setting width and height to the viewport dimensions.

HHongleang Lim

96% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between engine displacement and horsepower for a collection of automobiles. It uses a scatter plot of points with a fixed size and low opacity to show data density, with tooltips revealing the car name. The visualization is built using the Vega-Lite API, registering it with Vega and Vega-Lite, and configures axes and label styling through a custom config object. Data is loaded from a remote CSV file via the `d3.csv` method.

MMayank Kumar

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

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between engine displacement and horsepower across a dataset of automobiles from the auto-mpg CSV file. Each point represents a car, with opacity and size encoding density, and tooltips reveal the vehicle name. The visualization uses the Vega-Lite API to construct the scatter plot, built on Vega and Vega-Lite, with D3.js handling CSV loading. The rendering uses configurable axis styling and a dark color scheme for improved readability.

Aalfredwang0707

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 a dataset of automobiles, with tooltips revealing the car name. Built with the Vega-Lite API, the visualization registers Vega and Vega-Lite, loads data from a CSV file via d3.csv, and renders as an SVG. The chart uses markPoint encoding with scaled axes and opacity to handle overlapping points, while the configuration customizes axis appearance and font styling.

MMohamed Ali

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