Matrix

100%

✓ Published0🌍 Public

Last edited May 7, 2022

Created on May 7, 2022

A matrix of small multiples displays ski racing performance data, with each row representing a skier (by bib number) and each column a split point along the course. Individual circles plot performance values, jittered on the x-axis to reduce overplotting, with axes scaled via `d3.scalePoint` and `d3.scaleLinear`. Built with D3 v7, the SVG visualization uses `d3.groups` to organize data by bib and renders interactive circles that highlight on mouseover, styled with CSS. Data originates from a CSV file of timing differences.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Performance analysis

Four small multiples display scatterplots of alpine ski split times across training days and course types. Each panel corresponds to a different intermediate timing point, with points jittered along the course axis. A dropdown menu filters all panels by ski academy. The visualization uses D3 v7 with SVG rendering, custom `scatter()` and `menu()` reusable chart functions, and `d3.rollups` to aggregate means. Data comes from a CSV file loaded via `d3.csv`.

CChristian Magelssen

80% match

Loading thumbnail…

DASHBOARD

This dashboard visualizes the performance of individual skiers across multiple runs, comparing their race time ratios against a reference time. A dropdown menu lets users select a start number (BIB) to view that skier’s data. The chart uses D3 v6 to render an SVG bar chart, with red bars for positive ratios and teal bars for negative ones, and D3 scales and axes for layout. Data is loaded from a CSV file and filtered dynamically upon selection.

CChristian Magelssen

76% match

Loading thumbnail…

d3 yoga

The visualization displays a small dataset of six numeric values using three overlaid chart types: circles sized by radius, vertical bars, and a line path. It shows how the same values can be represented through different encodings. The code uses d3.v4 with SVG for the circles and line, and HTML div elements positioned absolutely for the bars. Linear scales map the data domain to pixel ranges for radius, bar height, and line y-coordinates. The data is hardcoded as an array in the script, with no external source. The SVG and divs are both rendered on the same page, creating a combined view.

FFlameFuel

70% match

Loading thumbnail…

Baseball Scatterplot Matrix II

This example shows a scatterplot matrix of 1986 baseball statistics, plotting pairs of traits like hits, home runs, and RBIs to reveal correlations. A slider controls the fill opacity of the SVG circles, allowing users to adjust point visibility. Built with D3 v4, it uses `d3.scaleLinear` for axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and `d3.scaleCategory20` for color encoding by position. Data comes from the R package Visualizing Categorical Data.

深深度碎片

70% match

Loading thumbnail…

Untitled

A parallel coordinates plot displays two data records across five categorical axes—Style, Intelligence, Focus, Magic, and Gender—with values scaled linearly from 1 to 10. Solid and dashed polylines represent each row, distinguishing the two series. Built with D3 v4, it uses `d3.scaleLinear` for y-axes, `d3.scalePoint` for x-axis positioning, and `d3.axisLeft` for rendering. SVG paths are generated via `d3.line`, with a custom legend annotating “Achieved Performance” and “Requirement.” Data loads from a CSV file containing two numeric rows.

JJoker-tr

70% match

Loading thumbnail…

A matrix of grouped bar charts

This matrix of grouped bar charts visualizes network throughput data, organized by two variables (part size and HTTP threads), with each cell showing upload and download speeds for multiple tests. The matrix layout allows quick comparison across these parameters, while aggregate charts summarizing rows and columns appear along the edges. The visualization is built using D3 v4, rendering SVG graphics, and uses scales for positioning, axes for reference, and a tooltip library for interactivity.

BBBischof

69% match

Loading thumbnail…

Matrix

The matrix visualization combines a force-directed graph with an adjacency matrix to explore relationships in a car dataset. Users can click nodes in the force-directed layout or cells in the matrix to highlight corresponding rows and columns, revealing connections. Built with D3 v6, it uses `d3.forceSimulation`, `d3.forceLink`, and `d3.drag` for the interactive network, while the matrix uses `reorder.js` functions like `mat2graph` and `barycenter_order`. Data originates from the UCI Auto MPG dataset.

CCola731

69% match

Loading thumbnail…

Outlier scatter matrix 03

This example displays an outlier scatter matrix of cardio data, highlighting relationships among numeric attributes with a dense grid of small multiples. A draggable viewport lets users pan across the rendered scatterplot, shifting an oversized SVG map containing a red circle to explore off-screen portions. The visualization is built with the Vega-Lite API and D3, using d3.csv to load the dataset. The viewport interaction is implemented by manually tracking mouse events with onmousedown, onmousemove, and onmouseup, adjusting the map’s absolute position within a clipped container.

OOleJRask

69% match