Skip to main content
SimilarExport ZIP
100%

Vega-Lite API Template

✓ Published5🌍 Public
CCurran Kelleher
Last edited Nov 15, 2019
Created on Nov 15, 2019

This example uses the Vega-Lite API to render a scatterplot of automotive data from a CSV file, plotting engine horsepower against the origin of each vehicle. The visualization employs semi-transparent black circles to reveal overlapping points, with tooltips displaying car names on hover. The code registers Vega, Vega-Lite, and Vega-Tooltip libraries, fetches data via d3.csv, and applies a custom configuration for axis styling and label fonts. The chart dynamically fits the browser window using an autosize type of “fit” with padding.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

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 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
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 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 uses the Vega-Lite API to create a scatterplot of automobile data from a CSV file, mapping acceleration and horsepower on the axes with tooltips for car names. The visualization is rendered as an SVG via the vega and vega-lite libraries, with vega-lite-api constructing the mark specification programmatically. The code loads data asynchronously using d3.csv, applies custom axis and label styling from a config object, and fits the chart to the viewport with a tooltip handler from vega-tooltip.

Llubin-liu
95% match
Loading thumbnail…

Vega-Lite API Template

This example showcases a scatter plot of automobile data, with each point representing a vehicle’s year and horsepower. It uses the Vega-Lite API to declaratively define the visualization, registering with Vega, Vega-Lite, and d3.csv for data loading. The plot is configured with custom axis styling and tooltips, rendered as an SVG that fills the window, and includes a semi-transparent point mark for overlapping data.

CCurran Kelleher
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
94% 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