Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Jan 7, 2022

Created on Jan 7, 2022

This example visualizes the relationship between the added and published dates of UCI Machine Learning Repository Auto MPG data records, using a Vega-Lite area mark to show temporal distribution. The code constructs the chart via the `vega-lite-api` library, which registers with `vega`, `vega-lite`, and `vega-tooltip` for interactive tooltips. Data is loaded asynchronously with `d3.json`, and the visualization renders as an SVG, with custom styling applied through a configuration object that adjusts axis and label appearance for 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 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

89% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository, plotting engine displacement 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 an SVG chart via the vega-tooltip handler for interactive tooltips. Data is loaded asynchronously with d3.csv from a Gist, while the chart encodes quantitative fields for axes and sizes. The code also applies a custom configuration for axis styling and font readability.

AAD-W99

89% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository, plotting vehicle model year against miles per gallon. Each circle is colored by the vehicle’s region of origin, and hovering reveals the car model name via tooltips. The visualization is built programmatically using the Vega-Lite API, with Vega and Vega-Lite registered for rendering, and D3.js handles CSV data loading. Custom configuration adjusts axis ticks, font sizes, and dark text color for improved readability.

AAriana

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

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

88% match

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

88% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository as a scatter plot, encoding miles per gallon on the x-axis, horsepower on the y-axis, and vehicle origin as color, with point size reflecting weight. It uses the Vega-Lite API to declare the chart specification programmatically, registering it with Vega and Vega-Lite for rendering in SVG. The code also imports the dataset via d3.csv, applies custom axis and label styling through a config object, and enables interactive tooltips using the vega-tooltip Handler. The visualization auto-fits to the browser window dimensions.

Vvvs1680

88% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository, showing acceleration, horsepower, and weight as area marks with tooltips displaying car names. It uses the Vega-Lite API (vl) to define the visualization declaratively, with D3’s csv loader fetching the data. The code registers vega, vega-lite, and vega-lite-api, and uses vega-tooltip’s Handler for interactive tooltips. Styling is customized via a config object, and the chart is sized to fit the window, with rendering done in SVG.

Pplusbeauxjours

88% match