Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited May 1, 2022

Created on May 1, 2022

This example visualizes the relationship between car engine displacement and horsepower, with a tooltip revealing the car name for each point on the line chart. It loads the auto-mpg.csv dataset from a GitHub gist using D3’s CSV function. The visualization is built programmatically with the Vega-Lite API, registering Vega and Vega-Lite, and renders as SVG with custom axis and label styling from a config object. The chart fully fits the browser window via autosize settings.

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

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 the relationship between engine displacement and horsepower across a sample of automobiles, with tooltips revealing the car model name for each point. It uses the Vega-Lite API to define a filled line mark with opacity, and renders the visualization as an SVG via the vega, vega-lite, and vega-lite-api libraries. The data is loaded asynchronously from a CSV file using d3.csv, and the chart is automatically sized to fit the browser window. The appearance is customized through a config object that adjusts axis and label styling.

Vvedant2003

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

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

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.

CChris Bushong

95% match

Loading thumbnail…

Fork of Vega-Lite API

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.

Mmuhammadshumas

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between engine displacement and horsepower for a dataset of automobiles, with each point representing a car model. The plot uses a scatterplot with tooltips displaying the car name, rendered as a full-screen SVG. Built using the Vega-Lite API, the code leverages `vega`, `vega-lite`, and `vega-lite-api` libraries while fetching data from a CSV via `d3.csv`. The visualization is configured with custom axis styling and an interactive tooltip handler for enhanced readability.

Aaniosindustries

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

94% match