JavaScript is required

Kong Fu Map

Wuxia Character Map - Martial arts novel relationship visualization

Martial Arts Character Relationship Map

Functional Overview

This creative example demonstrates a relationship map from a martial arts novel (wuxia), showing characters, their martial arts schools, master-disciple relationships, and alliances. Nodes represent characters with their faction colors, and connections show relationships like family ties, mentorship, and rivalries.

Implementation of Key Features

Character Node Creation

const createCharacterNode = (character: WuxiaCharacter) => ({
    id: character.name,
    text: character.name,
    color: getFactionColor(character.faction),
    data: {
        faction: character.faction,
        martialArts: character.martialArts,
        generation: character.generation
    }
});

Relationship Lines

const relationshipTypes = {
    master: { color: '#FFD700', lineStyle: 'solid', width: 3 },
    disciple: { color: '#FFD700', lineStyle: 'dashed', width: 2 },
    family: { color: '#FF69B4', lineStyle: 'solid', width: 2 },
    rival: { color: '#FF0000', lineStyle: 'dotted', width: 1 },
    ally: { color: '#00FF00', lineStyle: 'solid', width: 1 }
};

const createRelationshipLine = (rel: Relationship) => {
    const type = relationshipTypes[rel.type];
    return {
        from: rel.from,
        to: rel.to,
        text: rel.type,
        color: type.color,
        lineStyle: type.lineStyle,
        lineWidth: type.width
    };
};

Faction-Based Layout

const organizeByFaction = () => {
    const factions = ['Shaolin', 'Wudang', 'Emei', 'Beggar Sect', 'Kunlun'];

    factions.forEach((faction, i) => {
        const factionMembers = graphInstance.getNodes().filter(
            n => n.data.faction === faction
        );
        // Position faction members in clusters
        positionFactionCluster(factionMembers, i);
    });
};

Creative Use Cases

Literature Analysis: Visualize character relationships in novels.

Game Design: Character relationship maps for RPGs.

Storytelling: Interactive narrative exploration.

Fictional Universes: Track connections in fictional worlds.

Educational Tools: Teach complex storylines interactively.