Iterating Fast with Vega-Lite API

100%

Iterating Fast with Vega-Lite API

✓ Published0🌍 Public

Last edited Mar 11, 2021

Created on Mar 11, 2021

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.

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…

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

92% match

Loading thumbnail…

Vega-Lite API

This example demonstrates a scatterplot of automotive data, mapping the country of origin along the x-axis, horsepower on the y-axis, with weight mapped to color and miles per gallon mapped to point size. Built with the Vega-Lite API, it constructs the visualization declaratively using `vl.markCircle()`, `vl.x()`, `vl.y()`, `vl.color()`, and `vl.size()`. The chart loads data from a CSV via D3’s `csv()` and uses the Vega-Lite runtime to render interactively with tooltips.

Bboreilly26

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

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

89% match

Loading thumbnail…

Dataviz 5 - Iterating fast with Vega Lite API

A scatter plot visualizes the relationship between fuel efficiency (mpg) and horsepower for various car models, with color encoding country of origin and size encoding weight. Built using the Vega-Lite API with D3.js for data loading, the visualization renders interactively with tooltips showing model names. The code reads from an auto-mpg CSV dataset via d3.csv. The example demonstrates rapid iteration through concise declarative specifications, where the vl.markCircle function encodes all visual channels directly.

RRyAlpha

89% match

Loading thumbnail…

Vega-Lite API Template

This example demonstrates a scatter plot of automobile data, visualizing relationships between fuel efficiency (mpg), engine power (horsepower), vehicle origin, and weight using five visual channels. Constructed with the Vega-Lite API and D3.js, it loads CSV data from a gist and renders an interactive plot through Vega’s SVG renderer. The code uses `vl.markCircle` and `vl.x().fieldQ` to map quantitative fields, with tooltips enabled via `vega-tooltip`. Styling configurations adjust axis tick colors and label fonts for readability.

RReinaFeng

89% match

Loading thumbnail…

Fork of 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 visualizes vehicle horsepower against miles per gallon, with circle size encoding weight and color representing country of origin via a quantitative size encoding and a nominal color field. The visualization is built using the `vega-lite-api` library, which programmatically constructs the plot through chained method calls like `vl.x()`, `vl.y()`, and `vl.color()`, with data loaded via d3’s `csv` function. The code registers Vega-Lite and Vega-Tooltip for rendering and interactive tooltips, while a custom configuration adjusts axis styling for readability.

Ccynobill

89% match

Loading thumbnail…

Vega-Lite API Template

This example demonstrates how to use the Vega-Lite API to build a scatter plot of automobile data, showing the relationship between weight, horsepower, and fuel efficiency (mpg), with points colored by country of origin. The visualization leverages the vega-lite-api JavaScript library to construct the chart declaratively, then renders it using Vega and Vega-Lite with an SVG output. Data is loaded asynchronously from a CSV file using D3’s `csv` function. Custom styling is applied through a config object to adjust axis labels, fonts, and colors for improved readability.

MMGamboa

89% match