B-tree index

No. 11 · SVG · Rotary card file

Move to picktap to find

A rotary card file. Ten trays on a wheel are the index's pages, and the wheel brings one to the reading stop at a time, so a lookup costs one read per level.

Prompt

/anatomy explain how a B-tree index finds a row, interactive

Install

npm install anatomy-figures

In your code

page.tsx

import { BTree } from "anatomy-figures";

<BTree theme="light" />

Or load this figure on its own, so the others never download:

page.tsx

import BTree from "anatomy-figures/b-tree";

Theme it

Five themes (dark, light, paper, blueprint, sepia), or your own colours through tokens. Every token.

page.tsx

<BTree
  theme="light"
  tokens={{
    "--anatomy-card": "#ffffff",
    "--anatomy-lit": "#e5484d",
  }}
/>

Without React

index.html

import { define } from "anatomy-figures/element/b-tree";

define();

<anatomy-b-tree theme="light"></anatomy-b-tree>