Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Apr 8, 2021

Created on Apr 8, 2021

This visualization displays the relationship between engine displacement and horsepower for various automobile models, with each point representing a car and its name revealed on hover. Built with the Vega-Lite API, it uses a scatter plot with semi-transparent, filled points and no stroke. The code registers Vega and Vega-Lite, loads data from a CSV file via `d3.csv`, and employs a `vl.markPoint` with quantitative X and Y encodings. The visualization automatically sizes to fit the browser window and incorporates a custom dark-themed configuration for axes and labels.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays the relationship between engine displacement and horsepower for a collection of automobiles, with each point representing a vehicle and tooltips revealing the car’s name. It is constructed using the Vega-Lite API (vl) within a D3.js (d3.v5) framework, which registers Vega and Vega-Lite for rendering. The data is fetched as CSV from a GitHub gist using d3.csv. The code configures axis styling, disables zero-scaling for both quantitative fields, and uses semi-transparent, filled points for overlap visibility.

DDataFeast_71

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 renders a scatter plot with semi-transparent points, where hovering reveals the vehicle's name via tooltip. The visualization is built using the Vega-Lite API (`vl.markPoint`, `vl.x().fieldQ`, `vl.y().fieldQ`) within a D3.js framework, with data fetched as CSV from a remote GitHub gist. Appearance is customized through a Vega config object, and rendering is handled by Vega's SVG renderer.

Llplimier

96% match

Loading thumbnail…

Fork of Vega-Lite API Template

This scatter plot visualizes the relationship between engine displacement and horsepower for a set of automobiles, with each point labeled by car name via tooltips. Built using the Vega-Lite API (vl) within a D3.js framework, it fetches data from a CSV file via `d3.csv` and renders an interactive SVG chart. The visualization applies a customized dark theme and responsive sizing, with points rendered as semi-transparent circles using `.markPoint`.

NNick Jefford-Horn

96% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between engine displacement and horsepower for automobile models using the Vega-Lite API, with tooltips displaying car names on hover. It renders a scatter plot with semi-transparent points on a full-screen canvas, configured for a clean dark-on-light aesthetic. The code loads data from a CSV file via D3’s `csv` function, then builds the visualization declaratively with `vl.markPoint` and `vl.x().fieldQ()`, wiring everything together through Vega-Lite and Vega’s runtime, including custom tooltip handling via the `Handler` from `vega-tooltip`.

GGyromighty

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

96% match

Loading thumbnail…

Fork of Vega-Lite API Template

This scatter plot visualizes the relationship between engine displacement and horsepower for a collection of automobiles, using data loaded from a remote CSV file. Each point represents a car model, with tooltips revealing the vehicle's name on hover. The visualization is built using the Vega-Lite API, which constructs a specification rendered through the Vega and Vega-Lite libraries. Data is fetched asynchronously using d3.csv, and the chart configures axis styles and dark guide labels for a polished appearance.

HHarsh Vijay

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 point-based scatter plot visualizes the relationship between engine displacement and horsepower for various automobile models. Built with the Vega-Lite API and rendered through D3, it displays data from a CSV file of auto-mpg statistics, with each point representing a vehicle name revealed via tooltip. The visualization uses a semi-transparent point mark, custom config for axes and labels, and automatically sizes to fit the browser window.

MMuhammad Faizan Khurshid

95% match