Iterating fast with Vega-Lite API

100%

Iterating fast with Vega-Lite API

✓ Published0🌍 Public

Last edited Jun 10, 2021

Created on Jun 10, 2021

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.

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

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

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

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

92% match

Loading thumbnail…

Vega-Lite API Template

This interactive scatter plot visualizes automotive data from the UCI Machine Learning Repository, showing the relationship between fuel efficiency (mpg) and horsepower while encoding car origin by color and weight by circle size. Hovering reveals the vehicle name via tooltips. Built with the Vega-Lite API, the visualization chains declarative specifications programmatically, registering Vega-Lite and Vega with the vega-lite-api library. The code customizes axis styling through a shared config object, loads data via d3.csv, and renders to an SVG using Vega’s renderer with automatic window sizing.

GGang Chen

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

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

92% match

Loading thumbnail…

Vega-Lite API Template

This example displays a scatter plot of auto-mpg data, encoding horsepower, weight, and origin. A circle mark uses quantitative axes for mpg and horsepower, color by origin, and size by weight. It features a tooltip for vehicle names. Built with the Vega-Lite API, it renders an SVG chart using vega-lite-api, vega, vega-lite, and d3.csv, with custom styling via a config object. The data comes from the UCI Machine Learning Repository Auto MPG dataset, loaded asynchronously and displayed with interactive tooltips.

CCurran Kelleher

92% match