Skip to main content

​
Overview

Argument Cartographer offers 6 distinct visualization modes, each optimized for different analytical needs. Mastering these views enables you to explore arguments from multiple perspectives and find insights that might be hidden in a single representation.
Quick Tip: You can switch between modes instantly using the view selector in the toolbar. Your data doesn’t change - only how it’s visualized.

​
Mode Selector

The toolbar at the top of every analysis contains the view mode selector: 
const viewModes = [
  { id: 'balanced', label: 'Balanced', icon: Columns },
  { id: 'tree', label: 'Tree', icon: LayoutGrid },
  { id: 'pillar', label: 'Pillar', icon: Rows3 },
  { id: 'circular', label: 'Circular', icon: CircleDot },
  { id: 'flowchart', label: 'Flow Map', icon: Share2 },
  { id: 'compass', label: 'Compass', icon: Gauge },
];

​
Mode 1: Flow Map

Classical argument diagram with vertical logical progression.

​
Layout Structure

1

Thesis (Top)

Central contention displayed in dark slate box at top center
2

Distribution Line

Horizontal line splitting into two lanes
3

Left Lane: Supporting Reasons

Green-coded claims arguing FOR the thesis, stacked vertically
4

Right Lane: Objections

Red-coded counterclaims arguing AGAINST, stacked vertically
5

Evidence Nodes

Smaller nodes attached below each claim/counterclaim
6

Conclusion (Bottom)

Summary of analysis displayed in gray box

​
When to Use Flow Map

  • Understanding progression: How arguments build from thesis to conclusion
  • Presentations: Clean, professional look for slides
  • Academic analysis: Mimics Toulmin argument diagrams
  • First-time viewers: Most intuitive for new users

​
Visual Example

┌────────────────────────────────┐
│   THESIS: Central Claim Here   │
└────────────────┬───────────────┘
                 │
        ┌────────┴────────┐
        │                 │
  ┌─────▼─────┐     ┌─────▼─────┐
  │ Supporting │     │ Objections │
  │  Reasons   │     │  &Rebuttals│
  └─────┬──────┘     └─────┬─────┘
        │                  │
    [Evidence]        [Evidence]
        │                  │
        └─────────┬────────┘
              ┌───▼────┐
              │Conclusion│
              └────────┘

​
Mode 2: Balanced View

Side-by-side comparison with split layout.

​
Layout Structure

  • Left Column: All “FOR” arguments (green theme)
  • Right Column: All “AGAINST” arguments (red theme)
  • Top Banner: Thesis spans both columns
  • Vertical Alignment: Claims attempt to align by topic where possible

​
When to Use Balanced View

  • Weighing pros and cons: Direct visual comparison
  • Decision-making: See both sides simultaneously
  • Debate preparation: Understand opposition arguments
  • Quick scanning: Assess argument balance at a glance

​
Implementation Detail

const forArguments = blueprint.filter(node => 
  (node.type === 'claim' || node.type === 'evidence') && 
  node.side === 'for'
);

const againstArguments = blueprint.filter(node => 
  (node.type === 'claim' || node.type === 'evidence') && 
  node.side === 'against'
);

return (
  <div className="grid grid-cols-2 gap-8">
    <div className="for-column">
      {forArguments.map(node => <ArgumentCard node={node} />)}
    </div>
    <div className="against-column">
      {againstArguments.map(node => <ArgumentCard node={node} />)}
    </div>
  </div>
);

​
Mode 3: Tree View

Hierarchical tree structure showing parent-child relationships.

​
Layout Structure

  • Root Node: Thesis at top
  • Branches: Claims extend rightward/downward
  • Leaves: Evidence nodes at terminals
  • Indentation: Depth indicated by left padding

​
When to Use Tree View

  • Tracing lineage: Follow specific argument chains
  • Complex arguments: Deep nesting of sub-claims
  • Academic research: Traditional outline-style thinking
  • Finding gaps: Spot claims without evidence

​
Mode 4: Compass View

Circular layout with thesis at center, claims radiating outward.

​
Layout Structure

  • Center Circle: Thesis (large)
  • Inner Ring: Claims positioned by angle
    • 0-180°: “For” arguments (top half, green)
    • 180-360°: “Against” arguments (bottom half, red)
  • Outer Ring: Evidence nodes (smaller, connected by lines)

​
When to Use Compass View

  • Big picture: See entire debate at once
  • Spatial thinkers: Visual/spatial learning style
  • Brainstorming: Identify missing argument angles
  • Pattern recognition: Spot clustering of argument types

​
Mathematical Layout

const angleStep = (2 * Math.PI) / totalClaims;
const radius = 300; // pixels from center

claims.forEach((claim, index) => {
  const angle = (index * angleStep) + (claim.side === 'against' ? Math.PI : 0);
  
  const x = centerX + radius * Math.cos(angle);
  const y = centerY + radius * Math.sin(angle);
  
  return { x, y, angle };
});

​
Mode 5: Circular View

3D flip cards arranged in circular pattern for interactive exploration.

​
Layout Structure

  • Circular Arrangement: Cards positioned in circle
  • 3D Perspective: CSS transform-style: preserve-3d
  • Front Face: Claim summary + icon + score
  • Back Face: Full details + evidence + fallacies
  • Click to Flip: Interactive card rotation

​
When to Use Circular View

  • Presentations: Wow factor for audiences
  • Interactive exploration: Engaging, game-like experience
  • Summarizing: Quick overview with drill-down
  • Teaching: Makes arguments memorable

​
Implementation

<motion.div
  className="card-container perspective-1000"
  onClick={() => setIsFlipped(!isFlipped)}
>
  <motion.div
    className="card"
    animate={{ rotateY: isFlipped ? 180 : 0 }}
    transition={{ duration: 0.6, ease: 'easeInOut' }}
    style={{ transformStyle: 'preserve-3d' }}
  >
    {/* Front */}
    <div className="card-face front backface-hidden">
      <h3>{claim.content.substring(0, 50)}...</h3>
      <Badge>Click to flip</Badge>
    </div>
    
    {/* Back */}
    <div className="card-face back backface-hidden rotateY-180">
      <p>{claim.content}</p>
      <p className="text-xs">{claim.sourceText}</p>
      {claim.fallacies.map(f => <FallacyBadge />)}
    </div>
  </motion.div>
</motion.div>

​
Mode 6: Pillar View

Vertical columns maximizing information density.

​
Layout Structure

  • Two Columns: Side-by-side
  • Left Pillar: Supporting arguments (green header)
  • Right Pillar: Opposing arguments (red header)
  • Compact Cards: Minimal spacing, small fonts
  • Stacked Vertically: Claims flow top to bottom

​
When to Use Pillar View

  • Printing: Fits more content per page
  • Dense information: When you need to see everything
  • Academic papers: Formal, space-efficient
  • Quick reference: Maximum info, minimum chrome

​
Switching Between Modes

​
Toolbar Navigation

<div className="view-mode-selector">
  {viewModes.map(mode => (
    <Button
      key={mode.id}
      variant={currentView === mode.id ? 'default' : 'ghost'}
      onClick={() => setViewMode(mode.id)}
      className="flex items-center gap-2"
    >
      <mode.icon className="h-4 w-4" />
      <span className="hidden md:inline">{mode.label}</span>
    </Button>
  ))}
</div>

​
Keyboard Shortcuts (Future)

Planned keyboard navigation:
  • 1-6 keys: Quick jump to mode
  • Tab: Cycle through modes
  • Ctrl+E: Export current view

​
Choosing the Right Mode

1

Start with Flow Map

Default view provides good overview for most topics
2

Compare in Balanced

Switch to Balanced to directly compare strength of each side
3

Deep Dive in Tree

Use Tree to trace specific argument chains
4

Share in Compass or Circular

Choose engaging views for presentations
5

Print in Pillar

Use Pillar for maximum density in documents

​
Next Steps

Exporting Results

Learn to export views as images or data

Argument Mapping

Understand the underlying node structure

Build docs developers (and LLMs) love

Get started for freeTalk to us