Vega-Lite API Template 10

100%

Vega-Lite API Template 10

✓ Published0🌍 Public

Last edited Oct 12, 2021

Created on Oct 12, 2021

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.

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

93% match

Loading thumbnail…

Vega-Lite API Template Cars

This visualization displays automobile performance data from the UCI Auto MPG dataset, plotting acceleration against horsepower while encoding weight through circle size and origin as color. Hovering reveals vehicle names via tooltips. The code uses the Vega-Lite API to construct the scatter plot declaratively, with D3’s `csv` loader fetching the remote dataset, and renders through Vega’s SVG output. Custom axis and label styling come from a shared config object.

Ddrc6587

93% match

Loading thumbnail…

Vega-Lite API Template 9

This example pairs a large scatter plot of Auto MPG data with a smaller navigator chart, both built using the Vega-Lite API and rendered with D3’s SVG support. The main view encodes horsepower and acceleration on x and y axes, colored by vehicle class, while the navigator repeats the same encoding across a grid of attribute pairs from the dataset. The code registers Vega-Lite with vega-tooltip for interactivity, loads data via `d3.csv`, and applies separate appearance configurations for each chart.

OOleJRask

93% match

Loading thumbnail…

Vega-Lite API Template

This example demonstrates a scatter plot of auto MPG data, showing miles per gallon versus horsepower, with points colored by origin and sized by vehicle weight. The visualization is built using the Vega-Lite API, which is registered with Vega and Vega-Lite, and rendered as SVG. Data is loaded via d3.csv from a Gist hosting the UCI Machine Learning Repository’s Auto MPG dataset. Interactive tooltips display car names, with layout and axis styling configured through a custom config object.

CCeciliaW888

93% match

Loading thumbnail…

Vega-Lite API Template

This example uses the Vega-Lite API to create an interactive scatter plot of the UCI Auto MPG dataset, mapping miles per gallon, horsepower, weight, and origin to the x-axis, y-axis, size, and color channels respectively. The visualization is rendered in SVG via Vega and Vega-Lite, with a tooltip showing car names. The code registers the vega-lite-api with a custom tooltip handler, loads data asynchronously using d3.csv, and applies a shared config for axis and label styling. The chart fits the full window and uses a dark color scheme.

Rrobin88824

93% match

Loading thumbnail…

Vega-Lite API Template

This interactive scatter plot visualizes automotive data from the UCI Machine Learning Repository, showing the relationship between fuel efficiency (mpg) and horsepower while encoding car origin by color and weight by circle size. Hovering reveals the vehicle name via tooltips. Built with the Vega-Lite API, the visualization chains declarative specifications programmatically, registering Vega-Lite and Vega with the vega-lite-api library. The code customizes axis styling through a shared config object, loads data via d3.csv, and renders to an SVG using Vega’s renderer with automatic window sizing.

GGang Chen

93% match

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

93% match

Loading thumbnail…

Vega-Lite API Template

This example uses the Vega-Lite API to render an interactive scatter plot of automobile data from the UCI Auto MPG dataset, loaded via d3.csv. A circle mark encodes origin on the x-axis, horsepower on the y-axis, weight as color, and mpg as size, with tooltips showing car names. The visualization leverages vega-lite-api’s fluent interface, registered with vega and vega-lite, and includes vega-tooltip for interactivity. A custom config adjusts axis, label, and title styling for readability, while the chart fits the window using autosize and SVG rendering.

JjohnmurphyLC

93% match