Vega-Lite API Template

100%

Vega-Lite API Template

✓ Published17🌍 Public

Last edited Apr 26, 2020

Created on Nov 15, 2019

This example shows the relationship between engine displacement and horsepower for a collection of automobiles, with points colored by region of origin and tooltips revealing model names. The visualization uses the Vega-Lite API to construct a scatter plot declaratively, with `vl.markCircle`, `vl.x`, `vl.y`, and `vl.color` encoding channels. Data loads asynchronously via D3’s `csv` function from a GitHub gist, and the resulting chart renders as SVG, styled through a custom config object that adjusts axis and label appearance. The code integrates Vega, Vega-Lite, Vega-Lite API, and Vega-Tooltip to enable interactive hover details.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

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

93% match

Loading thumbnail…

Vega-Lite API Template

This example demonstrates a scatter plot of automotive engine displacement versus horsepower, where each point represents a vehicle and tooltips reveal its model name. Built with the Vega-Lite API, it registers Vega and Vega-Lite through the `vl.register()` function and loads data from a CSV file of auto-mpg statistics using `d3.csv`. The visualization uses `vl.markPoint()` with configurable opacity and axis styling, rendered as an SVG that scales to fit the browser window via `autosize({ type: 'fit' })`.

CCurran Kelleher

93% match

Loading thumbnail…

Vega-Lite API Template

This visualization uses a scatter plot to explore the relationship between engine displacement and horsepower in automobile data. The data is loaded from a CSV file fetched from a gist URL using the `d3.csv` function. Built with the Vega-Lite API, the example registers Vega and Vega-Lite, configures an SVG renderer, and adds tooltips via the `vega-tooltip` Handler. Point marks are encoded with quantitative fields on both axes, scaled with `zero: false`, and include a tooltip displaying the vehicle name, with overall appearance customized in a separate config file.

AAustin Pagotto

93% 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

93% 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

93% match

Loading thumbnail…

Vega-Lite API Template

This example demonstrates a scatter plot of automobile data, showing the relationship between horsepower and country of origin, with tooltips revealing car names. The visualization is built using the Vega-Lite API, which programmatically constructs a Vega-Lite specification through method chaining (e.g., `vl.markPoint`, `vl.x().fieldN`). The code registers Vega, Vega-Lite, and the Vega-Lite API in a D3 v5 environment, fetches CSV data via `d3.csv`, applies custom axis and label styling from a separate config module, and renders to SVG with an interactive tooltip handler from Vega-Tooltip.

PPriteshlip10

93% 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

93% 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

93% match