Chinese Zodiac Compatibility Calculator

Functional Overview

This creative example demonstrates a zodiac compatibility calculator using relation-graph. Each zodiac sign is a node with compatibility scores shown as connections between signs. Users can select their zodiac sign and see visual representations of compatible, neutral, and incompatible matches.

Implementation of Key Features

Zodiac Sign Nodes

const zodiacSigns = [
    { name: 'Rat', element: 'Water', icon: '🐭' },
    { name: 'Ox', element: 'Earth', icon: '🐮' },
    { name: 'Tiger', element: 'Wood', icon: '🐯' },
    { name: 'Rabbit', element: 'Wood', icon: '🐰' },
    { name: 'Dragon', element: 'Earth', icon: '🐲' },
    { name: 'Snake', element: 'Fire', icon: '🐍' },
    { name: 'Horse', element: 'Fire', icon: '🐴' },
    { name: 'Goat', element: 'Earth', icon: '🐐' },
    { name: 'Monkey', element: 'Metal', icon: '🐵' },
    { name: 'Rooster', element: 'Metal', icon: '🐔' },
    { name: 'Dog', element: 'Earth', icon: '🐶' },
    { name: 'Pig', element: 'Water', icon: '🐷' }
];

const createZodiacNode = (sign: ZodiacSign) => ({
    id: sign.name,
    text: `${sign.icon} ${sign.name}`,
    data: { element: sign.element }
});

Compatibility Connections

const getCompatibility = (sign1: string, sign2: string): CompatibilityScore => {
    // Trine (120°): Most compatible
    if (isTrine(sign1, sign2)) return { score: 100, label: 'Perfect Match' };

    // Sextile (60°): Compatible
    if (isSextile(sign1, sign2)) return { score: 75, label: 'Good Match' };

    // Square (90°): Challenging
    if (isSquare(sign1, sign2)) return { score: 25, label: 'Challenging' };

    // Opposition (180°): Least compatible
    if (isOpposition(sign1, sign2)) return { score: 10, label: 'Difficult' };

    return { score: 50, label: 'Neutral' };
};

Visual Representation

const createCompatibilityLine = (sign1: string, sign2: string) => {
    const compatibility = getCompatibility(sign1, sign2);

    return {
        from: sign1,
        to: sign2,
        text: `${compatibility.score}%`,
        color: getScoreColor(compatibility.score),
        lineWidth: compatibility.score / 25,
        opacity: compatibility.score / 100
    };
};

Circular Layout

const layoutOptions = {
    layoutName: 'circle',
    radius: 300
};

Creative Use Cases

Entertainment: Fun zodiac compatibility checker.

Cultural Education: Teach Chinese zodiac system.

Dating Apps: Match-making based on zodiac signs.

Social Games: Party games and icebreakers.

Cultural Studies: Explore Chinese astrology traditions.

Zodiac compatibility

Zodiac Compatibility - Chinese zodiac sign relationship calculator