Fork of Vega-Lite API

100%

Fork of Vega-Lite API

✓ Published0🌍 Public

Last edited Dec 26, 2021

Created on Dec 26, 2021

This example visualizes the relationship between engine displacement and horsepower for cars, with tooltips showing vehicle names. The scatter plot uses the Vega-Lite API to declare the mark type and encodings, while D3.js loads the auto-mpg CSV dataset. The visualization is rendered through Vega and Vega-Lite, with Vega Tooltip handling interactions and custom configuration adjusting font sizes and axis styling for readability.

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 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 visualization displays the relationship between engine displacement and horsepower for a collection of automobiles, with tooltips revealing the model name for each point. It uses the Vega-Lite API to declaratively define the scatter plot, with D3.js (d3.csv) loading the auto-mpg dataset from a GitHub gist. The code registers Vega, Vega-Lite, and Vega-Tooltip, and renders the chart as SVG, adjusting the view to fit the window size.

GGregS1290

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 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 collection of automobiles, using a scatter plot of semi-transparent points with tooltips displaying vehicle names. It is built with the Vega-Lite API, which compiles specifications into Vega and renders them as SVG, while D3.js loads the data from a CSV file hosted on GitHub. The visualization adapts to the full window size and applies a custom configuration to adjust axis and label styling for improved readability.

MMinh Luong

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