Skip to main content
SimilarExport ZIP
100%

Vega-Lite API Template

✓ Published0🌍 Public
MMamveguh
Last edited Mar 20, 2022
Created on Mar 20, 2022

This example renders a scatter plot of daily weight measurements using the Vega-Lite API, with points sized uniformly and the y-axis scaled from zero for clearer trends. The visualization pulls data from a CSV file hosted as a Gist, originally sourced from the UCI Auto MPG dataset. Built with the vega-lite-api template, it uses d3.csv for data loading, Vega-Lite’s markCircle encoding for points, and Vega-Tooltip for interactive hover details. The display is configured via a custom config object that adjusts font sizes and axis styles, while the chart auto-fits to the window dimensions.

AI-generated description

A visualization constructed using the vega-lite-api.

The data shown here comes from the UCI Machine Learning Repository: Auto MPG Data Set, via Gist: Scatter Plot with Menus.

MIT Licensed

Similar vizzes

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
90% match
Loading thumbnail…

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
90% match
Loading thumbnail…

Vega-Lite API Template

This example uses the Vega-Lite API to create an interactive scatter plot of the UCI Auto MPG dataset, mapping miles per gallon, horsepower, weight, and origin to the x-axis, y-axis, size, and color channels respectively. The visualization is rendered in SVG via Vega and Vega-Lite, with a tooltip showing car names. The code registers the vega-lite-api with a custom tooltip handler, loads data asynchronously using d3.csv, and applies a shared config for axis and label styling. The chart fits the full window and uses a dark color scheme.

Rrobin88824
90% match
Loading thumbnail…

Vega-Lite API Scatter Plot Template

This visualization presents a scatter plot of auto-mpg data from the UCI Machine Learning Repository, using points to show vehicle weight versus horsepower. Color encodes the country of origin, while point size maps to miles per gallon. The plot is built with the Vega-Lite API, registering Vega and Vega-Lite libraries, and uses D3’s CSV parser to fetch data from a Gist. The code configures tooltips via vega-tooltip and customizes axis and label styling through a separate config object.

JJohn Kobbeman
90% 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
90% match
Loading thumbnail…

Vega-Lite API Template

This example uses the Vega-Lite API to render an interactive scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository. It maps miles per gallon on the x-axis, horsepower on the y-axis, vehicle origin to color, and weight to point size, with tooltips showing car names. The visualization is built programmatically via `vl.markCircle` and `vl.encode` methods, then rendered as SVG using the Vega and Vega-Lite libraries with a custom config for larger fonts and a dark color scheme. Data is loaded asynchronously using `d3.csv` from a remote gist.

Hhuashe418
90% match
Loading thumbnail…

Vega-Lite API Template

This example demonstrates a scatter plot visualization of automotive data, showing the relationship between vehicle weight, horsepower, and fuel efficiency (mpg). The visualization uses the Vega-Lite API to construct a circle mark with position encoding for weight and horsepower, while color and size encode weight and mpg respectively. It pulls data from a CSV file using d3's `csv` method, and renders the chart as an SVG with a tooltip handler. The code registers Vega-Lite and uses its high-level declarative syntax to define the plot, with custom configuration for axis styling and dark text labels.

MMilena Belianovich Holtman
89% match
Loading thumbnail…

Vega-Lite API Template

This example demonstrates a scatter plot of auto MPG data, showing miles per gallon versus horsepower, with points colored by origin and sized by vehicle weight. The visualization is built using the Vega-Lite API, which is registered with Vega and Vega-Lite, and rendered as SVG. Data is loaded via d3.csv from a Gist hosting the UCI Machine Learning Repository’s Auto MPG dataset. Interactive tooltips display car names, with layout and axis styling configured through a custom config object.

CCeciliaW888
89% match