Vietoris-Rips complex

Random points on a plane. Two points closer than the radius join into an edge, and three points that are pairwise joined fill a triangle.

Experimental May change in any minor version before 1.0.

In this chapter 14 pages

The complex is the emblem of these docs: the home page opens with it, and the homepage pattern hangs it as the header figure. It is built from the same parts as a polytope: points, segments, and triangles.

Default

Radius

0.16

82 edges51 triangles

36 points, radius 0.16. Drag the radius. Point at a vertex to see how far it reaches.

astro

<Complex />

Growing on first view

Radius

0.14

95 edges60 triangles

autoplay="visible". The first time it scrolls into view, the radius runs from 0 to its value, so edges arrive before triangles. Take the slider to stop it.

astro

<Complex seed={23} points={40} radius={0.14} autoplay="visible" />

Options

Attribute	Effect	Default
`points`	Number of points, 4 to 120, on a jittered grid so they spread across the panel	`36`
`radius`	Joining distance as a share of the width, 0 to 0.5	`0.16`
`seed`	Seed for the point positions; the server and the script draw the same points	`7`
`autoplay`	visible grows the complex from bare points on first view, in under three seconds, and stops when the reader takes the slider; none draws it finished	`none`
`label`	Accessible description. The counts of points, edges, and triangles are added to it.	`A random complex`
`controls`	Astro only. Shows the radius slider and the edge and triangle counts.	`true`

The element fires ply-complex-change with vertices, edges, triangles, and radius whenever it redraws. Any range input with data-ply-complex-radius, inside the element or pointing at it with for, drives the radius.

Without JavaScript

The server draws the same complex from the seed, so the figure is complete before any script runs, in RSS readers, and with scripts off. Under reduced motion it is drawn finished and does not grow.

html

<ply-complex class="ply-complex" id="cx" points="36" radius="0.16" seed="7" role="img"
  aria-label="A random complex: 36 points, 82 edges, 51 filled triangles.">
  <svg class="ply-complex__static" viewBox="0 0 100 56" aria-hidden="true">
    <!-- polygon.ply-complex__tri, line.ply-complex__edge, circle.ply-complex__pt -->
  </svg>
</ply-complex>
<input class="ply-slider" type="range" min="0" max="0.32" step="0.01" value="0.16"
  aria-label="Radius" data-ply-complex-radius for="cx">
<script type="module" src="https://dario-loi.github.io/polytope/kit/js/complex.js"></script>