Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Dec 9, 2022

Created on Dec 9, 2022

This example uses the Vega-Lite API to render a line chart of automobile data from the UCI Auto MPG dataset, showing horsepower over time. The chart colors the lines by weight and uses the `fieldT` and `fieldQ` encoding methods to map temporal and quantitative data. The D3-based `vega-lite-api` library, along with the `vega` and `vega-lite` rendering engines, produces an interactive SVG visualization with a tooltip displaying car names. The configuration sets custom axis and label styling for improved 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…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to render an interactive scatter plot of automobile data from the UCI Machine Learning Repository’s Auto MPG dataset. It displays miles per gallon on the x-axis, horsepower on the y-axis, with color encoding by origin and size encoding by weight, plus tooltips for car names. The visualization fetches data via `d3.csv` and renders using `vega`, `vega-lite`, and `vega-lite-api`, with a custom config for axis styling and a Vega Tooltip handler. The chart is fit to the full window size.

JJessica Tucker

92% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example demonstrates how to build interactive visualizations using the Vega-Lite API within a D3.js framework. It displays a line chart of automobile data from a CSV file, plotting horsepower over time with a viridis color scale and tooltips showing vehicle names. The visualization leverages the vega-lite-api library to construct the chart declaratively, while D3’s csv function loads the data. Custom configuration adjusts axis styling and font sizes, and the final SVG output is rendered across the full viewport with auto-sizing.

Zzykel

92% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to display Auto MPG data from the UCI Machine Learning Repository, plotting horsepower against miles per gallon with circle marks. Each circle’s size encodes weight, while color groups vehicles by origin, and hovering reveals car names via tooltips. The code registers Vega, Vega-Lite, and the Vega-Lite API, renders SVG output, and uses a custom config to style axes and labels. Data is fetched asynchronously with d3.csv, and the visualization adapts to the window dimensions.

NNioh

91% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization renders a line chart of the Auto MPG dataset from the UCI Machine Learning Repository, using the Vega-Lite API wrapper for JavaScript. It plots horsepower against weight, with a dual color encoding for weight as both a point color and origin as a categorical color, creating a gradient effect. The chart is built with `vega-lite-api`, `vega`, and `vega-lite`, with data loading via `d3.csv` and tooltips enabled through `vega-tooltip`. The visualization fills the browser window with a custom config for dark text and light gray axes.

TTontonRitonBZH

91% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes automobile data from the UCI Machine Learning Repository, displaying a scatter plot of miles per gallon against horsepower. Color encodes the car’s country of origin, while the size of each circular mark scales with weight, and tooltips reveal the vehicle name. It uses the Vega-Lite API to construct the chart declaratively, with the `vl.markCircle`, `vl.x().fieldQ`, and `vl.color().fieldN` functions. The code imports data via `d3.csv`, registers Vega-Lite with `vega-tooltip`, and renders the output as an SVG using the Vega view.

TThiago Sawada

91% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to plot automobile performance data from the UCI Auto MPG dataset. A bubble chart displays engine displacement (mpg) against horsepower, with circle size encoding vehicle weight and color indicating the country of origin. Hovering a point reveals the car’s name via a tooltip. The visualization is built programmatically with `vega-lite-api`, rendered to SVG through `vega`, and includes the `vega-tooltip` handler. Appearance customization modifies axis labels and tick marks to improve readability.

CCodeNinja

91% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes automobile performance data from the auto-mpg dataset, plotting cylinders and horsepower with circle size encoding weight and color encoding origin. Built with the Vega-Lite API for declarative chart specification, it uses d3.csv to load the data and renders the result as an SVG via the Vega view API. Configuration customizes axis labels and tick colors, while a Vega tooltip handler displays car names on interaction.

Cchristopher

91% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization uses the Vega-Lite API to plot automotive data from the auto-mpg.csv dataset, showing car origin along the x-axis, horsepower on the y-axis, and encoding weight through color and mpg through point size. The chart renders as an SVG using vega, vega-lite, and vega-lite-api, with d3.csv loading the data and vega-tooltip providing interactive hover details that reveal each car’s name. A custom config adjusts font sizes and axis colors for readability.

LLei Lei

91% match