medicine-wheel-graph-viz

Medicine Wheel graph visualization — circular layout with four-direction node positioning, ceremony-aware edges, and OCAP® indicators.

Features

• Circular medicine wheel layout — nodes positioned by direction (East/South/West/North)
• Direction quadrant backgrounds with Ojibwe names
• Ceremony-aware edges — gold dashed lines for honored relations
• OCAP® indicators — red/green dots showing compliance status
• Wilson alignment halos — color-coded rings showing relational accountability
• Hover highlighting — dims unconnected nodes, highlights neighbors
• Pure SVG React — no D3 runtime dependency, SSR-compatible
• Dark mode by default

Installation

npm install medicine-wheel-graph-viz medicine-wheel-ontology-core

Usage

import { MedicineWheelGraph, buildGraphData } from 'medicine-wheel-graph-viz';

// From ontology-core data
const graphData = buildGraphData(relationalNodes, relationalEdges);

<MedicineWheelGraph
  data={graphData}
  width={600}
  height={600}
  showDirectionLabels
  showQuadrants
  showNodeLabels
  darkMode
  onNodeClick={(node) => console.log('Clicked:', node.label)}
/>

Manual data

const data = {
  nodes: [
    { id: 'n1', label: 'Ceremony', type: 'spirit', direction: 'east' },
    { id: 'n2', label: 'Elder', type: 'human', direction: 'north' },
  ],
  links: [
    { source: 'n1', target: 'n2', label: 'guides', ceremonyHonored: true },
  ],
};

<MedicineWheelGraph data={data} />

API

<MedicineWheelGraph> Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | data | MWGraphData | required | Nodes and links | | width | number | 600 | SVG width | | height | number | 600 | SVG height | | layout | Partial<WheelLayoutConfig> | auto | Layout configuration | | showDirectionLabels | boolean | true | Show direction labels | | showQuadrants | boolean | true | Show quadrant backgrounds | | showNodeLabels | boolean | true | Show node labels | | showLinkLabels | boolean | false | Show link labels | | showOcapIndicators | boolean | false | Show OCAP® compliance dots | | showWilsonHalos | boolean | false | Show Wilson alignment halos | | darkMode | boolean | true | Dark background | | onNodeClick | (node) => void | - | Node click handler | | onNodeHover | (node\|null) => void | - | Node hover handler | | onLinkClick | (link) => void | - | Link click handler |

Layout Engine (headless)

import { applyWheelLayout, getQuadrantGeometries } from 'medicine-wheel-graph-viz';

const positioned = applyWheelLayout(data, { radius: 300, centerX: 400, centerY: 400 });

Data Converters

import { buildGraphData, nodesToGraphNodes, edgesToGraphLinks } from 'medicine-wheel-graph-viz';

License

MIT — IAIP Collaborative, Shawinigan, QC