Episode 18 - Iterating Fast with Vega Lite API

100%

Episode 18 - Iterating Fast with Vega Lite API

✓ Published1🌍 Public

Last edited Jan 16, 2022

Created on Jan 16, 2022

This example uses the Vega-Lite API to create an interactive scatter plot of automobile data from the UCI Machine Learning Repository’s Auto MPG dataset. The visualization encodes vehicle weight on the x-axis, horsepower on the y-axis, origin as color, and miles per gallon as point size, with tooltips showing car names. Built with `vl.markCircle`, `vl.x().fieldQ()`, and `vl.y().fieldQ()`, the chart renders via Vega and Vega-Lite, while d3.csv loads the data. Custom styling in `config.js` and a dark theme improve readability for presentation.

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

90% match

Loading thumbnail…

Iterating fast with Vega-Lite API

This example demonstrates an interactive scatter plot of automotive data, showing how weight, horsepower, and origin relate to fuel efficiency (mpg). The visualization uses the Vega-Lite API to declaratively specify the chart, with circle marks encoding horsepower on the y-axis and weight on the x-axis, while origin determines color and mpg controls size. The code loads data from a CSV via D3’s `csv` function, registers Vega and Vega-Lite with the API, and renders the result as SVG. Custom axis and label styling from a configuration object improves readability.

EElvira Nassirova

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

89% match

Loading thumbnail…

Ep18: Vega-Lite API

This visualization displays automobile data from a CSV file, plotting engine origin, horsepower, weight, and miles per gallon as a scatter plot with circles of varying size and color. The example highlights the convenience of the Vega-Lite API (vl) for declarative charting, which constructs and renders the specification. It uses vega-lite and vega to compile the spec, d3.csv for data ingestion, and vega-tooltip to provide interactive tooltips on hover. The chart is configured to fit the browser window.

SStoo Sepp

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

89% match

Loading thumbnail…

Iterating Fast with Vega-Lite API

This example demonstrates an interactive scatter plot of automobile data, visualizing fuel economy attributes across different countries of origin. It uses the Vega-Lite API to declaratively encode horsepower, weight, and origin onto circle marks with tooltips. The code chains API methods like `vl.x()`, `vl.y()`, and `vl.color()` to construct the specification, then renders it via Vega and Vega-Lite with a customized dark theme. Data is loaded asynchronously from CSV using d3.csv, sourced from the UCI Machine Learning Repository.

Tthomasjungcoe

89% match

Loading thumbnail…

Iterating Fast with Vega Lite API

This example demonstrates an interactive scatterplot of the classic auto-mpg dataset, plotting horsepower against miles per gallon, with color encoding by origin and size by weight. The visualization is built using the Vega-Lite API, a JavaScript wrapper that constructs Vega-Lite specifications programmatically. The code registers the API with vega and vega-lite, configures a custom tooltip via vega-tooltip’s Handler, and loads the CSV data using d3.csv. The plot renders directly into the document body, sized to the browser window, with stylistic adjustments for axis labels and overall readability.

NNikhil Reddy Manda

89% match

Loading thumbnail…

Vega-Lite API Template - Part 2

This example displays a scatter plot of automotive data, showing the relationship between miles per gallon and horsepower. Each circle encodes vehicle weight through color and engine displacement through size, with interactive tooltips revealing the car model name. The visualization is built using the Vega-Lite API, which composes specifications programmatically, and renders through Vega with D3.js for data loading via `d3.csv`. The data originates from the classic auto-mpg dataset hosted as a GitHub gist.

JJohn Jeevasaeyan

88% match