Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Vega-Lite API Template

✓ Published0🌍 Public
DDoãn Phụng
Last edited Jun 28, 2022
Created on Jun 28, 2022

This example visualizes the relationship between engine displacement and horsepower using a scatter plot of automotive data. Each point represents a vehicle, with tooltips revealing the car’s name on hover. The visualization is built with the Vega-Lite API, which composes specifications and renders them via Vega and Vega-Lite libraries. Data is loaded asynchronously from a CSV file using d3.csv, while appearance is customized through a config object that adjusts axis styles, font sizes, and colors. The chart fills the browser window and uses semi-transparent points to show overlapping data density.

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 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
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 scatterplot visualizes the relationship between engine displacement and horsepower for a car dataset loaded from a CSV file. The example uses the Vega-Lite API, a JavaScript wrapper for Vega-Lite, to declaratively define the chart, with `vl.markPoint` for the points and `vl.x()` and `vl.y()` encoding quantitative fields. Rendering occurs through Vega, with the chart sized to the window and tooltips enabled via the Vega Tooltip handler. The code also imports custom axis and label styling from a separate config module.

DDoãn Phụng
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 for various car models, using a scatter plot where each point represents a vehicle. The visualization is built with the Vega-Lite API, which generates a Vega-Lite specification that is then rendered as SVG by the Vega library. Data is loaded asynchronously from a CSV file using d3.csv, and the visualization includes interactive tooltips provided by the vega-tooltip Handler. The chart is configured with custom axis styling and font sizes to improve readability.

NNioh
94% 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
94% match
Loading thumbnail…

Fork of Fork of Vega-Lite API Template

This example visualizes the relationship between engine displacement and horsepower for various car models, using a scatter plot of semi-transparent points. The visualization is built with the Vega-Lite API, which is registered with Vega and Vega-Lite libraries to render the chart as SVG. Data is loaded from a CSV file using d3.csv, and the chart dimensions adapt to the window size. Tooltips are enabled via the vega-tooltip handler, and the axis styling is customized through a config object.

RRoshan Kumar
94% 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
94% match