Skip to main content
SimilarExport ZIP
100%

Vega-Lite API Template

✓ Published0🌍 Public
Mmkt-ds
Last edited Oct 27, 2019
Created on Oct 27, 2019

This visualization uses the Vega-Lite API to plot automobile data from the auto-mpg CSV dataset, showing the relationship between weight, horsepower, fuel efficiency (mpg), and car model name. Circles are sized by mpg and colored by weight, with tooltips displaying the model name. The code registers Vega, Vega-Lite, and the Vega-Lite API, fetches data via d3.csv, and renders an SVG view that fits the window dimensions with customized axis and label styling.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

Vega-Lite API Template

This example visualizes automotive data from an auto-mpg CSV dataset, plotting engine weight against horsepower with circles colored by origin and sized by miles per gallon. The code constructs the visualization using the Vega-Lite API, registering it with vega and vega-lite, and rendering as SVG via d3.dsv. A custom configuration adjusts axis labels and tick styling for readability, while d3.csv loads the remote dataset. Tooltips display car model names on hover using vega-tooltip.

PPUUDI
95% match
Loading thumbnail…

Vega-Lite API Template

This example visualizes automobile fuel efficiency and performance data from the UCI Auto MPG dataset, plotting horsepower against miles per gallon with circle size encoding vehicle weight and color encoding country of origin. The visualization is built programmatically using the Vega-Lite API, which registers Vega and Vega-Lite libraries, configures a tooltip handler, and loads CSV data via d3.csv. It generates an interactive SVG scatter plot with custom axis styling, and the view auto-fits to the browser window dimensions.

EEFezerKW
94% match
Loading thumbnail…

Vega-Lite API Template

This example visualizes automobile data from the UCI Machine Learning Repository’s Auto MPG dataset, plotting horsepower against miles per gallon. Points are colored by origin and sized by vehicle weight, with tooltips revealing model names. The visualization uses the Vega-Lite API, a JavaScript wrapper for Vega-Lite specifications, registered with Vega and Vega-Lite libraries, plus D3’s `csv` loader for data ingestion. Rendering occurs as an SVG via the `markCircle` and `encode` API methods, with custom axis styling from a config object.

Jjuanmy400
94% match
Loading thumbnail…

Vega-Lite API Template

This example visualizes automobile data from the UCI Machine Learning Repository’s Auto MPG dataset, plotting origin on the x-axis, horsepower on the y-axis, and encoding mpg as circle size with tooltips showing car names. Built with the Vega-Lite API, it registers vega, vega-lite, and vega-tooltip in index.js, loads CSV data via d3.csv, and renders an interactive SVG chart configured with custom axis and label styling from config.js. The visualization updates dynamically to fit the browser window.

JJohn Lewis
93% 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…

Vega-Lite API Template Cars

This visualization displays automobile performance data from the UCI Auto MPG dataset, plotting acceleration against horsepower while encoding weight through circle size and origin as color. Hovering reveals vehicle names via tooltips. The code uses the Vega-Lite API to construct the scatter plot declaratively, with D3’s `csv` loader fetching the remote dataset, and renders through Vega’s SVG output. Custom axis and label styling come from a shared config object.

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

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository, plotting each car as a circle positioned by weight and horsepower, colored by origin, and sized by miles per gallon. Hovering reveals the car name via a tooltip. The visualization is built with the Vega-Lite API (vl), which generates a Vega-Lite specification that is registered with vega and vegaLite and rendered as SVG. Data is loaded asynchronously using d3.csv from a Gist, and the chart uses custom axis and label styling from a shared config file.

LLaura Johnson
92% match