LP-Explain Cardiotocograms

100%

LP-Explain Cardiotocograms

✓ Published3🌍 Public

Last edited Dec 10, 2021

Created on Oct 13, 2021

This example visualizes cardiotocogram data from the UCI Machine Learning Repository, presenting a scatter plot of two data fields colored by class alongside a small multiples navigator grid. The main chart uses vega-lite-api with `vl.markCircle` and encoded quantitative fields for x and y axes. A secondary chart repeats 4x4 mini plots for navigation, both rendered via vega-lite-api’s `repeat` and `config` options. Data loads asynchronously through d3.csv, and vega-tooltip provides interactive hover details.

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…

LP-Explain Cardiotocograms_AirQuality

This example uses the Vega-Lite API with D3.js to visualize the Air Quality UCI dataset, plotting Absolute Humidity against Relative Humidity and coloring points by class. The main chart offers a detailed scatter plot, while a secondary navigator panel displays a 4x4 repeated small-multiple grid of all attribute combinations for orientation. Both views use `vl.markCircle`, `vl.x().fieldQ()`, and `vl.y().fieldQ()` encodings, with `vl.repeat()` in the navigator to iterate over column and row fields. Data loads via `d3.csv`, and rendering uses vega-lite-api with custom configuration objects for appearance.

OOleJRask

84% match

Loading thumbnail…

Outlier scatter matrix 09

This scatter matrix reveals patterns in the Cardiotocography dataset by plotting 12 column attributes against 4 row attributes, with each point colored by its quantitative outlier score. Built with the vega-lite-api and rendered through vega-lite and vega, the visualization repeats a circle mark across rows and columns using vl.repeat(). Panning and zooming is enabled via the panzoom library, only activating with the Alt key. Data loads asynchronously from a CSV using d3.csv, and the appearance is customized through a shared configuration object.

OOleJRask

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

73% match

Loading thumbnail…

Outlier scatter matrix 06

This visualization displays a scatter plot matrix of cardio patient data from the UCI Machine Learning Repository, organized as a grid of 21 columns and 2 rows. Each cell plots one variable against another, with points colored by the nominal `Class` field. The visualization uses the vega-lite-api to construct the chart, with panzoom enabled for zooming via the Alt key. Users can select outliers by Ctrl-clicking points, which highlights them in red through the `selectPoint` parameter. The chart is rendered with d3.v7 and vega-lite 5.2.0.

OOleJRask

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

72% match

Loading thumbnail…

Outlier Visualization 2E

This example displays a scatter plot matrix of 36 pairwise combinations from 12 selected columns of the Cardiology dataset, with each point colored by its outlier status. Built with the Vega-Lite API and rendered using d3.v7, it uses repeated row and column encodings with `vl.markCircle`. A brush parameter allows users to select points via Ctrl-click, while the panzoom library enables zooming and panning on the entire chart.

OOleJRask

72% match

Loading thumbnail…

Vega-Lite API Template

This example demonstrates a scatter plot of automobile data from the UCI Machine Learning Repository, with each car’s origin encoded by color and weight by point size. The visualization is built using the Vega-Lite API, which abstracts the declarative Vega-Lite specification into a programmatic interface, and renders through Vega’s SVG engine. Data is loaded asynchronously via D3’s `csv` function, and a custom tooltip is attached using the Vega-Tooltip `Handler` class. The chart’s axes and labels are styled through a custom Vega-Lite configuration object.

Llok noe

71% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays student performance data from the UCI Machine Learning Repository’s Auto MPG dataset, plotting exam marks against study time as circles colored by number of courses and sized by an integer attribute. Built with the Vega-Lite API and D3 v5, it renders an interactive scatter plot with tooltips showing student names. The code uses `vl.markCircle`, `vl.x().fieldQ`, and `vl.y().fieldQ` to encode variables, while fetching data via `d3.csv`. The chart fills the browser window and employs a custom config for improved label readability.

NNaimisha-M

71% match