Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Rramdev2021

Last edited Feb 10, 2022

Created on Feb 10, 2022

This example uses the Vega-Lite API to render a scatter plot of Auto MPG data from the UCI Machine Learning Repository, loaded via `d3.csv`. The visualization encodes miles per gallon (mpg) on the x-axis and horsepower on the y-axis as quantitative fields, with color mapped to the categorical origin of each vehicle. Point size represents weight, and tooltips display model names using `vl.tooltip()`. The chart is built programmatically in `viz.js` and rendered with an SVG view, customized through a shared `config.js` for improved label and title 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 and D3 to render an interactive scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository. The visualization shows miles per gallon against horsepower, with color encoding for origin and point size representing vehicle weight. Hovering over a point reveals the car’s name via a tooltip. The code constructs the chart declaratively with `vl` from vega-lite-api, loads data using `d3.csv`, and renders to SVG with vega-lite and vega-tooltip.

Rrmgoldberg24

96% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to create an interactive scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository. The visualization maps miles per gallon to the x-axis, horsepower to the y-axis, and encodes origin as color while weight drives circle size. Tooltips display car names on hover. The code registers Vega, Vega-Lite, and Vega-Tooltip through `vl.register`, then loads CSV data asynchronously with `d3.csv`. Rendering uses a fit-to-window SVG view with custom axis and label styling from a shared config object.

CCaleb Crum

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a scatter plot of auto-mpg data from the UCI Machine Learning Repository, plotting miles per gallon against horsepower with points colored by origin and sized by weight. The visualization is built using the Vega-Lite API, which registers Vega and Vega-Lite libraries and renders to SVG. Data is loaded asynchronously via d3.csv, and the chart encodes tooltips for vehicle names. The code customizes axis and font styles through a config file, demonstrating programmatic chart creation with the vega-lite-api wrapper.

Hhbatteram

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to build an interactive scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository, sourced via a Gist. The visualization encodes miles per gallon on the x-axis, horsepower on the y-axis, and colors points by origin, while point size reflects vehicle weight. It renders as a full-window SVG using the vega-lite-api library, with tooltips generated through vega-tooltip. Custom configuration in config.js adjusts axis and label styling for readability. The code loads data asynchronously via d3.csv, applies a dark theme, and fits the chart to the viewport dimensions.

MMatt Woods

95% 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. The visualization maps miles per gallon on the x-axis, horsepower on the y-axis, and encodes the car’s origin in color and weight in point size, with tooltips showing the vehicle name. Built with d3.csv for data loading and vega-tooltip for hover details, all marks are drawn as circles with opacity. The chart’s appearance is customized via a Vega-Lite config object, adjusting axis styles and typography for readability.

CCheng Tang

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to render a scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository. The visualization encodes miles per gallon on the x-axis, horsepower on the y-axis, and uses both color (by origin) and size (by weight) as additional dimensions. Built with the vega-lite-api library version 0.1.0, it registers Vega and Vega-Lite, and includes a tooltip handler from vega-tooltip to display car names. The code uses `vl.markCircle`, `vl.x().fieldQ('mpg')`, and `vl.y().fieldQ('horsepower')` for the encoding, with data loaded asynchronously via d3’s `csv` function.

DDor Peled

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example presents a scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository, showing the relationship between miles per gallon, horsepower, weight, and origin. The visualization uses the Vega-Lite API with d3.csv for data loading, and configures an SVG renderer with a custom dark theme. It encodes x, y, color, size, and tooltip channels through the vl.markCircle and vl.encode methods, with vega-tooltip handling interactive hover details. The chart automatically resizes to fill the viewport.

Vvarmps

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example presents a scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository, showing the relationship between miles per gallon and horsepower, with points colored by region of origin. Mouse hover reveals tooltips with vehicle names. The visualization is built using the Vega-Lite API, which encodes the data through `vl.markCircle` and `vl.encode` specifications, with D3.js handling CSV loading via `d3.csv`. The final chart is rendered as SVG through Vega and Vega-Lite, with appearance customized through a shared config object.

AAman Bhashkar

95% match