Skip to main content
SimilarExport ZIP
100%

Vega-Lite API Template III

✓ Published1🌍 Public
OOleJRask
Last edited Oct 4, 2021
Created on Oct 4, 2021

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.

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
94% match
Loading thumbnail…

Vega-Lite API Template 5

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.

OOleJRask
89% 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
87% 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
86% 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
85% 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
85% 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
84% 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
84% match