Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Feb 27, 2021

Created on Feb 27, 2021

This example displays a scatter plot of automotive data, mapping engine displacement on the x-axis against horsepower on the y-axis, with each point’s opacity and size fixed. The visualization uses the Vega-Lite API, registered with vega and vega-lite, to render the mark as SVG. Data is loaded asynchronously via D3’s `csv` from a remote GitHub gist, with axis labels and tooltips showing the vehicle name. The view adapts to the full window size and includes a config for styling.

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 automotive data, with engine displacement mapped to the x-axis and horsepower to the y-axis, using a semi-transparent point mark for each vehicle. The visualization is built with the Vega-Lite API, which composes the specification and rendering through Vega and Vega-Lite, while D3 (d3.csv) fetches the auto-mpg dataset from a remote URL. The code also applies custom axis and label styling via a config object, and includes a Vega Tooltip handler for interactive hovering.

ZZakaria Salogo

96% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a scatterplot of automotive data, mapping engine displacement to horsepower, with each point colored and labeled by car name. The visualization is built using the Vega-Lite API, with code that registers the vega, vega-lite, and vega-lite-api libraries, and uses vega-tooltip for interactive hover details. The data is loaded via d3.csv from a remote GitHub gist, and the chart is configured with custom axis styles and an opacity effect to reduce overplotting. The rendering targets an SVG output, sized to fill the browser window.

ZZakaria Salogo

96% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatter plot of automobile data, mapping engine displacement on the x-axis against horsepower on the y-axis, with each point representing a car model and its name shown as a tooltip on hover. The visualization uses the Vega-Lite API to define the chart specification programmatically, while D3’s `csv` function loads the dataset from a GitHub gist. The `vega` and `vega-lite` libraries handle rendering to SVG, and `vega-tooltip` provides interactive hover details. Custom axis styling and opacity settings are applied via the `config.js` file.

Mmisstong

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 shows a scatterplot of automobile data—engine displacement on the x-axis and horsepower on the y-axis—with tooltips displaying each vehicle’s name. The visualization is built using the Vega-Lite API, which is registered with vega and vega-lite, and rendered as an SVG via vega-tooltip for interactive hover details. The data is loaded asynchronously from a CSV file using d3.csv. The chart resizes to fill the viewport, with custom axis and label styling defined in a separate config module.

Nnecat1

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a scatter plot of automobile displacement against horsepower, with tooltips revealing vehicle names. Each point uses a semi-transparent fill to visualize overlapping data. The visualization is built using the Vega-Lite API, with custom configuration for axis styling and label fonts. Data is loaded asynchronously from a CSV file via `d3.csv`, and the chart is rendered as SVG using Vega-Lite’s `markPoint` encoding with quantitative scales for both axes.

DDaMei1993

95% match

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

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a scatter plot of automobile data, mapping engine displacement on the x-axis and horsepower on the y-axis, with a tooltip displaying the vehicle name on hover. It uses the vega-lite-api to construct the visualization spec, which is then rendered through Vega-Lite and Vega, with d3.csv loading the data from a remote URL. The chart is configured with custom axis and label styling, and it automatically fits the full browser window.

Sstefanpullen

95% match