Visualize splay trees!

The interactive component was built using Typescript and React, with Shadcn/ui for the beautiful components, Tanstack Router for routing (of which there is only a home page), and framer-motion for the smooth animations.

The site is hosted via Github pages for free, easy access on the web. The splay tree code uses an alternate implementation than the original paper, using a left and right node pointer instead of a child-sibling pointer approach. During every operation, the current tree state is pushed to an animation stack that saves that "frame" of the tree's state, so it can be animated once the operation completes.

To run this application:

pnpm install
pnpm start  

To build this application for production:

pnpm build

This project uses Tailwind CSS for styling.

Add components using the latest version of Shadcn.

pnpx shadcn@latest add button

This project uses TanStack Router. The initial setup is a file based router. Which means that the routes are managed as files in src/routes.

To add a new route to your application just add another a new file in the ./src/routes directory.

TanStack will automatically generate the content of the route file for you.

Now that you have two routes you can use a Link component to navigate between them.

To use SPA (Single Page Application) navigation you will need to import the Link component from @tanstack/react-router.

import { Link } from "@tanstack/react-router";

Then anywhere in your JSX you can use it like so:

<Link to="/about">About</Link>

This will create a link that will navigate to the /about route.

More information on the Link component can be found in the Link documentation.