Skip to main content
SimilarExport ZIP
100%

Vega-Lite API Template

✓ Published1🌍 Public
Ddavid-cv2
Last edited Nov 17, 2019
Created on Nov 17, 2019

This example shows a scatter plot of automobile data, with engine displacement on the x-axis, horsepower on the y-axis, and points colored by model year and sized by vehicle weight. Tooltips display the car name on hover. Built with the Vega-Lite API, it registers Vega and Vega-Lite libraries, and uses vega-tooltip for interaction. The data is loaded via D3’s `csv` function from a remote URL, with custom axis and label styling applied through a configuration object.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

Vega-Lite API Template

This example displays a scatter plot of automobile data, showing the relationship between engine displacement and horsepower, with tooltips revealing the car model name. Built with the Vega-Lite API, the visualization loads data from a CSV using `d3.csv` and renders through the `vega` and `vega-lite` libraries. Point marks are configured with a fill, a fixed size, and reduced opacity, while axis styling is customized via a config object. The chart's dimensions adapt to the window size, and interactive tooltips are enabled using `vega-tooltip`.

Rrandom-program
96% match
Loading thumbnail…

Vega-Lite API Template

This example demonstrates a scatter plot of automobile data, showing the relationship between engine displacement and horsepower, with each point representing a car model. The visualization is built using the Vega-Lite API, which constructs a specification that is then compiled and rendered by Vega and Vega-Lite. Data is loaded asynchronously from a CSV file via `d3.csv`, and the plot is configured with custom axis styles and tooltips via the `vega-tooltip` Handler. The chart fills the browser window and uses an interactive SVG renderer.

Ddreesmpk
95% match
Loading thumbnail…

Vega-Lite API Template

This example demonstrates a scatter plot of automotive data, mapping engine displacement to horsepower with circle color encoding model year and size encoding vehicle weight. Tooltips reveal car names on hover. It is built using the Vega-Lite API, a programmatic wrapper for the Vega-Lite grammar, with data loaded from a CSV via D3's `csv` function and rendered as SVG through the bundled Vega and Vega-Lite libraries. The visualization spans the full viewport and applies custom axis and label styling.

AAlice Hua
95% match
Loading thumbnail…

Vega-Lite API Template

This example demonstrates a scatter plot of automobile data, showing the relationship between engine displacement and horsepower, with tooltips revealing the car model name. The visualization is built programmatically using the Vega-Lite API, which constructs a Vega-Lite specification through a fluent JavaScript interface. Data is loaded from a CSV file using d3’s `csv` function, and the resulting chart is rendered as an SVG via the `v.render()` method, with custom axis and label styling applied through a configuration object.

Eestebanba
95% match
Loading thumbnail…

Vega-Lite API Template

This example demonstrates a scatter plot of automobile data, mapping engine displacement on the x-axis and horsepower on the y-axis, with tooltips revealing each vehicle’s name. It uses the Vega-Lite API to declaratively define the marks and encodings, registering with Vega and Vega-Lite for rendering as SVG. Data is loaded asynchronously from a CSV file via d3.csv, while the chart’s size adapts to the browser window. Configuration customizes axis and label styling, and Vega-Tooltip provides interactive hover information.

Llaplantalaplanta
95% match
Loading thumbnail…

Vega-Lite API Template

This example visualizes automobile data from a CSV file, plotting engine displacement against horsepower as a scatter plot with points colored by model year, sized by vehicle weight, and displaying car names on tooltip. The visualization is built using the Vega-Lite API, which programmatically constructs a specification that is rendered as SVG through Vega and Vega-Lite. The data is loaded asynchronously via D3's `csv` function, and the chart includes visual customization through a custom config object that adjusts axis and label styling.

CCurran Kelleher
95% match
Loading thumbnail…

Vega-Lite API Template

This example demonstrates a scatter plot of automotive data, showing the relationship between engine displacement and horsepower for individual car models, with tooltips revealing the car’s name on hover. It uses the Vega-Lite API to declaratively define the chart’s marks, encodings, and scales, which are then rendered as SVG via Vega and Vega-Lite. Data is loaded asynchronously from a CSV file using D3’s `csv` function, while a custom configuration adjusts axis labels and colors for readability. The visualization dynamically resizes to fit the browser window.

HHelgaHagel
95% match
Loading thumbnail…

Vega-Lite API Template

This example demonstrates a scatter plot of automobile data, mapping engine displacement on the x-axis and horsepower on the y-axis, with each point representing a car model. The visualization is built using the Vega-Lite API, which programmatically defines the chart’s encoding and mark properties. Data is loaded as CSV from a remote URL via the `d3.csv` function, and the chart is rendered to an SVG canvas. The code also includes custom axis styling and a tooltip handler from the Vega Tooltip library to display car names on hover.

FFloorNummer
94% match