Fork of Vega-Lite API Template 8

100%

Fork of Vega-Lite API Template 8

✓ Published0🌍 Public

Last edited Nov 3, 2021

Created on Nov 3, 2021

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.

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

91% match

Loading thumbnail…

Vega-Lite API Template 8

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.

OOleJRask

91% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization uses the Vega-Lite API to render a scatter plot of automotive data from the UCI Auto MPG dataset, loaded via d3.csv. The active chart displays vehicle origin on the x-axis and horsepower on the y-axis, with large translucent circular marks and tooltips showing car names. The code registers Vega-Lite with vega, vega-lite-api, and vega-tooltip, and applies custom axis and label styling from a config object. The visualization is responsive, fitting the full browser window.

MMyGitUserName-dh

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

90% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to render a scatter plot of Auto MPG data from the UCI Machine Learning Repository, sourced via a Gist CSV. The visualization encodes miles per gallon on the x-axis, horsepower on the y-axis, colors points by origin, scales size by weight, and adds tooltips for vehicle names. It registers Vega, Vega-Lite, and the vega-lite-api library, then loads the data with d3.csv, applies a custom dark-themed config for axis styling, and fits the chart to the window dimensions.

SShaneBowen1

90% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization shows a scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository, encoding engine horsepower on the y-axis, miles per gallon on the x-axis, and using color to distinguish the vehicle origin with point size mapped to weight. The code builds the chart using the Vega-Lite API, registering Vega and Vega-Lite libraries alongside a tooltip handler. Data is loaded asynchronously via d3.csv, and the chart is rendered as an SVG that automatically fits the browser window, with custom axis and label styling defined in a separate config file.

SSkye Chen

90% match

Loading thumbnail…

Fork of Vega-Lite API Template

This fork of a Vega-Lite API template displays a scatter plot of Auto MPG data from the UCI Machine Learning Repository, showing each car's miles per gallon versus horsepower. Points are colored by origin, sized by weight, and include tooltips revealing the vehicle name. The visualization uses the `vega-lite-api` and `vega-lite` libraries to define the encoding, while `d3.csv` loads the data and Vega-Tooltip provides interactive hover details. Rendering occurs as an SVG view that fills the browser window.

CChavaP06

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

90% match