# Journey of a Banana: From Tree to Smoothie A narrative journey diagram following a single banana across 3,000 miles and 3 weeks, from harvest in Costa Rica to a smoothie in the consumer's kitchen. Demonstrates storytelling through visualization, winding path layout, and progressive state changes. ## Key Patterns Used - **Winding journey path**: S-curve connecting all stages visually - **Location markers**: Country flags and place names for geographic context - **Progressive state changes**: Banana color changes (green → yellow → brown → frozen → smoothie) - **Narrative details**: Fun elements like spider check, stickers, price tags - **Timeline**: Bottom timeline showing duration of journey - **Environmental context**: Ocean waves, gas clouds, store awning ## New Shape Techniques ### Banana (curved fruit shape) ```xml ``` ### Banana Tree ```xml ``` ### Cargo Ship ```xml ❄ ``` ### Inspector Figure ```xml ``` ### Spider with "No" Symbol ```xml ``` ### Blender with Smoothie ```xml ``` ### Winding Journey Path ```xml ``` ## CSS Classes ```css /* Journey */ .journey-path { stroke: #D3D1C7; stroke-width: 3; fill: none; stroke-linecap: round; } /* Banana ripeness stages */ .banana-green { fill: #97C459; stroke: #3B6D11; stroke-width: 0.5; } .banana-yellow { fill: #FAC775; stroke: #BA7517; stroke-width: 0.5; } .banana-brown { fill: #854F0B; stroke: #633806; stroke-width: 0.5; } .banana-spots { fill: #633806; } /* Environment elements */ .tree-trunk { fill: #854F0B; stroke: #633806; stroke-width: 1; } .tree-leaf { fill: #97C459; stroke: #3B6D11; stroke-width: 0.5; } .ocean { fill: #85B7EB; } .ship-hull { fill: #5F5E5A; stroke: #444441; stroke-width: 1; } .container { fill: #E6F1FB; stroke: #185FA5; stroke-width: 1; } .gas-cloud { fill: #C0DD97; stroke: #97C459; stroke-width: 0.5; opacity: 0.6; } /* Buildings */ .packhouse { fill: #F1EFE8; stroke: #5F5E5A; stroke-width: 1; } .warehouse { fill: #FAEEDA; stroke: #854F0B; stroke-width: 1; } .store { fill: #E1F5EE; stroke: #0F6E56; stroke-width: 1; } /* Kitchen */ .counter { fill: #FAECE7; stroke: #993C1D; stroke-width: 1; } .blender { fill: #EEEDFE; stroke: #534AB7; stroke-width: 1; } .smoothie { fill: #FAC775; } .freezer { fill: #E6F1FB; stroke: #185FA5; stroke-width: 1; } /* Details */ .sticker { fill: #378ADD; stroke: #185FA5; stroke-width: 0.3; } .spider { fill: #2C2C2A; stroke: #1a1a18; stroke-width: 0.3; } ``` ## Layout Notes - **ViewBox**: 850×680 (tall for winding path) - **Path style**: S-curve winding path connects all 7 stages - **Location labels**: Country flags + place names anchor geographic context - **State progression**: Same object (banana) shown in different states throughout - **Timeline**: Horizontal timeline at bottom shows journey duration - **Narrative elements**: Fun details (spider, stickers, price tags) add storytelling value - **Environmental context**: Ocean waves, gas clouds, awnings create sense of place