CryptoKitties Family Graph Visualizer

code cryptokitties nft project

Writing CryptoKitties: What Happened Next made me want to see the connections between my kittens as a graph.

I thought it would be cool to generate an image of the connections between my kittens, but ended up vibe coding and releasing an open-source interactive family tree visualizer for CryptoKitties which can be used to explore breeding relationships, discover mewtation gems, and visualize a kitty lineage.

Here's my kitty family:

Click any cat to see details. Double-click to expand its family tree. Pink edges are matron (mother), blue edges are sire (father).

What the graph shows

Zoom out on any large dataset and patterns emerge.

Dragon sold for Ξ600 in September 2018. Load its ancestry alongside my cats and there's exactly one shared ancestor: kitty #1461. Born November 23, 2017, five days before launch. Part of the seed population. Nobody special at the time. Nine generations down one branch, Dragon. Through another, Mulberry, my mauve munchkin.

This isn't coincidence. It's math.

CryptoKitties has ~2 million cats. The Gen 0 population is 50,000. Every cat traces back to that pool. With a breeding population that small and a generation cycle that fast, common ancestors are inevitable. It's the same reason every human of European descent shares a common ancestor from roughly 600 years ago. Finite populations converge.

The shortest path tool makes this tangible. Select any cat, hover over another, and the graph highlights the breeding chain between them. Mistletoe to SantaClaws. Dragon to its roots. My cats to famous strangers.

Graph Visualizer Features

  • Interactive Graph: Physics-based layout with drag, zoom, and pan
  • Mewtation Gems: Diamond, Gold, Silver, and Bronze gem badges for trait discoverers
  • Filters: Filter by generation range and/or mewtation gems
  • Shortest Path: Highlight the path between any two kitties (select one, hover another)
  • Owner Highlighting: Hover over owner names to highlight all their kitties (pin with highlight button)
  • Context Menu: Right-click nodes for quick actions (expand, highlight owner, open pages, etc.)
  • Smart Expansion: Double-click to expand family with pre-fetched accurate parent data
  • Auto-connect Discovery: Automatically adds relatives that bridge to existing nodes when expanding
  • Smart Merging: Loading connected kitties merges into existing graph
  • Live API: Fetch kitty data directly from CryptoKitties API
  • Embed Mode: Embeddable graph with responsive floating panel and "Open in viewer" link (as seen above)

Other notable kitty graphs to explore: