Cause-Effect Graph Demo

This is a prototype of an interactive cause-effect graph visualization. Click on any node to expand its details panel. Hover over nodes for quick descriptions.

Example: AI Safety Risk Factors

GraphInteractiveOutlineData (YAML)List View

Fullscreen

Computing layout...

React Flow

Press enter or space to select a node. You can then use the arrow keys to move the node around. Press delete to remove it and escape to cancel.

Press enter or space to select an edge. You can then press delete to remove it or escape to cancel.

Legend

Node Types

Causes

Intermediate

Effects

Arrow Strength

Strong

Medium

Weak

Features

• Auto-layout: Nodes are automatically positioned using the ELK algorithm for clean hierarchical display
• Click to expand: Click any node to open a detailed side panel with full information
• Hover tooltips: Mouse over any node to see a quick description
• Color-coded nodes: Red for causes, green for effects, purple for intermediate factors
• Visual arrow encoding: Arrows convey information through thickness, style, and color (see below)
• Interactive: Drag nodes to rearrange, zoom and pan the view

Arrow System

Arrows encode three dimensions of information visually:

Property	Visual	Meaning
Thickness	Thick / Medium / Thin	Influence strength (strong / medium / weak)
Style	Solid / Dashed / Dotted	Confidence level (high / medium / low)
Color	Red / Green	Effect direction (increases risk / decreases risk)

Node Types

Color	Type	Description
Red	Cause	Root causes or initial factors
Purple	Intermediate	Factors that are both effects of some causes and causes of other effects
Green	Effect	End outcomes or consequences

Details Panel

Click on any node to see:

• Confidence bar: Visual representation of the confidence level
• Description: Brief summary of the concept
• Details: Extended explanation with context
• Related Concepts: Tags showing connected ideas
• Sources: References and citations