This example turns a force-layout graph into a two-sided zodiac matcher with mirrored card clusters and a hidden summary node. After one sign is selected on each side, the graph reveals a large in-canvas result card and rewires two connectors to the chosen pair.

Two-Sided Zodiac Compatibility Matcher with a Dynamic Result Card

What This Example Builds

This example builds a full-screen zodiac compatibility matcher inside one relation-graph canvas. Users see two mirrored clusters of zodiac cards, pick one sign from the left group and one from the right group, and then get a large central result card that summarizes the pair with pros and cons.

The most important point is that the graph is not only a viewer. It also acts as the selection surface an