Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Jun 15, 2021

Created on Jun 15, 2021

This example plots automobile engine displacement against horsepower using a scatterplot overlaid on the full browser window. The data is loaded from a remote CSV file and rendered with the Vega-Lite API, which translates a declarative specification into an interactive visualization. The visualization uses the `vl` module to define the point marks, encoding x and y positions from quantitative fields, while enabling tooltips that display the car model name. Accompanying `config.js` settings customize axis appearance, and the `index.js` script registers the Vega and Vega-Lite libraries, applies the custom config, and appends the rendered SVG to the page.

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 displays a scatter plot of automobile engine displacement versus horsepower, with each point representing a car model and tooltips revealing the vehicle’s name. The visualization is built using the Vega-Lite API, which is registered with Vega and rendered as SVG, with data loaded from a CSV URL via d3’s `csv` function. The chart uses a custom configuration for axis styling and respects the browser window’s dimensions by setting width and height dynamically.

Sseitzfab

96% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatter plot of automobile engine displacement against horsepower, with a tooltip revealing the vehicle name when hovering over each point. Built with the Vega-Lite API, the visualization uses D3.js for data loading via `d3.csv`, pulling the auto-mpg dataset from a GitHub Gist. The code registers Vega and Vega-Lite, configures custom axis and label styling, and relies on `vl.markPoint` with encoded quantitative fields to generate the interactive SVG output.

FFlamur

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example demonstrates a scatter plot of automobile engine displacement versus horsepower, with each point representing a vehicle and tooltips revealing the model name. Built with the Vega-Lite API, the visualization uses `vl.markPoint` and `vl.x().fieldQ()`/`vl.y().fieldQ()` for quantitative axes, while `vl.tooltip().fieldN()` handles categorical labels. Data is loaded asynchronously from an auto-mpg CSV via `d3.csv`, and the chart is rendered to SVG with vega-tooltip for interactive hover details. The code also customizes axis and font styles through a shared configuration object.

JJason Tiller

95% 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 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 example displays a scatter plot of engine displacement against horsepower, with vehicle names accessible as tooltips. It uses the Vega-Lite API to construct the visualization declaratively, then renders it as SVG through Vega. The code loads automobile data from an external CSV file using `d3.csv`, and adapts the plot to the full viewport size. Configuration customizes axis and label styling for readability.

UUtsav Khatu

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between engine displacement and horsepower in automobiles, with tooltips revealing car names. Built using the vega-lite-api, it constructs a scatterplot via `vl.markPoint` and encodes quantitative x- and y-axes with `vl.x()` and `vl.y()`. Data loads asynchronously from a CSV via `d3.csv`, then renders through Vega and Vega-Lite, styled with a custom config for cleaner axis labels. The visualization fills the browser window using `autosize({ type: 'fit' })` and applies semi-transparent points for readability.

SSamirAhma

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. 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

95% match