Visual Mapping - Argument Analysis Tool

Overview

Visual Mapping transforms abstract argument structures into interactive, visual representations. Instead of reading through walls of text, you can see the logical flow of debates as intuitive diagrams that reveal relationships, hierarchies, and patterns at a glance.

All visualizations are generated from the same ArgumentNode[] blueprint, ensuring consistency while offering different perspectives on the same data.

Available Visualization Modes

The tool offers five distinct visualization modes, each optimized for different analysis needs:

Balanced View

Split-panel comparison of arguments FOR and AGAINST side-by-side

Tree View

Hierarchical top-down tree showing parent-child relationships

Pillar View

Vertical columns grouping arguments by type and side

Circular View

Radial layout with thesis at center and arguments radiating outward

Flowchart View

Linear flow diagram showing logical progression of arguments

Tree View (Default)

How It Works

The Tree View builds a hierarchical structure from your ArgumentNode[] array:

Root Identification: Finds thesis nodes (where parentId === null)
Tree Construction: Recursively builds parent-child relationships
Visual Rendering: Displays nodes as connected cards with branch lines

type ArgumentTree = ArgumentNode & {
  children: ArgumentTree[];  // Nested child nodes
}

Visual Structure

Thesis at the Top

The root thesis appears as a prominent card at the top of the visualization

Branching Arguments

Claims and counterclaims branch downward, connected by visual lines

Evidence Leaves

Evidence nodes appear as leaf nodes at the bottom of each branch

Example Structure:

                    [Thesis]
                        |
        +---------------+---------------+
        |                               |
    [Claim 1]                    [Counterclaim 1]
        |                               |
   +----+----+                     +----+----+
   |         |                     |         |
[Evid 1] [Evid 2]            [Evid 3]   [Evid 4]

Benefits

Clear Hierarchy

Instantly see which arguments support or oppose which claims

Evidence Tracing

Follow the path from thesis to evidence in a single visual line

Balanced View

The Balanced View splits the screen into two panels:

Left Panel: All arguments with side: 'for'
Right Panel: All arguments with side: 'against'

Visual Features

Color-coded borders (green for “for”, red for “against”)
Synchronized scrolling for easy comparison
Equal visual weight given to both sides

Perfect for debates where you need to compare opposing viewpoints at the same level of detail.

When to Use

Comparative Analysis

When you need to weigh arguments on both sides of a contentious issue

Bias Detection

Quickly spot if the analysis is skewed toward one side (by visual imbalance)

Debate Preparation

Prepare for discussions by studying both sides simultaneously

Pillar View

Groups arguments into vertical columns based on:

Type (claim, counterclaim, evidence)
Side (for, against)

This creates distinct “pillars” of similar argument types, making patterns visible.

Use Cases

Pattern Recognition: See if one side has more evidence than the other
Argument Type Analysis: Count claims vs. counterclaims quickly
Strength Assessment: Visual comparison of evidence density

Circular View

Radial visualization with:

Center: Thesis node
Inner Ring: Major claims and counterclaims
Outer Ring: Supporting evidence

Ideal for presentations or when you want to emphasize the thesis as the central point with all arguments radiating from it.

Flowchart View

Linear, left-to-right flow showing:

Thesis on the left
Arguments flowing to the right
Arrows showing logical connections

Best For: Understanding the logical progression and causal relationships between arguments.

Interactive Argument Cards

All visualization modes use interactive ArgumentCard components with rich details:

Card Components

Visual Indicators

Type Badge: Color-coded badge showing thesis/claim/counterclaim/evidence
Side Marker: Visual indicator (green/red) for for/against position
Fallacy Alert: Warning icon if logical fallacies are detected

Content Display

Main Content: The argument point in clear, concise language
Logical Role: Explanation of the node’s function in the overall argument
Source Preview: Hostname of the source for quick reference

Interaction

Click to Expand: Opens detailed panel with full evidence and sources
Hover Effects: Visual feedback for interactivity
Responsive Design: Adapts to screen size for mobile and desktop

Detail Panel

Clicking any argument card opens a slide-in detail panel with:

Full Information Display

┌─────────────────────────────────┐
│ [Type Badge]            [Close] │
│ Argument Content                │
├─────────────────────────────────┤
│ Logical Role                    │
│ "Primary legal basis..."        │
├─────────────────────────────────┤
│ Evidence (if parent node)       │
│ ┌─────────────────────────────┐ │
│ │ "Quote from source..."      │ │
│ │ 🔗 source.com              │ │
│ └─────────────────────────────┘ │
├─────────────────────────────────┤
│ Logical Fallacies               │
│ [Ad Hominem] [Slippery Slope]   │
└─────────────────────────────────┘

Argument Context

See the full content and logical role of the selected argument

Supporting Evidence

View all child evidence nodes with direct quotes and source links

Fallacy Warnings

Identify any logical fallacies detected in the argument

Source Links

Click through to verify claims in the original source material

Evidence Display

For claims and counterclaims, the detail panel shows all supporting evidence:

// Evidence nodes are filtered by parentId
const evidence = blueprint.filter(
  node => node.parentId === selectedNode.id && node.type === 'evidence'
);

Each evidence item displays:

Quote Block: The exact sourceText from the original source
Source Link: Clickable URL showing the hostname
Attribution: Clear indication of where the evidence came from

Evidence verification is built into every visualization - just click any claim to see its supporting evidence and sources.

The Analysis Toolbar provides:

View Switcher

Toggle between Tree, Balanced, Pillar, Circular, and Flowchart views

Export Options

Download visualizations as PNG, PDF, or JSON data

Social Toggle

Open/close the Social Pulse panel

Reset Analysis

Return to input screen for a new analysis

Visual Design System

Color Coding

Element	Color	Purpose
Arguments FOR	Green	Quick identification of supporting arguments
Arguments AGAINST	Red	Quick identification of opposing arguments
Thesis	Primary/Blue	Neutral central proposition
Evidence	Muted	Supporting data, less prominent
Fallacy Warning	Destructive/Red	Alert for logical errors

Typography

Headlines: Bold, prominent for main argument content
Body Text: Readable size for source quotes and explanations
Metadata: Smaller, muted for source URLs and technical details

The visual design prioritizes readability and quick comprehension while maintaining academic rigor.

Responsive Design

All visualizations adapt to screen size:

Desktop: Full tree/flowchart layouts with side panels
Tablet: Stacked columns with touch-friendly cards
Mobile: Single-column vertical flow with collapsible sections

Export your visualizations in multiple formats:

PNG Image

High-resolution image export perfect for presentations, reports, or sharing on social media

PDF Document

Professional document format with preserved layout for printing or archival

JSON Data

Raw ArgumentNode[] data for further analysis or integration with other tools

Keyboard Shortcuts

Shortcut	Action
`1-5`	Switch between visualization modes
`Esc`	Close detail panel
`S`	Toggle Social Pulse panel
`E`	Open export modal

Press ? in the application to see all available keyboard shortcuts.

Best Practices

Start with Tree View

Begin with hierarchical view to understand overall structure

Use Balanced for Comparison

Switch to balanced view when you need to weigh both sides

Click for Evidence

Always verify claims by clicking through to see supporting evidence

Export for Reference

Save visualizations before starting a new analysis

What’s Next?

Enhance your analysis with additional features:

Fallacy Detection

Identify and understand logical fallacies in arguments

Social Pulse

See how topics are discussed on social media

Getting Started

Core Features

User Guide

​Overview

​Available Visualization Modes

Balanced View

Tree View

Pillar View

Circular View

Flowchart View

​Tree View (Default)

​How It Works

​Visual Structure

​Benefits

Clear Hierarchy

Evidence Tracing

​Balanced View

​Visual Features

​When to Use

​Pillar View

​Use Cases

​Circular View

​Flowchart View

​Interactive Argument Cards

​Card Components

​Detail Panel

​Full Information Display

​Evidence Display

​Navigation & Controls

View Switcher

Export Options

Social Toggle

Reset Analysis

​Visual Design System

​Color Coding

​Typography

​Responsive Design

​Export & Sharing

​Keyboard Shortcuts

​Best Practices

Start with Tree View

Use Balanced for Comparison

Click for Evidence

Export for Reference

​What’s Next?

Fallacy Detection

Social Pulse

Build docs developers (and LLMs) love

Overview

Available Visualization Modes

Tree View (Default)

How It Works

Visual Structure

Benefits

Balanced View

Visual Features

When to Use

Pillar View

Use Cases

Circular View

Flowchart View

Interactive Argument Cards

Card Components

Detail Panel

Full Information Display

Evidence Display

Navigation & Controls

Visual Design System

Color Coding

Typography

Responsive Design

Export & Sharing

Keyboard Shortcuts

Best Practices

What’s Next?