Vega-Lite API Template fast iteration

100%

Vega-Lite API Template fast iteration

✓ Published0🌍 Public

Last edited Sep 5, 2021

Created on Sep 4, 2021

This example demonstrates rapid iteration with the Vega-Lite API by rendering a scatter plot of automobile data from the UCI Machine Learning Repository. It shows the relationship between highway miles per gallon, engine displacement, model year, and city MPG using circle marks with opacity. The visualization is built programmatically using `vega-lite-api` to construct the specification, then rendered as an SVG via Vega and Vega-Lite, with tooltips handled by `vega-tooltip`. The code uses `d3.csv` to fetch data, applies custom axis and label styling from a config object, and dynamically sizes the chart to fit the window.

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

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

91% match

Loading thumbnail…

Vega-Lite Iterations

This example demonstrates an interactive scatter plot of automotive fuel economy data, showing the relationship between cylinder count and origin while revealing individual car names through tooltips. Rendered as a Vega-Lite visualization via the `vega-lite-api`, the chart applies a custom configuration for axis styling and font sizes before resizing to fit the viewport. The data is loaded asynchronously from a CSV using `d3.csv`. The plot uses semi-transparent, oversized marks with opacity encoding to avoid overplotting, and the code registers `vega-tooltip` for hover interactions.

Ssikadali

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

This visualization displays a scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository, mapping miles per gallon against horsepower while encoding vehicle origin by color and weight by point size. Built using the Vega-Lite API, it registers handlers through `vega`, `vega-lite`, and `vega-tooltip` to render interactive SVG graphics with hover tooltips. The code loads CSV data with `d3.csv`, applies a custom configuration for axis styling, and dynamically sizes the chart to fit the window dimensions.

CChris Briggs

90% match

Loading thumbnail…

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

90% match

Loading thumbnail…

first-Vega-Lite-API-Template

This example renders a scatter plot of automobile performance data from the UCI Auto MPG dataset, showing miles per gallon against horsepower. Each circle is colored by country of origin and sized according to vehicle weight, with tooltips displaying model names. The visualization is built using the vegalite-api, which composes Vega-Lite specifications programmatically in JavaScript, then renders them through Vega with an SVG view. Data loading uses `d3.csv` from D3 v5, while vega-tooltip provides interactive hover details.

AAudioDen

90% match

Loading thumbnail…

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

90% match