Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Sep 20, 2022

Created on Sep 20, 2022

This example shows a scatter plot of auto-mpg data, with a circle for each car positioned by miles per gallon and horsepower. The color of each circle encodes the car’s origin, while its size reflects the car’s weight, and hovering reveals the model name. It uses the Vega-Lite API to define the visualization declaratively, with D3’s `csv` function to load the data from the UCI Machine Learning Repository. The chart is rendered as an SVG via Vega and Vega-Lite, with tooltips provided by the vega-tooltip handler.

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 renders a scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository, visualizing each car as a circle positioned by its miles per gallon and horsepower, colored by its region of origin, and sized by its weight. The visualization is constructed using the Vega-Lite API, with the `vl` object building a mark-circle encoding that maps data fields to x, y, color, and size channels. The underlying code registers Vega and Vega-Lite, fetches the data via d3’s `csv` function, and uses a custom config to style axis labels and titles.

NNYY

96% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a scatter plot of auto MPG data, encoding miles per gallon on the x-axis, horsepower on the y-axis, and using color for the car’s origin and size for weight, with tooltips revealing car names. The visualization is built with the Vega-Lite API, which compiles specifications to Vega, and rendered via D3 v5. It loads CSV data from the UCI Machine Learning Repository and customizes axis and label styling through a configuration object.

Ddimanya

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatter plot of auto-mpg data, mapping horsepower against miles per gallon with circles colored by origin and sized by weight. Tooltips reveal vehicle name and horsepower on hover. Built with the Vega-Lite API, it configures the visualization programmatically, registers Vega and Vega-Lite for rendering as SVG, and loads CSV data via D3’s `csv` function from the UCI Auto MPG dataset.

Pprogsum

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example presents an interactive scatter plot of the Auto MPG dataset, using circle marks to show the relationship between miles per gallon and horsepower. Point color encodes the country of origin, while size maps to vehicle weight. Built with the Vega-Lite API, the visualization loads data via D3’s `csv` function and renders to SVG. The code configures the chart’s dimensions and appearance through a custom config object, and tooltips are enabled via the Vega Tooltip handler.

Ggzm17

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 shows a scatter plot of Auto MPG data, where each point represents a car with its miles per gallon on the x-axis, horsepower on the y-axis, and weight encoded by point size. The color distinguishes the car’s origin. The visualization is built using the Vega-Lite API, which programmatically constructs a specification that renders to SVG via Vega and Vega-Lite. Data is loaded asynchronously from a CSV URL using d3.csv. Interactive tooltips display car names, and custom configuration adjusts axis and label styling.

JJoseph Bermudez

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to construct an interactive scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository. The plot displays each car as a circle, with its position determined by miles per gallon and horsepower, while color encodes the country of origin and size reflects vehicle weight. The visualization is built using the vega-lite-api library, which registers Vega and Vega-Lite specifications, and includes tooltips via vega-tooltip. Data is loaded through d3.csv, and the chart resizes to fit the browser window.

RRahel Gunaratne

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