Progressive Google Income Statement Visualization

Demonstrates step-by-step evolution of a financial visualization from basic tree layout to fully customized area-style chart with backgrounds and icons.

Progressive Google Income Statement Visualization

Functional Overview

This example demonstrates a step-by-step evolution of a financial statement visualization, starting from basic tree layout and progressively adding custom styling, data-driven heights, area-style connections, offset paths, and finally dynamic backgrounds and icons.

Implementation of Key Features

Step-by-Step Versions

The demo includes 6 progressive versions:

• v1: Basic tree layout with financial data
• v2: Custom node styling via RGSlotOnNode
• v3: Dynamic node heights based on revenue values
• v4: Area-style lines using createAreaLinePath
• v5: Offset paths for proportional line heights
• final: Dynamic backgrounds and logo icons

Tab Navigation

Switch between different evolution steps:

{['v1', 'v2', 'v3', 'v4', 'v5', 'final'].map((step, index) => (
    <div
        onClick={() => setStepName(step)}
        className={stepName === step ? 'bg-[#3058f8] text-white' : 'hover:bg-gray-200'}
    >
        Step {index + 1}
    </div>
))}

Step-Specific Components

Each version uses a dedicated component with increasing complexity:

{stepName === 'v1' && <RGProvider><Step1Version /></RGProvider>}
{stepName === 'v2' && <RGProvider><Step2Version /></RGProvider>}
{stepName === 'final' && <RGProvider><StepFinalVersion /></RGProvider>}

Creative Use Cases

• Financial Reports: Create engaging visualizations of income statements, balance sheets
• Data Storytelling: Guide users through data transformations step by step
• Interactive Tutorials: Teach graph customization techniques progressively
• Template Library: Show evolution from basic to advanced visualizations
• Client Demos: Demonstrate customization capabilities incrementally