Skip to main content
SimilarExport ZIP
100%

Vega-Lite API Template

✓ Published0🌍 Public
AAlice Hua
Last edited Nov 18, 2019
Created on Nov 18, 2019

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.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

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

Ddavid-cv2
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 visualization uses the Vega-Lite API to render a scatter plot of automotive data from a CSV file, showing engine displacement, horsepower, model year, and weight. Each circle represents a car, with position encoding displacement and horsepower, color encoding year, and size encoding weight. The code registers Vega, Vega-Lite, and the Vega-Lite API with tooltip support, loads data via `d3.csv`, and applies a custom config for axis and font styling. It demonstrates using `vl.markCircle`, `.encode`, and chaining methods to build an interactive chart programmatically.

AAmit Wadhwa
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 various car models, with tooltips revealing the car name for each point. Built with the Vega-Lite API, the visualization renders directly to SVG using the `vl` interface to define marks and encodings. The code registers Vega and Vega-Lite, loads data from a CSV file via `d3.csv`, and applies custom styling through a `config` object to improve readability.

Mmaxthamt
95% match
Loading thumbnail…

Vega-Lite API Template

This example uses the Vega-Lite API to render a scatter plot of automotive data from a CSV file, mapping engine displacement to horsepower and coloring points by model year. The visualization is built programmatically by registering Vega-Lite with the `vl` API, fetching data via `d3.csv`, and applying custom axis and label styling from a config object. The chart is rendered as an SVG, with tooltips enabled through Vega Tooltip to display car names on hover.

CCurran Kelleher
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 performance data from a CSV file, plotting engine displacement against horsepower with circles colored by origin and sized by weight. Tooltips reveal car names on hover. The visualization is built using the Vega-Lite API, which registers Vega and Vega-Lite libraries, loads data with d3.csv, and renders an SVG chart configured with custom axis styling and a dark color scheme. The code demonstrates programmatic chart construction through vl.markCircle and vl.encode methods.

CCurran Kelleher
94% match