Vega-Lite API Template

Vega-Lite API Template

This example demonstrates a scatter plot of automobile data, showing the relationship between miles per gallon, horsepower, weight, and country of origin. It uses the Vega-Lite API to build the visualization declaratively, with the `vl.markCircle` and `vl.encode` methods specifying the visual encodings. The data is loaded from a CSV file via `d3.csv`, and the plot is rendered to an SVG canvas using the Vega rendering engine. The template also configures chart styling through a custom `config` object and enables interactive tooltips with the Vega Tooltip handler.

MMarta

Vega-Lite API Template

This example shows a scatter plot of automotive data, mapping engine horsepower against fuel efficiency (mpg), with points colored by country of origin and tooltips revealing car model names. It uses the Vega-Lite API to declaratively construct the visualization, while D3’s `csv` method loads the auto-mpg dataset. The vega-lite-api library registers vega and vega-lite, and the chart is rendered into an SVG via a vega view with tooltip support from vega-tooltip. The code customizes axis styles and appearance through a config object.

CCurran Kelleher

Vega-Lite API Template

This example demonstrates how to use the Vega-Lite API to build a scatter plot of automobile data, showing the relationship between weight, horsepower, and fuel efficiency (mpg), with points colored by country of origin. The visualization leverages the vega-lite-api JavaScript library to construct the chart declaratively, then renders it using Vega and Vega-Lite with an SVG output. Data is loaded asynchronously from a CSV file using D3’s `csv` function. Custom styling is applied through a config object to adjust axis labels, fonts, and colors for improved readability.

MMGamboa

Vega-Lite API

This example demonstrates a scatterplot of automotive data, mapping the country of origin along the x-axis, horsepower on the y-axis, with weight mapped to color and miles per gallon mapped to point size. Built with the Vega-Lite API, it constructs the visualization declaratively using `vl.markCircle()`, `vl.x()`, `vl.y()`, `vl.color()`, and `vl.size()`. The chart loads data from a CSV via D3’s `csv()` and uses the Vega-Lite runtime to render interactively with tooltips.

Bboreilly26

Vega-Lite API Template

This example demonstrates a scatterplot visualization of automobile data, plotting weight against horsepower for various car models. Each point is colored by country of origin and sized by miles per gallon. The visualization is built using the Vega-Lite API, a programmatic interface to Vega-Lite, which leverages the Vega rendering engine. The code imports data from a CSV file, configures axis styles and tooltips, and uses the vega-tooltip library to display car names on hover.

AALI Akbar SABZI

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

Vega-Lite API Template

This example displays a scatter plot of automobile data from the Auto MPG dataset, showing miles per gallon versus horsepower with points colored by origin and sized by weight. The visualization is built using the Vega-Lite API in JavaScript, which programmatically constructs a Vega-Lite specification that is then rendered by Vega. Data is loaded asynchronously from a CSV URL using D3’s `csv` function, and the chart fills the viewport with a fit autosize scheme. Tooltips are enabled via the Vega Tooltip handler, and custom axis and label styles are applied through a shared configuration object.

Ssamemurk21

Vega-Lite API Template

This example shows a scatter plot of auto-mpg data, mapping miles per gallon against horsepower, with color encoding for country of origin and point size for vehicle weight. Tooltips reveal car names on hover. The visualization is built using the vega-lite-api library, which wraps Vega-Lite specifications programmatically, with data loaded via d3.csv from the UCI Machine Learning Repository. It renders as an SVG through Vega, with a custom configuration for axis styling and tooltip interactions.

CCees Klap