Vega-Lite API Template 8

100%

Vega-Lite API Template 8

✓ Published2🌍 Public

Last edited Oct 12, 2021

Created on Oct 12, 2021

This visualization displays two scatter plots of Auto MPG data from the UCI Machine Learning Repository. The main chart plots two quantitative fields against each other, colored by vehicle class, while a smaller repeater panel shows multiple combinations of the same fields. Built with the Vega-Lite API, it uses `vl.markCircle`, `vl.x().fieldQ()`, and `vl.y().fieldQ()` to encode variables, with D3’s `csv` loader for data parsing. The code configures custom axes, tooltips via vega-tooltip, and responsive sizing that adapts to the window dimensions.

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…

Vega-Lite API Template 7

This example visualizes automobile data from the UCI Auto MPG dataset, plotting two numeric attributes as a scatter plot with points colored by vehicle class. The main chart fills the viewport, while a smaller overview version in the corner provides navigation context. Built with the Vega-Lite API, it uses `vl.markCircle`, `vl.x().fieldQ()`, and `vl.y().fieldQ()` to encode fields, with `vl.color().fieldN()` for categorical coloring. Data loads via D3’s `csv` function, and the configuration customizes axis styling and label appearance.

OOleJRask

94% match

Loading thumbnail…

Vega-Lite API Template 10

This visualization uses the Vega-Lite API with D3 to display a scatter plot of Auto MPG data from the UCI Machine Learning Repository, encoding horsepower and acceleration on the axes while coloring points by vehicle class. A second miniature chart, generated with repeated row and column facets, serves as a navigation overview. The code customizes axes and label styling through separate config objects and fetches data via D3’s CSV loader. Both charts are rendered as SVG using Vega-Lite’s API.

OOleJRask

93% match

Loading thumbnail…

Fork of Vega-Lite API Template 8

This visualization uses a Vega-Lite API spec to render two scatter plots of UCI Auto MPG data, with points colored by vehicle class. The main chart (drawn via vega-lite-api) maps the fields "8" and "10" to axes, while a second, smaller repeat-plot cycles through columns and rows for facet exploration. The interface includes a config for dark axis labels and a tooltip handler from vega-tooltip. Data is loaded asynchronously via `d3.csv`, and both charts are embedded in a wrapper using SVG rendering.

RRobert Johnson

91% match

Loading thumbnail…

Vega-Lite API Template

This example presents a scatter plot of automobile data from the UCI Machine Learning Repository’s Auto MPG dataset, showing relationships between miles per gallon, horsepower, weight, and country of origin. The visualization is built using the Vega-Lite API (`vl.markCircle`, `vl.encode`) in a JavaScript framework, with data loading handled by `d3.csv` from D3 v7. The code registers Vega-Lite and Vega, applies custom axis styling from `config.js`, and renders a responsive SVG chart that fills the browser window with tooltips enabled via the Vega Tooltip handler.

OOleg Zhernovoy

91% match

Loading thumbnail…

Vega-Lite API Template

This example presents a scatter plot of auto-mpg data from the UCI Machine Learning Repository, visualizing vehicle attributes across model years. Each circle’s position encodes the year and horsepower, while its color differentiates the region of origin and its size reflects vehicle weight, with tooltips revealing model names. The visualization is built using the Vega-Lite API, where `vl.x()`, `vl.y()`, `vl.color()`, and `vl.size()` are chained to define encodings. Data is loaded asynchronously via `d3.csv`, and the rendered SVG view is configured with custom axis styling and a tooltip handler from `vega-tooltip`.

JJoe Hutchins

90% match

Loading thumbnail…

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 plot maps vehicle weight to the x-axis and horsepower to the y-axis, with point size representing miles per gallon and color encoding weight. The visualization loads data via `d3.csv` and uses the `vl.markCircle` and `vl.encode` API to define the marks and channels. Vega-Lite and Vega are registered through the `vl.register` function, and interactivity is added with `vega-tooltip`.

CCyc-Evelyn

90% match

Loading thumbnail…

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. It maps miles per gallon on the x-axis, horsepower on the y-axis, vehicle origin to color, and weight to point size, with tooltips showing car names. The visualization is built programmatically via `vl.markCircle` and `vl.encode` methods, then rendered as SVG using the Vega and Vega-Lite libraries with a custom config for larger fonts and a dark color scheme. Data is loaded asynchronously using `d3.csv` from a remote gist.

Hhuashe418

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

90% match