SPENDING TREE

Spending Tree turns personal transaction data into a living visual system, making everyday behavior visible, emotional and explorable.

Role: Concept, interaction design, information design, front-end
Tools: JavaScript, D3.js, HTML, CSS
Year: 2025

01 / PROBLEM

MAKE SPENDING
FEEL HUMAN

Traditional financial dashboards show totals but hide the emotional reason behind a purchase. I wanted to understand whether taking more time to decide leads to greater satisfaction—and which purchases reduce or increase the guilt I feel around spending.

02 / TOOLS & METHOD

DATA INTO
GROWTH

D3.jsJavaScriptSVGHTML / CSSData encodingInteraction design

Amount becomes branch length; satisfaction becomes vertical growth and trunk color; spending type becomes leaf color; decision time becomes shape.

LIVE DATA VISUALIZATION / D3 LOGIC REBUILT RESPONSIVELY

SPENDING TREE

Amount controls branch length. Shape describes the decision window. Color describes the spending category. Hover a leaf to read its transaction.

Survival Survival / Spark Spark● Instant＋ Habitual★ Planned

(A)

Question

How can a financial visualization communicate behavior without feeling like another dashboard? The tree metaphor makes accumulation, frequency and category visible as growth.

(B)

Interaction

D3-driven nodes translate transaction groups into a structure that can be explored progressively instead of read as a single static chart.

(C)

Source

The working JavaScript project is available on GitHub. The next documentation pass will add annotated interaction states, data mapping and a live embedded version.

SPENDING TREE

MAKE SPENDINGFEEL HUMAN

DATA INTOGROWTH

SPENDING TREE

Question

Interaction

Source

MAKE SPENDING
FEEL HUMAN

DATA INTO
GROWTH