Vega-Lite API Template Practice

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

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

Vega-Lite API Template

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.

CCurran Kelleher

Vega-Lite API Example

This example uses the Vega-Lite API to create a scatter plot of automobile data from a CSV file. The visualization encodes miles per gallon, horsepower, origin, and weight into position, color, and size, with a tooltip revealing the car name. It leverages vega-lite-api, vega, and vega-lite to generate an SVG chart, and d3.csv for data loading. The chart uses overlaid translucent circles and a custom config to improve label readability.

Bbakstorage00001

Template Vega-Lite Api

This example demonstrates a scatter plot of automobile data, mapping miles per gallon, horsepower, weight, and origin using the Vega-Lite API. It shows how to declaratively build interactive visualizations with circle marks, color encoding, and tooltips. The code registers Vega, Vega-Lite, and vega-tooltip via `vl.register`, loads CSV data from a gist using d3.csv, and renders to an SVG view that fits the window. Appearance is customized with a configuration object, and the visualization auto-sizes with padding.

AAlan Santos

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

Vega-Lite API Template

This example uses the Vega-Lite API to render an interactive scatter plot of automobile data from the UCI Auto MPG dataset, loaded via d3.csv. A circle mark encodes origin on the x-axis, horsepower on the y-axis, weight as color, and mpg as size, with tooltips showing car names. The visualization leverages vega-lite-api’s fluent interface, registered with vega and vega-lite, and includes vega-tooltip for interactivity. A custom config adjusts axis, label, and title styling for readability, while the chart fits the window using autosize and SVG rendering.

JjohnmurphyLC

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