Vega-Lite API Template 5

100%

Vega-Lite API Template 5

✓ Published1🌍 Public

Last edited Oct 5, 2021

Created on Oct 5, 2021

This example presents two scatter plots of the Auto MPG dataset, visualizing relationships between different cellular attributes. The main chart maps Mitosis against Bland Chromatin, while a smaller navigation chart shows Bare Nuclei versus Uniformity of Cell Shape, both colored by class. The visualization uses the vega-lite-api to construct the plots, d3 to load the CSV data, and vega-tooltip for interactive tooltips. The plots are rendered using Vega's SVG renderer with a custom configuration for improved 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…

Vega-Lite API Template II

This interactive scatter plot visualizes the Auto MPG dataset, showing the relationship between Mitoses and Bland Chromatin, with points colored by Class and tooltips displaying the class label. Built with the Vega-Lite API, it registers Vega and Vega-Lite through `vl.register()`, loads CSV data via d3’s `csv` function, and applies custom axis and label styling from a config object. The visualization dynamically sizes to the window and uses SVG rendering with a Vega Tooltip handler for interactivity.

OOleJRask

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

89% match

Loading thumbnail…

Vega-Lite API Template III

This example visualizes the relationship between Mitoses and Bland_Chromatin measurements from the UCI Auto MPG dataset, with points colored by Class and tooltips revealing the class label. Built using the Vega-Lite API with D3.js for data loading, it renders an interactive scatter plot as SVG. The visualization uses `vl.markCircle`, `vl.x().fieldO()`, `vl.y().fieldO()`, and `vl.tooltip()` to encode the data, with a custom config adjusting axis and label styles for readability.

OOleJRask

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

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

88% match

Loading thumbnail…

Vega-Lite API Template 4

This example uses the Vega-Lite API to render two scatter plots of the Wisconsin Breast Cancer dataset, with the main chart showing the relationship between Mitoses and Bland_Chromatin while a smaller overview chart displays Bare_Nuclei against Uniformity_of_Cell_Shape. The visualization uses `markCircle` with low opacity and size 300 to reveal density distributions, with points colored by class and tooltips showing the class label. The main chart resizes to fit the window while the navigator view occupies one-third of the width and one-fifth of the height, both using `vega-lite-api` with a dark styled config that removes axis domains and applies small gray guide labels.

OOleJRask

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

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

87% match