Skip to main content
100%

Tool modalities

✓ Published0🌍 Public
Aalex-r-bigelow
Last edited Aug 15, 2017
Created on Aug 11, 2017

A small-multiple matrix of scatterplots compares six visualization tool modalities (drawing tools, direct manipulation, GUI-based tools, grammars, libraries, and programming languages) across six qualitative dimensions such as usability threshold and expressiveness ceiling, plus a PCA projection of the original attribute space. Each plot encodes modality categories as colored dots, with jitter applied to overlapping points; labels appear only in the first plot. A background transition animates the frame after a delay, drawing attention to the PCA scatterplot in the corner.

AI-generated description
mit Licensed

Similar vizzes

Loading thumbnail…

Many plots. Part 2

This gallery example presents a small-multiple scatter plot matrix exploring eye-tracking data from a WPI MAPLE Lab study of 86 students solving math problems. Each scatter plot shows a different participant’s data, plotting problem order on the x-axis against a selected metric (average fixation duration, no-fixation percentage, or response time) on the y-axis, with points colored by correctness. A dropdown menu switches the y-axis variable, while a legend filters points by hover. The visualization displays the raw data with linear trend lines, built using d3.v7’s scaleLinear and scaleOrdinal APIs, and fetches the dataset from a gist.

AAlena Egorova
68% match
Loading thumbnail…

Visualization

A zoomable scatterplot displays a Principal Component Analysis of citation data from 2,000 philosophy articles, with points colored by K-Means clusters. The visualization uses D3 v3’s linear scales, axes, and zoom behavior to explore the bidimensional projection. Points are rendered as SVG circles with tooltips via d3-tip, and a button switches the x-axis variable, triggering a transition on the dot transforms. Data is loaded from a CSV file, and the plot includes a categorical color legend.

MMNoichl
68% match
Loading thumbnail…

Scatterplot Matrix Brushing

This example presents a scatterplot matrix for multidimensional data, where each cell displays a pairwise correlation between traits. Users can see the relationships across all variable combinations at once, with data points colored by category. The visualization is built with D3 v4, using SVG rendering and d3.scaleLinear for axes. It loads JSON data and renders circles for each observation, with axes styled via d3.axisBottom and d3.axisLeft. The matrix layout is generated programmatically, showing all trait pairings in a grid.

LLauraCortes
68% match
Loading thumbnail…

Scatterplot Matrix

This scatterplot matrix visualizes pairwise correlations across six quantitative variables (k_median and five rank-conditional metrics) for 30 observations, colored by tiername (Highly selective vs. Nonselective). Each cell in the matrix is a scatterplot of two traits, with axes scaled independently to their domains. Diagonal cells display trait names as bold capitalized labels. The visualization, built with D3 v3 and SVG, includes axes with tick marks, light gray gridlines, and semitransparent circles colored by category. The data comes from a CSV of college rankings and selectivity categories. This example forks Mike Bostock's scatterplot matrix block, itself based on Anderson's iris flower data, and adapts it for the given dataset.

Aanaeliaovalle
67% match
Loading thumbnail…

Icons on the side of a scatter plot

A scatter plot with eight colored dots moves from a vertical line to a two-axis layout, drawing curved paths behind each point. Each dot leaves a circular icon on the axis edge, showing how points transition between dimensional configurations. Built with d3.v4, the animation uses SVG transition methods on circles and paths to interpolate positions, axes, and curved arcs. The random data is generated inline, with a palette of ten colors and a fixed plot field.

PPatrick Wojda
67% match
Loading thumbnail…

Fundamental Visualizations

This example showcases six fundamental visualization techniques—bar charts, line charts, pie charts, scatter plots, and choropleths—implemented as reusable Chiasm plugins with D3.js. Each chart is an independent component with no shared dependencies, demonstrating how common visualization methods can be modularized and combined in a single dashboard layout. The bar charts support both vertical and horizontal orientations with configurable margins and spacing, the line chart uses historical trade data, the pie and donut charts show categorical proportions, the scatter plot uses Fisher's Iris data, and the choropleth displays US demographic data. The design emphasizes encapsulation and simplicity, with duplicated styling code across components to illustrate a standalone-component architecture. This serves as a foundation for building more advanced visualizations with axes, labels, and interactions.

CCurran Kelleher
67% match
Loading thumbnail…

Icons on the side of a scatter plot

Eight colored dot icons sit in a vertical strip on the left edge of a scatter plot, each linked by a connector line to a corresponding circle arranged in a vertical line at the center of the chart. A button labeled “MOVE” triggers a `d3.transition` that animates the circles from the centered, one-dimensional arrangement into a two-dimensional scatter plot with random x and y coordinates, while the icons remain fixed as a legend. The visualization uses D3 v4 with SVG elements, including markers for arrowheads, and demonstrates how a categorical axis can be represented by icons placed perpendicular to the plot’s main axes.

PPatrick Wojda
67% match
Loading thumbnail…

Visualization

This interactive scatterplot visualizes a Principal Component Analysis of citation data from 2,000 philosophy articles from the 1990s, with points colored by K-Means clusters. Users can zoom and pan the plot using d3.behavior.zoom and hover over points to see tooltips generated by d3.tip. The visualization is built with D3 v3, rendering SVG circles, and includes a button that switches the x-axis to display carbohydrate values, triggering a transition that updates the axis and dot positions.

MMNoichl
67% match