Vega-Lite API Template

100%

Vega-Lite API Template

✓ Published0🌍 Public

Last edited Nov 25, 2019

Created on Nov 25, 2019

This example visualizes the relationship between engine displacement, horsepower, weight, and model year for the classic Auto MPG dataset. A scatterplot maps displacement to the x-axis and horsepower to the y-axis, with circle size encoding weight and color encoding year via Vega-Lite’s quantitative field mappings. The code uses the Vega-Lite API (`vl.markCircle`, `vl.x().fieldQ()`) to build the specification, registers it through `vega-lite-api` with vega-tooltip for interactive hover details, and loads CSV data with `d3.csv`. Styling is customized through a config object.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between vehicle displacement, horsepower, weight, and model year in the classic Auto MPG dataset. A scatter plot of displacement against horsepower uses circle size to encode weight and color to distinguish model years, with hovering revealing each car’s name. Built with the Vega-Lite API, it composes marks and encodings programmatically via `vl.markCircle` and `vl.encode`, then renders through Vega and Vega-Lite with a custom tooltip handler. The data loads asynchronously from a gist CSV using d3’s `csv` function, and the chart fills the browser window with a customized dark-on-light theme.

PPeter Williams

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

92% match

Loading thumbnail…

Vega-Lite API Template

This example visualizes the relationship between automobile displacement, horsepower, and weight using a Vega-Lite scatter plot, with each point sized proportionally to vehicle weight. The vis lazily evaluates a Vega-Lite specification constructed programmatically through the `vega-lite-api` library’s fluent interface, which registers with Vega, Vega-Lite, and D3 (d3.v5). Data is loaded asynchronously via D3’s CSV parser from a GitHub-hosted auto-mpg dataset. The chart renders as an SVG, with tooltips enabled via `vega-tooltip` and axis styling customized in a separate config module.

CCurran Kelleher

92% match

Loading thumbnail…

Vega-Lite API Template

A scatter plot displays automobile origin, horsepower, and weight, with each point sized and colored by weight and tooltips revealing model names. The visualization uses the Vega-Lite API (`vl.markCircle`, `vl.x().fieldN`, `vl.y().fieldQ`) to construct a declarative spec, rendered as SVG via Vega-Lite and Vega. Data loads from a CSV of the Auto MPG dataset, and a custom config adjusts axis styling and font sizes. The example demonstrates programmatic chart building, programmatic width/height fitting, and tooltip integration via the `vega-tooltip` Handler.

Mmiklud

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

91% match

Loading thumbnail…

Vega-Lite API Template

This example visualizes automotive performance metrics from an auto-mpg dataset, plotting engine displacement against horsepower with points colored by model year and sized by vehicle weight. It uses the Vega-Lite API to declaratively specify the chart, with Vega and Vega-Lite handling rendering and the Vega Tooltip library providing interactive hover details. D3.js loads the CSV data, and custom configuration adjusts font sizes and axis styling for readability.

CCurran Kelleher

91% match

Loading thumbnail…

Vega-Lite API Template

This example uses the Vega-Lite API to render a scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository. The plot maps vehicle weight to the x-axis and horsepower to the y-axis, with point size representing miles per gallon and color encoding weight. The visualization loads data via `d3.csv` and uses the `vl.markCircle` and `vl.encode` API to define the marks and channels. Vega-Lite and Vega are registered through the `vl.register` function, and interactivity is added with `vega-tooltip`.

CCyc-Evelyn

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

91% match