Vega-Lite API Template

100%

Vega-Lite API Template

✓ Published1🌍 Public

Last edited Mar 12, 2021

Created on Mar 10, 2021

This visualization displays automobile data from the auto-mpg dataset, plotting the origin of each vehicle against its horsepower as circles. The chart uses the Vega-Lite API within a D3.js framework, leveraging `vl.markCircle()` for the points and `vl.x().fieldN()` and `vl.y().fieldQ()` for the categorical and quantitative encodings. Data is loaded via `d3.csv`, and the rendering pipeline combines Vega, Vega-Lite, and Vega-Tooltip to provide interactive tooltips with vehicle names. A custom configuration adjusts axis styling and font sizes for improved readability.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

Vega-Lite API Template

This visualization displays the relationship between the origin of a car and its horsepower using data from the UCI Machine Learning Repository’s Auto MPG dataset. Rendered as a circular scatter plot, each point represents a car, with opacity enhancing readability when points overlap. The code leverages the Vega-Lite API, specifically `vl.markCircle` and `vl.encode` for visual encoding, while `d3.csv` handles data loading. The visualization automatically fits the browser window and includes a custom tooltip via Vega-Tooltip, with axis styling customized through a separate configuration file.

Ggoyalshivam204

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

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

Fork of Vega-Lite API Template

This visualization displays automobile data from an auto-mpg dataset, plotting horsepower against origin of manufacture. Each car is represented as a semi-transparent circular mark, with tooltips revealing the vehicle’s name on hover. Built with the Vega-Lite API, the example uses `vl.markCircle`, `vl.x().fieldN()`, and `vl.y().fieldQ()` to encode categorical and quantitative fields. The code registers Vega and Vega-Lite with `vl.register`, loads CSV data via `d3.csv`, and applies a custom config to adjust axis and label appearance.

JJonas Carvalho

93% match

Loading thumbnail…

Vega-Lite API Template

This interactive scatter plot visualizes automobile performance data from the UCI Machine Learning Repository’s Auto MPG dataset, mapping horsepower against displacement while encoding origin by color and mpg by point size. Built with the Vega-Lite API, the visualization uses `vl.markCircle` and `vl.encode` to define visual channels, with `d3.csv` loading the remote dataset. The chart dynamically fits its container, applies custom axis and label styling via the `config` object, and integrates Vega Tooltip for hover interactions.

DDeaxNG

93% match

Loading thumbnail…

Vega-Lite API Template I

This visualization displays automobile performance data from the UCI Auto MPG dataset, plotting horsepower against miles per gallon with each point colored by country of origin and sized by vehicle weight. Built with the Vega-Lite API, the example constructs chart specifications programmatically, encoding tooltips for car names and customizing axis styling through a config object. The implementation uses `vl.markCircle` with field encodings for quantitative and nominal data, while `getData` imports the dataset via d3's `csv` function, and the `run` function renders the visualization directly into the document body.

OOleJRask

93% match

Loading thumbnail…

Vega-Lite API Template

This visualization displays the relationship between a car's origin and its horsepower using a circle scatter plot. It is built with the Vega-Lite API, which constructs a declarative specification that is rendered to SVG. The visualization fetches auto-mpg data from a CSV file using d3.csv, defines circle marks with custom opacity and size, and maps origin to the x-axis and horsepower to the y-axis. The API registers with Vega-Lite and Vega, and includes an interactive tooltip displaying the car's name.

Nnkohdatavis

93% match

Loading thumbnail…

Vega-Lite API Template

This visualization displays automobile data from the auto-mpg CSV file, plotting engine displacement against horsepower. Each point represents a vehicle, colored by its country of origin, with hover tooltips revealing the model name. The example demonstrates the vega-lite-api, which builds Vega-Lite specifications through a fluent JavaScript interface. It uses d3.csv for data loading, Vega-Lite's markPoint encoding, and integrates vega-tooltip for interactive labels. The visualization automatically resizes to fit the browser window, with custom axis styling and dark-themed labels.

GGnav3852

92% match