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.