[{"data":1,"prerenderedAt":1723},["ShallowReactive",2],{"$fmqCpPNsbNoPXMlX7h4vwCbm43yBE7fo7u3RlaQnn2IM":3},{"newThing":4,"project":5,"cycle":9,"sections":21,"threads":1678,"otherDocs":1679,"documents":1680,"images":1681,"archiveItems":1720,"links":1721},"Curved bezier traffic flows — thickness is volume, color is protocol",{"id":6,"label":7,"liveBase":8},"qmap","Qmap",null,{"id":10,"num":11,"dir":12,"name":13,"title":13,"focus":8,"status":14,"statusNote":8,"created":15,"completed":8,"mode":8,"report":8,"recordless":16,"thumbnail":17,"imageCount":18,"artifactCount":19,"lastActivity":20,"hasPickup":16,"hasInitialPrompt":16},"c3",3,"c3.data-flows","data-flows","archived","2026-03-23",false,"\u002Fcycles\u002Fqmap\u002Fc3-arrow.png",9,0,"2026-08-15",[22,40,93,207,337,787,812,899,918,1132],{"key":23,"title":24,"empty":16,"ast":25},"extra","Summary",{"type":26,"children":27},"root",[28,36],{"type":29,"tag":30,"props":31,"children":32},"element","p",{},[33],{"type":34,"value":35},"text","Exploring traffic flow visualization between actors. Building on c2's entity mesh foundation to answer the core question: \"What's talking to what?\"",{"type":29,"tag":37,"props":38,"children":39},"hr",{},[],{"key":23,"title":41,"empty":16,"ast":42},"Goals",{"type":26,"children":43},[44,90],{"type":29,"tag":45,"props":46,"children":47},"ol",{},[48,60,70,80],{"type":29,"tag":49,"props":50,"children":51},"li",{},[52,58],{"type":29,"tag":53,"props":54,"children":55},"strong",{},[56],{"type":34,"value":57},"Visual connections",{"type":34,"value":59}," - Show data flowing between actor entities",{"type":29,"tag":49,"props":61,"children":62},{},[63,68],{"type":29,"tag":53,"props":64,"children":65},{},[66],{"type":34,"value":67},"Traffic attributes",{"type":34,"value":69}," - Volume, direction, protocol type",{"type":29,"tag":49,"props":71,"children":72},{},[73,78],{"type":29,"tag":53,"props":74,"children":75},{},[76],{"type":34,"value":77},"Interactivity",{"type":34,"value":79}," - Hover\u002Fselect to highlight specific flows",{"type":29,"tag":49,"props":81,"children":82},{},[83,88],{"type":29,"tag":53,"props":84,"children":85},{},[86],{"type":34,"value":87},"Clarity",{"type":34,"value":89}," - Avoid visual clutter when many connections exist",{"type":29,"tag":37,"props":91,"children":92},{},[],{"key":23,"title":94,"empty":16,"ast":95},"Data Qualities to Represent",{"type":26,"children":96},[97,104,138,144,177,183,204],{"type":29,"tag":98,"props":99,"children":101},"h3",{"id":100},"traffic-metrics",[102],{"type":34,"value":103},"Traffic Metrics",{"type":29,"tag":105,"props":106,"children":107},"ul",{},[108,118,128],{"type":29,"tag":49,"props":109,"children":110},{},[111,116],{"type":29,"tag":53,"props":112,"children":113},{},[114],{"type":34,"value":115},"Volume",{"type":34,"value":117}," - Bytes\u002Frequests per second (throughput)",{"type":29,"tag":49,"props":119,"children":120},{},[121,126],{"type":29,"tag":53,"props":122,"children":123},{},[124],{"type":34,"value":125},"Latency",{"type":34,"value":127}," - Response time (connection health indicator)",{"type":29,"tag":49,"props":129,"children":130},{},[131,136],{"type":29,"tag":53,"props":132,"children":133},{},[134],{"type":34,"value":135},"Error rate",{"type":34,"value":137}," - Failed requests percentage",{"type":29,"tag":98,"props":139,"children":141},{"id":140},"securitycompliance",[142],{"type":34,"value":143},"Security\u002FCompliance",{"type":29,"tag":105,"props":145,"children":146},{},[147,157,167],{"type":29,"tag":49,"props":148,"children":149},{},[150,155],{"type":29,"tag":53,"props":151,"children":152},{},[153],{"type":34,"value":154},"PII presence",{"type":34,"value":156}," - Personal data flowing through connection",{"type":29,"tag":49,"props":158,"children":159},{},[160,165],{"type":29,"tag":53,"props":161,"children":162},{},[163],{"type":34,"value":164},"Encryption",{"type":34,"value":166}," - TLS vs plaintext",{"type":29,"tag":49,"props":168,"children":169},{},[170,175],{"type":29,"tag":53,"props":171,"children":172},{},[173],{"type":34,"value":174},"Auth level",{"type":34,"value":176}," - Authenticated vs anonymous traffic",{"type":29,"tag":98,"props":178,"children":180},{"id":179},"protocoltype",[181],{"type":34,"value":182},"Protocol\u002FType",{"type":29,"tag":105,"props":184,"children":185},{},[186,194],{"type":29,"tag":49,"props":187,"children":188},{},[189],{"type":29,"tag":53,"props":190,"children":191},{},[192],{"type":34,"value":193},"HTTP\u002FHTTPS, gRPC, WebSocket, DB queries",{"type":29,"tag":49,"props":195,"children":196},{},[197,202],{"type":29,"tag":53,"props":198,"children":199},{},[200],{"type":34,"value":201},"Read vs Write",{"type":34,"value":203}," - Especially relevant for database connections",{"type":29,"tag":37,"props":205,"children":206},{},[],{"key":23,"title":208,"empty":16,"ast":209},"Visual Encoding Matrix",{"type":26,"children":210},[211,334],{"type":29,"tag":212,"props":213,"children":214},"table",{},[215,234],{"type":29,"tag":216,"props":217,"children":218},"thead",{},[219],{"type":29,"tag":220,"props":221,"children":222},"tr",{},[223,229],{"type":29,"tag":224,"props":225,"children":226},"th",{},[227],{"type":34,"value":228},"Quality",{"type":29,"tag":224,"props":230,"children":231},{},[232],{"type":34,"value":233},"Possible Encodings",{"type":29,"tag":235,"props":236,"children":237},"tbody",{},[238,254,270,286,302,318],{"type":29,"tag":220,"props":239,"children":240},{},[241,249],{"type":29,"tag":242,"props":243,"children":244},"td",{},[245],{"type":29,"tag":53,"props":246,"children":247},{},[248],{"type":34,"value":115},{"type":29,"tag":242,"props":250,"children":251},{},[252],{"type":34,"value":253},"Line thickness, particle density, animation speed",{"type":29,"tag":220,"props":255,"children":256},{},[257,265],{"type":29,"tag":242,"props":258,"children":259},{},[260],{"type":29,"tag":53,"props":261,"children":262},{},[263],{"type":34,"value":264},"PII\u002FSensitive",{"type":29,"tag":242,"props":266,"children":267},{},[268],{"type":34,"value":269},"Color tint (amber\u002Fred), icon badge, pulsing glow",{"type":29,"tag":220,"props":271,"children":272},{},[273,281],{"type":29,"tag":242,"props":274,"children":275},{},[276],{"type":29,"tag":53,"props":277,"children":278},{},[279],{"type":34,"value":280},"Direction",{"type":29,"tag":242,"props":282,"children":283},{},[284],{"type":34,"value":285},"Animated dashes, particle flow, arrow heads",{"type":29,"tag":220,"props":287,"children":288},{},[289,297],{"type":29,"tag":242,"props":290,"children":291},{},[292],{"type":29,"tag":53,"props":293,"children":294},{},[295],{"type":34,"value":296},"Active state",{"type":29,"tag":242,"props":298,"children":299},{},[300],{"type":34,"value":301},"Brightness increase, thickness pulse, white tween",{"type":29,"tag":220,"props":303,"children":304},{},[305,313],{"type":29,"tag":242,"props":306,"children":307},{},[308],{"type":29,"tag":53,"props":309,"children":310},{},[311],{"type":34,"value":312},"Protocol",{"type":29,"tag":242,"props":314,"children":315},{},[316],{"type":34,"value":317},"Color hue, dash pattern, icon on hover",{"type":29,"tag":220,"props":319,"children":320},{},[321,329],{"type":29,"tag":242,"props":322,"children":323},{},[324],{"type":29,"tag":53,"props":325,"children":326},{},[327],{"type":34,"value":328},"Error\u002FWarning",{"type":29,"tag":242,"props":330,"children":331},{},[332],{"type":34,"value":333},"Red tint, jitter animation, broken-line pattern",{"type":29,"tag":37,"props":335,"children":336},{},[],{"key":23,"title":338,"empty":16,"ast":339},"Strategies Implemented",{"type":26,"children":340},[341,347,352,429,435,440,483,530,536,541,588,618,624,629,695,701,706,755,761,784],{"type":29,"tag":98,"props":342,"children":344},{"id":343},"_1-lineflow-baseline",[345],{"type":34,"value":346},"1. LineFlow (Baseline)",{"type":29,"tag":30,"props":348,"children":349},{},[350],{"type":34,"value":351},"Static curved line visualization using quadratic bezier curves.",{"type":29,"tag":105,"props":353,"children":354},{},[355,365,375,385,395],{"type":29,"tag":49,"props":356,"children":357},{},[358,363],{"type":29,"tag":53,"props":359,"children":360},{},[361],{"type":34,"value":362},"Use case:",{"type":34,"value":364}," Clean, always-visible connections for low-motion views",{"type":29,"tag":49,"props":366,"children":367},{},[368,373],{"type":29,"tag":53,"props":369,"children":370},{},[371],{"type":34,"value":372},"Volume encoding:",{"type":34,"value":374}," Line thickness (1-4px proportional to 0-1 volume)",{"type":29,"tag":49,"props":376,"children":377},{},[378,383],{"type":29,"tag":53,"props":379,"children":380},{},[381],{"type":34,"value":382},"Protocol encoding:",{"type":34,"value":384}," Color hue from colorScheme",{"type":29,"tag":49,"props":386,"children":387},{},[388,393],{"type":29,"tag":53,"props":389,"children":390},{},[391],{"type":34,"value":392},"State support:",{"type":34,"value":394}," Tweened transitions (idle → active → highlighted → warning)",{"type":29,"tag":49,"props":396,"children":397},{},[398,403,405,412,414,420,421,427],{"type":29,"tag":53,"props":399,"children":400},{},[401],{"type":34,"value":402},"Tech:",{"type":34,"value":404}," Three.js ",{"type":29,"tag":406,"props":407,"children":409},"code",{"className":408},[],[410],{"type":34,"value":411},"Line2",{"type":34,"value":413},"\u002F",{"type":29,"tag":406,"props":415,"children":417},{"className":416},[],[418],{"type":34,"value":419},"LineGeometry",{"type":34,"value":413},{"type":29,"tag":406,"props":422,"children":424},{"className":423},[],[425],{"type":34,"value":426},"LineMaterial",{"type":34,"value":428}," from examples",{"type":29,"tag":98,"props":430,"children":432},{"id":431},"_2-pulseflow-tethered-stretch",[433],{"type":34,"value":434},"2. PulseFlow (Tethered Stretch)",{"type":29,"tag":30,"props":436,"children":437},{},[438],{"type":34,"value":439},"Three-phase animation showing data \"arrival\" at target:",{"type":29,"tag":45,"props":441,"children":442},{},[443,453,463,473],{"type":29,"tag":49,"props":444,"children":445},{},[446,451],{"type":29,"tag":53,"props":447,"children":448},{},[449],{"type":34,"value":450},"Extend",{"type":34,"value":452}," (0.15s) - Line stretches source→target, tail anchored at source",{"type":29,"tag":49,"props":454,"children":455},{},[456,461],{"type":29,"tag":53,"props":457,"children":458},{},[459],{"type":34,"value":460},"Hold",{"type":34,"value":462}," (1.4s) - Full connection visible, tethered to origin",{"type":29,"tag":49,"props":464,"children":465},{},[466,471],{"type":29,"tag":53,"props":467,"children":468},{},[469],{"type":34,"value":470},"Retract",{"type":34,"value":472}," (0.25s) - Tail releases, shrinks toward target as opacity fades",{"type":29,"tag":49,"props":474,"children":475},{},[476,481],{"type":29,"tag":53,"props":477,"children":478},{},[479],{"type":34,"value":480},"Idle",{"type":34,"value":482}," (0.4s) - Pause before next pulse",{"type":29,"tag":105,"props":484,"children":485},{},[486,495,505],{"type":29,"tag":49,"props":487,"children":488},{},[489,493],{"type":29,"tag":53,"props":490,"children":491},{},[492],{"type":34,"value":362},{"type":34,"value":494}," Emphasizing active connections, showing data being \"pulled through\"",{"type":29,"tag":49,"props":496,"children":497},{},[498,503],{"type":29,"tag":53,"props":499,"children":500},{},[501],{"type":34,"value":502},"Volume effect:",{"type":34,"value":504}," Thinner = slower animation",{"type":29,"tag":49,"props":506,"children":507},{},[508,512,514,520,522,528],{"type":29,"tag":53,"props":509,"children":510},{},[511],{"type":34,"value":402},{"type":34,"value":513}," Head\u002Ftail position tracking via ",{"type":29,"tag":406,"props":515,"children":517},{"className":516},[],[518],{"type":34,"value":519},"_headT",{"type":34,"value":521}," and ",{"type":29,"tag":406,"props":523,"children":525},{"className":524},[],[526],{"type":34,"value":527},"_tailT",{"type":34,"value":529}," parameters",{"type":29,"tag":98,"props":531,"children":533},{"id":532},"_3-arrowflow-flying-comet",[534],{"type":34,"value":535},"3. ArrowFlow (Flying Comet)",{"type":29,"tag":30,"props":537,"children":538},{},[539],{"type":34,"value":540},"Arrow \"packet\" flying from source to target with comet tail effect:",{"type":29,"tag":45,"props":542,"children":543},{},[544,561,570,579],{"type":29,"tag":49,"props":545,"children":546},{},[547,551,553,559],{"type":29,"tag":53,"props":548,"children":549},{},[550],{"type":34,"value":450},{"type":34,"value":552}," (0.6s) - Arrow flies out (head advances, tail lags via ",{"type":29,"tag":406,"props":554,"children":556},{"className":555},[],[557],{"type":34,"value":558},"cometHeadLength",{"type":34,"value":560},")",{"type":29,"tag":49,"props":562,"children":563},{},[564,568],{"type":29,"tag":53,"props":565,"children":566},{},[567],{"type":34,"value":460},{"type":34,"value":569}," (0.8s) - Full connection briefly visible",{"type":29,"tag":49,"props":571,"children":572},{},[573,577],{"type":29,"tag":53,"props":574,"children":575},{},[576],{"type":34,"value":470},{"type":34,"value":578}," (0.4s) - Tail catches up to head at destination",{"type":29,"tag":49,"props":580,"children":581},{},[582,586],{"type":29,"tag":53,"props":583,"children":584},{},[585],{"type":34,"value":480},{"type":34,"value":587}," (0.3s) - Brief pause",{"type":29,"tag":105,"props":589,"children":590},{},[591,600,609],{"type":29,"tag":49,"props":592,"children":593},{},[594,598],{"type":29,"tag":53,"props":595,"children":596},{},[597],{"type":34,"value":362},{"type":34,"value":599}," Emphasizing direction (head position makes flow obvious)",{"type":29,"tag":49,"props":601,"children":602},{},[603,607],{"type":29,"tag":53,"props":604,"children":605},{},[606],{"type":34,"value":502},{"type":34,"value":608}," Higher volume = faster animation",{"type":29,"tag":49,"props":610,"children":611},{},[612,616],{"type":29,"tag":53,"props":613,"children":614},{},[615],{"type":34,"value":402},{"type":34,"value":617}," Decoupled head\u002Ftail speeds create chasing visual",{"type":29,"tag":98,"props":619,"children":621},{"id":620},"_4-dashflow-data-packet-streams",[622],{"type":34,"value":623},"4. DashFlow (Data Packet Streams)",{"type":29,"tag":30,"props":625,"children":626},{},[627],{"type":34,"value":628},"Animated dashes traveling along the line like moving packets.",{"type":29,"tag":105,"props":630,"children":631},{},[632,641,650,660,685],{"type":29,"tag":49,"props":633,"children":634},{},[635,639],{"type":29,"tag":53,"props":636,"children":637},{},[638],{"type":34,"value":362},{"type":34,"value":640}," Volume visualization, continuous traffic indication",{"type":29,"tag":49,"props":642,"children":643},{},[644,648],{"type":29,"tag":53,"props":645,"children":646},{},[647],{"type":34,"value":372},{"type":34,"value":649}," Packet density (larger dashes, smaller gaps at high volume)",{"type":29,"tag":49,"props":651,"children":652},{},[653,658],{"type":29,"tag":53,"props":654,"children":655},{},[656],{"type":34,"value":657},"Speed scaling:",{"type":34,"value":659}," 0.8x to 1.2x base speed based on volume",{"type":29,"tag":49,"props":661,"children":662},{},[663,667,669,675,677,683],{"type":29,"tag":53,"props":664,"children":665},{},[666],{"type":34,"value":402},{"type":34,"value":668}," LineMaterial's built-in ",{"type":29,"tag":406,"props":670,"children":672},{"className":671},[],[673],{"type":34,"value":674},"dashed",{"type":34,"value":676}," + ",{"type":29,"tag":406,"props":678,"children":680},{"className":679},[],[681],{"type":34,"value":682},"dashOffset",{"type":34,"value":684}," for GPU-accelerated animation",{"type":29,"tag":49,"props":686,"children":687},{},[688,693],{"type":29,"tag":53,"props":689,"children":690},{},[691],{"type":34,"value":692},"Efficiency:",{"type":34,"value":694}," Most performant—no geometry rebuilding, just uniform updates",{"type":29,"tag":98,"props":696,"children":698},{"id":697},"_5-glowflow-pulsing-bright-spot",[699],{"type":34,"value":700},"5. GlowFlow (Pulsing Bright Spot)",{"type":29,"tag":30,"props":702,"children":703},{},[704],{"type":34,"value":705},"Two-layer system: dim baseline with bright pulse traveling along.",{"type":29,"tag":105,"props":707,"children":708},{},[709,719,729,738],{"type":29,"tag":49,"props":710,"children":711},{},[712,717],{"type":29,"tag":53,"props":713,"children":714},{},[715],{"type":34,"value":716},"Base layer:",{"type":34,"value":718}," Always visible, dim (opacity: 0.3)",{"type":29,"tag":49,"props":720,"children":721},{},[722,727],{"type":29,"tag":53,"props":723,"children":724},{},[725],{"type":34,"value":726},"Pulse layer:",{"type":34,"value":728}," Bright animated segment (opacity: 1.0)",{"type":29,"tag":49,"props":730,"children":731},{},[732,736],{"type":29,"tag":53,"props":733,"children":734},{},[735],{"type":34,"value":362},{"type":34,"value":737}," Non-intrusive baseline + attention-grabbing active indication",{"type":29,"tag":49,"props":739,"children":740},{},[741,745,747,753],{"type":29,"tag":53,"props":742,"children":743},{},[744],{"type":34,"value":502},{"type":34,"value":746}," ",{"type":29,"tag":406,"props":748,"children":750},{"className":749},[],[751],{"type":34,"value":752},"pulseDuration",{"type":34,"value":754}," scales inversely with volume",{"type":29,"tag":98,"props":756,"children":758},{"id":757},"future-strategies-not-implemented",[759],{"type":34,"value":760},"Future Strategies (Not Implemented)",{"type":29,"tag":105,"props":762,"children":763},{},[764,774],{"type":29,"tag":49,"props":765,"children":766},{},[767,772],{"type":29,"tag":53,"props":768,"children":769},{},[770],{"type":34,"value":771},"ParticleFlow",{"type":34,"value":773}," - Dots\u002Fsprites moving along path",{"type":29,"tag":49,"props":775,"children":776},{},[777,782],{"type":29,"tag":53,"props":778,"children":779},{},[780],{"type":34,"value":781},"Edge Bundling",{"type":34,"value":783}," - Group parallel flows to reduce clutter",{"type":29,"tag":37,"props":785,"children":786},{},[],{"key":23,"title":788,"empty":16,"ast":789},"Interaction Patterns (future)",{"type":26,"children":790},[791,809],{"type":29,"tag":105,"props":792,"children":793},{},[794,799,804],{"type":29,"tag":49,"props":795,"children":796},{},[797],{"type":34,"value":798},"Hover on actor → highlight its connections",{"type":29,"tag":49,"props":800,"children":801},{},[802],{"type":34,"value":803},"Click on flow → show details panel",{"type":29,"tag":49,"props":805,"children":806},{},[807],{"type":34,"value":808},"Filter by protocol\u002Fzone\u002Fquality",{"type":29,"tag":37,"props":810,"children":811},{},[],{"key":23,"title":813,"empty":16,"ast":814},"Foundation (from c2)",{"type":26,"children":815},[816,821,882,896],{"type":29,"tag":30,"props":817,"children":818},{},[819],{"type":34,"value":820},"This cycle inherits the entity system:",{"type":29,"tag":105,"props":822,"children":823},{},[824,835,866,877],{"type":29,"tag":49,"props":825,"children":826},{},[827,833],{"type":29,"tag":406,"props":828,"children":830},{"className":829},[],[831],{"type":34,"value":832},"BaseMesh",{"type":34,"value":834}," with state management, animations, disposable tracking",{"type":29,"tag":49,"props":836,"children":837},{},[838,844,846,852,853,859,860],{"type":29,"tag":406,"props":839,"children":841},{"className":840},[],[842],{"type":34,"value":843},"AppMesh",{"type":34,"value":845},", ",{"type":29,"tag":406,"props":847,"children":849},{"className":848},[],[850],{"type":34,"value":851},"ServiceMesh",{"type":34,"value":845},{"type":29,"tag":406,"props":854,"children":856},{"className":855},[],[857],{"type":34,"value":858},"DatabaseMesh",{"type":34,"value":845},{"type":29,"tag":406,"props":861,"children":863},{"className":862},[],[864],{"type":34,"value":865},"VendorMesh",{"type":29,"tag":49,"props":867,"children":868},{},[869,871],{"type":34,"value":870},"Factory pattern via ",{"type":29,"tag":406,"props":872,"children":874},{"className":873},[],[875],{"type":34,"value":876},"createEntity()",{"type":29,"tag":49,"props":878,"children":879},{},[880],{"type":34,"value":881},"State colors: active (purple), highlighted (teal), warning (red), ignored (white)",{"type":29,"tag":30,"props":883,"children":884},{},[885,887,894],{"type":34,"value":886},"See ",{"type":29,"tag":888,"props":889,"children":891},"a",{"href":890},"\u002Fcycles\u002Fqmap\u002Fc2\u002Fdoc\u002FCYCLE",[892],{"type":34,"value":893},"..\u002Fc2.entity-meshes\u002FCYCLE.md",{"type":34,"value":895}," for entity details.",{"type":29,"tag":37,"props":897,"children":898},{},[],{"key":23,"title":900,"empty":16,"ast":901},"Files",{"type":26,"children":902},[903,915],{"type":29,"tag":904,"props":905,"children":909},"pre",{"className":906,"code":908,"language":34},[907],"language-text","flows\u002F\n├── index.js         - Factory + exports + FLOW_STYLES registry\n├── BaseFlow.js      - Base class: lifecycle, disposal, state, tweening\n├── LineFlow.js      - Static curved lines (baseline)\n├── PulseFlow.js     - Tethered stretch animation\n├── ArrowFlow.js     - Flying comet animation\n├── DashFlow.js      - Moving packet dashes (GPU-accelerated)\n└── GlowFlow.js      - Dim baseline + bright traveling pulse\n\nentities\u002F              - Inherited from c2 (unchanged)\n├── BaseMesh.js      - State, animation, labels, disposal\n├── AppMesh.js       - Dodecahedron (apps)\n├── ServiceMesh.js   - Hexagonal prism (services)\n├── DatabaseMesh.js  - Stacked slabs (databases)\n├── VendorMesh.js    - Diamond + favicon (vendors)\n└── index.js         - Factory pattern\n\nshared\u002F\n├── ExperimentBase.js - Scene setup + animation loop\n├── testData.js       - 18 actors + 15 sample flows\n└── colorScheme.js    - Color definitions\n",[910],{"type":29,"tag":406,"props":911,"children":913},{"__ignoreMap":912},"",[914],{"type":34,"value":908},{"type":29,"tag":37,"props":916,"children":917},{},[],{"key":23,"title":919,"empty":16,"ast":920},"Progress",{"type":26,"children":921},[922,928,1009,1015,1064,1070,1092,1098,1129],{"type":29,"tag":98,"props":923,"children":925},{"id":924},"phase-1-foundation",[926],{"type":34,"value":927},"Phase 1: Foundation ✓",{"type":29,"tag":105,"props":929,"children":932},{"className":930},[931],"contains-task-list",[933,946,955,964,973,982,991,1000],{"type":29,"tag":49,"props":934,"children":937},{"className":935},[936],"task-list-item",[938,944],{"type":29,"tag":939,"props":940,"children":943},"input",{"checked":941,"disabled":941,"type":942},true,"checkbox",[],{"type":34,"value":945}," Define flow data structure (SAMPLE_FLOWS in testData.js)",{"type":29,"tag":49,"props":947,"children":949},{"className":948},[936],[950,953],{"type":29,"tag":939,"props":951,"children":952},{"checked":941,"disabled":941,"type":942},[],{"type":34,"value":954}," Implement BaseFlow with lifecycle, disposal, entity refs",{"type":29,"tag":49,"props":956,"children":958},{"className":957},[936],[959,962],{"type":29,"tag":939,"props":960,"children":961},{"checked":941,"disabled":941,"type":942},[],{"type":34,"value":963}," LineFlow with curved bezier paths",{"type":29,"tag":49,"props":965,"children":967},{"className":966},[936],[968,971],{"type":29,"tag":939,"props":969,"children":970},{"checked":941,"disabled":941,"type":942},[],{"type":34,"value":972}," PulseFlow with tethered stretch animation",{"type":29,"tag":49,"props":974,"children":976},{"className":975},[936],[977,980],{"type":29,"tag":939,"props":978,"children":979},{"checked":941,"disabled":941,"type":942},[],{"type":34,"value":981}," ArrowFlow with flying comet animation",{"type":29,"tag":49,"props":983,"children":985},{"className":984},[936],[986,989],{"type":29,"tag":939,"props":987,"children":988},{"checked":941,"disabled":941,"type":942},[],{"type":34,"value":990}," DashFlow with GPU-accelerated dash animation",{"type":29,"tag":49,"props":992,"children":994},{"className":993},[936],[995,998],{"type":29,"tag":939,"props":996,"children":997},{"checked":941,"disabled":941,"type":942},[],{"type":34,"value":999}," GlowFlow with dim baseline + bright pulse",{"type":29,"tag":49,"props":1001,"children":1003},{"className":1002},[936],[1004,1007],{"type":29,"tag":939,"props":1005,"children":1006},{"checked":941,"disabled":941,"type":942},[],{"type":34,"value":1008}," Style switcher in UI (5 options)",{"type":29,"tag":98,"props":1010,"children":1012},{"id":1011},"phase-2-visual-polish",[1013],{"type":34,"value":1014},"Phase 2: Visual Polish ✓",{"type":29,"tag":105,"props":1016,"children":1018},{"className":1017},[931],[1019,1028,1037,1046,1055],{"type":29,"tag":49,"props":1020,"children":1022},{"className":1021},[936],[1023,1026],{"type":29,"tag":939,"props":1024,"children":1025},{"checked":941,"disabled":941,"type":942},[],{"type":34,"value":1027}," Animated direction indicator (all flow types)",{"type":29,"tag":49,"props":1029,"children":1031},{"className":1030},[936],[1032,1035],{"type":29,"tag":939,"props":1033,"children":1034},{"checked":941,"disabled":941,"type":942},[],{"type":34,"value":1036}," Volume-based thickness and speed",{"type":29,"tag":49,"props":1038,"children":1040},{"className":1039},[936],[1041,1044],{"type":29,"tag":939,"props":1042,"children":1043},{"checked":941,"disabled":941,"type":942},[],{"type":34,"value":1045}," Protocol-based coloring",{"type":29,"tag":49,"props":1047,"children":1049},{"className":1048},[936],[1050,1053],{"type":29,"tag":939,"props":1051,"children":1052},{"checked":941,"disabled":941,"type":942},[],{"type":34,"value":1054}," Active state tweening (thicken + white shift)",{"type":29,"tag":49,"props":1056,"children":1058},{"className":1057},[936],[1059,1062],{"type":29,"tag":939,"props":1060,"children":1061},{"checked":941,"disabled":941,"type":942},[],{"type":34,"value":1063}," PII quality badge (canvas sprite at midpoint)",{"type":29,"tag":98,"props":1065,"children":1067},{"id":1066},"phase-3-interactivity-future",[1068],{"type":34,"value":1069},"Phase 3: Interactivity (Future)",{"type":29,"tag":105,"props":1071,"children":1073},{"className":1072},[931],[1074,1083],{"type":29,"tag":49,"props":1075,"children":1077},{"className":1076},[936],[1078,1081],{"type":29,"tag":939,"props":1079,"children":1080},{"disabled":941,"type":942},[],{"type":34,"value":1082}," Hover highlighting",{"type":29,"tag":49,"props":1084,"children":1086},{"className":1085},[936],[1087,1090],{"type":29,"tag":939,"props":1088,"children":1089},{"disabled":941,"type":942},[],{"type":34,"value":1091}," Click to select\u002Finspect",{"type":29,"tag":98,"props":1093,"children":1095},{"id":1094},"phase-4-advanced-future",[1096],{"type":34,"value":1097},"Phase 4: Advanced (Future)",{"type":29,"tag":105,"props":1099,"children":1101},{"className":1100},[931],[1102,1111,1120],{"type":29,"tag":49,"props":1103,"children":1105},{"className":1104},[936],[1106,1109],{"type":29,"tag":939,"props":1107,"children":1108},{"disabled":941,"type":942},[],{"type":34,"value":1110}," Particle flow variant",{"type":29,"tag":49,"props":1112,"children":1114},{"className":1113},[936],[1115,1118],{"type":29,"tag":939,"props":1116,"children":1117},{"disabled":941,"type":942},[],{"type":34,"value":1119}," Additional quality badges (encryption, latency)",{"type":29,"tag":49,"props":1121,"children":1123},{"className":1122},[936],[1124,1127],{"type":29,"tag":939,"props":1125,"children":1126},{"disabled":941,"type":942},[],{"type":34,"value":1128}," Edge bundling for high-connectivity scenarios",{"type":29,"tag":37,"props":1130,"children":1131},{},[],{"key":23,"title":1133,"empty":16,"ast":1134},"Lessons Learned",{"type":26,"children":1135},[1136,1142,1267,1273,1405,1411,1534,1540,1670,1673],{"type":29,"tag":98,"props":1137,"children":1139},{"id":1138},"what-worked-well",[1140],{"type":34,"value":1141},"What Worked Well",{"type":29,"tag":45,"props":1143,"children":1144},{},[1145,1163,1191,1217,1244],{"type":29,"tag":49,"props":1146,"children":1147},{},[1148,1153,1155],{"type":29,"tag":53,"props":1149,"children":1150},{},[1151],{"type":34,"value":1152},"Five distinct visual strategies",{"type":34,"value":1154}," offer real choices for different contexts",{"type":29,"tag":105,"props":1156,"children":1157},{},[1158],{"type":29,"tag":49,"props":1159,"children":1160},{},[1161],{"type":34,"value":1162},"LineFlow for clarity, animated types (Pulse, Arrow, Dash, Glow) for motion\u002Femphasis",{"type":29,"tag":49,"props":1164,"children":1165},{},[1166,1171,1173],{"type":29,"tag":53,"props":1167,"children":1168},{},[1169],{"type":34,"value":1170},"OOP\u002Finheritance approach",{"type":34,"value":1172}," for flows",{"type":29,"tag":105,"props":1174,"children":1175},{},[1176,1181,1186],{"type":29,"tag":49,"props":1177,"children":1178},{},[1179],{"type":34,"value":1180},"BaseFlow handles 80% of functionality (lifecycle, disposal, state, tweening)",{"type":29,"tag":49,"props":1182,"children":1183},{},[1184],{"type":34,"value":1185},"Subclasses only implement visual differences",{"type":29,"tag":49,"props":1187,"children":1188},{},[1189],{"type":34,"value":1190},"Easy to add new flow types",{"type":29,"tag":49,"props":1192,"children":1193},{},[1194,1199],{"type":29,"tag":53,"props":1195,"children":1196},{},[1197],{"type":34,"value":1198},"Bezier curves",{"type":29,"tag":105,"props":1200,"children":1201},{},[1202,1207,1212],{"type":29,"tag":49,"props":1203,"children":1204},{},[1205],{"type":34,"value":1206},"Clean upward arc avoids visual clutter",{"type":29,"tag":49,"props":1208,"children":1209},{},[1210],{"type":34,"value":1211},"Height scales with distance (proportional)",{"type":29,"tag":49,"props":1213,"children":1214},{},[1215],{"type":34,"value":1216},"Pre-computed for efficiency",{"type":29,"tag":49,"props":1218,"children":1219},{},[1220,1225,1236],{"type":29,"tag":53,"props":1221,"children":1222},{},[1223],{"type":34,"value":1224},"Configuration objects at top of each class",{"type":29,"tag":904,"props":1226,"children":1231},{"className":1227,"code":1228,"language":1229,"meta":912,"style":1230},"language-javascript","const PULSE_CONFIG = { extendDuration: 0.15, holdDuration: 1.4, ... }\n","javascript","undefined",[1232],{"type":29,"tag":406,"props":1233,"children":1234},{"__ignoreMap":912},[1235],{"type":34,"value":1228},{"type":29,"tag":105,"props":1237,"children":1238},{},[1239],{"type":29,"tag":49,"props":1240,"children":1241},{},[1242],{"type":34,"value":1243},"Single source of truth for tuning, easy to compare across strategies",{"type":29,"tag":49,"props":1245,"children":1246},{},[1247,1252,1254],{"type":29,"tag":53,"props":1248,"children":1249},{},[1250],{"type":34,"value":1251},"PII badge system",{"type":34,"value":1253}," demonstrates extensibility",{"type":29,"tag":105,"props":1255,"children":1256},{},[1257,1262],{"type":29,"tag":49,"props":1258,"children":1259},{},[1260],{"type":34,"value":1261},"Canvas-based sprite at curve midpoint",{"type":29,"tag":49,"props":1263,"children":1264},{},[1265],{"type":34,"value":1266},"Could easily add encryption icons, latency indicators, etc.",{"type":29,"tag":98,"props":1268,"children":1270},{"id":1269},"what-didnt-work-gotchas",[1271],{"type":34,"value":1272},"What Didn't Work \u002F Gotchas",{"type":29,"tag":45,"props":1274,"children":1275},{},[1276,1307,1342,1372],{"type":29,"tag":49,"props":1277,"children":1278},{},[1279,1284],{"type":29,"tag":53,"props":1280,"children":1281},{},[1282],{"type":34,"value":1283},"Phase-based animations (Pulse, Arrow) are complex",{"type":29,"tag":105,"props":1285,"children":1286},{},[1287,1292,1297],{"type":29,"tag":49,"props":1288,"children":1289},{},[1290],{"type":34,"value":1291},"Head\u002Ftail tracking adds cognitive load",{"type":29,"tag":49,"props":1293,"children":1294},{},[1295],{"type":34,"value":1296},"Timing coordination between phases is error-prone",{"type":29,"tag":49,"props":1298,"children":1299},{},[1300,1305],{"type":29,"tag":53,"props":1301,"children":1302},{},[1303],{"type":34,"value":1304},"Lesson:",{"type":34,"value":1306}," Keep phase count small (3-4 max)",{"type":29,"tag":49,"props":1308,"children":1309},{},[1310,1315],{"type":29,"tag":53,"props":1311,"children":1312},{},[1313],{"type":34,"value":1314},"Dash animation subtleties",{"type":29,"tag":105,"props":1316,"children":1317},{},[1318,1328,1333],{"type":29,"tag":49,"props":1319,"children":1320},{},[1321,1326],{"type":29,"tag":406,"props":1322,"children":1324},{"className":1323},[],[1325],{"type":34,"value":682},{"type":34,"value":1327}," must match line distance for proper cycling",{"type":29,"tag":49,"props":1329,"children":1330},{},[1331],{"type":34,"value":1332},"On geometry rebuild, dash pattern can briefly desync",{"type":29,"tag":49,"props":1334,"children":1335},{},[1336,1340],{"type":29,"tag":53,"props":1337,"children":1338},{},[1339],{"type":34,"value":1304},{"type":34,"value":1341}," Validate dash\u002Fgap patterns match line length",{"type":29,"tag":49,"props":1343,"children":1344},{},[1345,1350],{"type":29,"tag":53,"props":1346,"children":1347},{},[1348],{"type":34,"value":1349},"Curve midpoint calculation",{"type":29,"tag":105,"props":1351,"children":1352},{},[1353,1358,1363],{"type":29,"tag":49,"props":1354,"children":1355},{},[1356],{"type":34,"value":1357},"Bezier reaches 50% of control point height at t=0.5, not simple average",{"type":29,"tag":49,"props":1359,"children":1360},{},[1361],{"type":34,"value":1362},"Quality badge positioning was off until this was understood",{"type":29,"tag":49,"props":1364,"children":1365},{},[1366,1370],{"type":29,"tag":53,"props":1367,"children":1368},{},[1369],{"type":34,"value":1304},{"type":34,"value":1371}," Document geometric assumptions clearly",{"type":29,"tag":49,"props":1373,"children":1374},{},[1375,1380],{"type":29,"tag":53,"props":1376,"children":1377},{},[1378],{"type":34,"value":1379},"LineMaterial resolution handling",{"type":29,"tag":105,"props":1381,"children":1382},{},[1383,1388],{"type":29,"tag":49,"props":1384,"children":1385},{},[1386],{"type":34,"value":1387},"Set at creation time, doesn't auto-adapt to window resize",{"type":29,"tag":49,"props":1389,"children":1390},{},[1391,1395,1397,1403],{"type":29,"tag":53,"props":1392,"children":1393},{},[1394],{"type":34,"value":1304},{"type":34,"value":1396}," Need ",{"type":29,"tag":406,"props":1398,"children":1400},{"className":1399},[],[1401],{"type":34,"value":1402},"updateResolution()",{"type":34,"value":1404}," method when viewport changes",{"type":29,"tag":98,"props":1406,"children":1408},{"id":1407},"patterns-worth-preserving",[1409],{"type":34,"value":1410},"Patterns Worth Preserving",{"type":29,"tag":45,"props":1412,"children":1413},{},[1414,1449,1473,1507],{"type":29,"tag":49,"props":1415,"children":1416},{},[1417,1422],{"type":29,"tag":53,"props":1418,"children":1419},{},[1420],{"type":34,"value":1421},"Disposable resource tracking",{"type":29,"tag":105,"props":1423,"children":1424},{},[1425,1436],{"type":29,"tag":49,"props":1426,"children":1427},{},[1428,1430],{"type":34,"value":1429},"Every geometry\u002Fmaterial\u002Ftexture calls ",{"type":29,"tag":406,"props":1431,"children":1433},{"className":1432},[],[1434],{"type":34,"value":1435},"registerDisposable()",{"type":29,"tag":49,"props":1437,"children":1438},{},[1439,1441,1447],{"type":34,"value":1440},"Single ",{"type":29,"tag":406,"props":1442,"children":1444},{"className":1443},[],[1445],{"type":34,"value":1446},"dispose()",{"type":34,"value":1448}," cleans everything—prevents GPU memory leaks",{"type":29,"tag":49,"props":1450,"children":1451},{},[1452,1457,1465],{"type":29,"tag":53,"props":1453,"children":1454},{},[1455],{"type":34,"value":1456},"Phase progression system",{"type":29,"tag":904,"props":1458,"children":1460},{"className":1227,"code":1459,"language":1229,"meta":912,"style":1230},"PHASE = { IDLE, EXTEND, HOLD, RETRACT }\n_phaseProgress \u002F\u002F 0-1 within current phase\n",[1461],{"type":29,"tag":406,"props":1462,"children":1463},{"__ignoreMap":912},[1464],{"type":34,"value":1459},{"type":29,"tag":105,"props":1466,"children":1467},{},[1468],{"type":29,"tag":49,"props":1469,"children":1470},{},[1471],{"type":34,"value":1472},"Clear, maintainable state machine",{"type":29,"tag":49,"props":1474,"children":1475},{},[1476,1481],{"type":29,"tag":53,"props":1477,"children":1478},{},[1479],{"type":34,"value":1480},"Easing functions as methods",{"type":29,"tag":105,"props":1482,"children":1483},{},[1484,1502],{"type":29,"tag":49,"props":1485,"children":1486},{},[1487,1493,1494,1500],{"type":29,"tag":406,"props":1488,"children":1490},{"className":1489},[],[1491],{"type":34,"value":1492},"_easeOutQuad(t)",{"type":34,"value":845},{"type":29,"tag":406,"props":1495,"children":1497},{"className":1496},[],[1498],{"type":34,"value":1499},"_easeInCubic(t)",{"type":34,"value":1501}," improve readability",{"type":29,"tag":49,"props":1503,"children":1504},{},[1505],{"type":34,"value":1506},"Easy to experiment with different easing curves",{"type":29,"tag":49,"props":1508,"children":1509},{},[1510,1515],{"type":29,"tag":53,"props":1511,"children":1512},{},[1513],{"type":34,"value":1514},"State management with optional tweening",{"type":29,"tag":105,"props":1516,"children":1517},{},[1518,1529],{"type":29,"tag":49,"props":1519,"children":1520},{},[1521,1527],{"type":29,"tag":406,"props":1522,"children":1524},{"className":1523},[],[1525],{"type":34,"value":1526},"setState(newState, { tween: true })",{"type":34,"value":1528}," for smooth transitions",{"type":29,"tag":49,"props":1530,"children":1531},{},[1532],{"type":34,"value":1533},"Each subclass interprets visually (color, thickness, opacity)",{"type":29,"tag":98,"props":1535,"children":1537},{"id":1536},"visual-encoding-summary",[1538],{"type":34,"value":1539},"Visual Encoding Summary",{"type":29,"tag":212,"props":1541,"children":1542},{},[1543,1563],{"type":29,"tag":216,"props":1544,"children":1545},{},[1546],{"type":29,"tag":220,"props":1547,"children":1548},{},[1549,1553,1558],{"type":29,"tag":224,"props":1550,"children":1551},{},[1552],{"type":34,"value":228},{"type":29,"tag":224,"props":1554,"children":1555},{},[1556],{"type":34,"value":1557},"Encoding",{"type":29,"tag":224,"props":1559,"children":1560},{},[1561],{"type":34,"value":1562},"Implementation",{"type":29,"tag":235,"props":1564,"children":1565},{},[1566,1583,1600,1617,1635,1652],{"type":29,"tag":220,"props":1567,"children":1568},{},[1569,1573,1578],{"type":29,"tag":242,"props":1570,"children":1571},{},[1572],{"type":34,"value":115},{"type":29,"tag":242,"props":1574,"children":1575},{},[1576],{"type":34,"value":1577},"Line thickness",{"type":29,"tag":242,"props":1579,"children":1580},{},[1581],{"type":34,"value":1582},"1-4px range, proportional to 0-1",{"type":29,"tag":220,"props":1584,"children":1585},{},[1586,1590,1595],{"type":29,"tag":242,"props":1587,"children":1588},{},[1589],{"type":34,"value":280},{"type":29,"tag":242,"props":1591,"children":1592},{},[1593],{"type":34,"value":1594},"Animation direction",{"type":29,"tag":242,"props":1596,"children":1597},{},[1598],{"type":34,"value":1599},"Dashes\u002Farrows\u002Fpulses flow along curve",{"type":29,"tag":220,"props":1601,"children":1602},{},[1603,1607,1612],{"type":29,"tag":242,"props":1604,"children":1605},{},[1606],{"type":34,"value":312},{"type":29,"tag":242,"props":1608,"children":1609},{},[1610],{"type":34,"value":1611},"Color hue",{"type":29,"tag":242,"props":1613,"children":1614},{},[1615],{"type":34,"value":1616},"Consistent protocol→color mapping",{"type":29,"tag":220,"props":1618,"children":1619},{},[1620,1625,1630],{"type":29,"tag":242,"props":1621,"children":1622},{},[1623],{"type":34,"value":1624},"PII",{"type":29,"tag":242,"props":1626,"children":1627},{},[1628],{"type":34,"value":1629},"Purple badge",{"type":29,"tag":242,"props":1631,"children":1632},{},[1633],{"type":34,"value":1634},"Canvas sprite at flow midpoint",{"type":29,"tag":220,"props":1636,"children":1637},{},[1638,1642,1647],{"type":29,"tag":242,"props":1639,"children":1640},{},[1641],{"type":34,"value":296},{"type":29,"tag":242,"props":1643,"children":1644},{},[1645],{"type":34,"value":1646},"Brightness + thickness",{"type":29,"tag":242,"props":1648,"children":1649},{},[1650],{"type":34,"value":1651},"Color lerp toward white",{"type":29,"tag":220,"props":1653,"children":1654},{},[1655,1660,1665],{"type":29,"tag":242,"props":1656,"children":1657},{},[1658],{"type":34,"value":1659},"Error\u002Fwarning",{"type":29,"tag":242,"props":1661,"children":1662},{},[1663],{"type":34,"value":1664},"Red tint",{"type":29,"tag":242,"props":1666,"children":1667},{},[1668],{"type":34,"value":1669},"Configurable color transitions",{"type":29,"tag":37,"props":1671,"children":1672},{},[],{"type":29,"tag":1674,"props":1675,"children":1676},"style",{},[1677],{"type":34,"value":912},[],[],[],[1682,1689,1693,1697,1700,1704,1708,1712,1716],{"src":1683,"kind":1684,"order":1685,"caption":1686,"capturedAt":1687,"route":1688},"\u002Fcycles\u002Fqmap\u002Fc3-dash.png","hero",18,"Dash style (default), spin frozen","2026-08-16T03:06:59.862Z","\u002Fexperiments\u002Fc3.data-flows\u002F",{"src":1690,"kind":1684,"order":1691,"caption":1692,"capturedAt":1687,"route":1688},"\u002Fcycles\u002Fqmap\u002Fc3-line.png",19,"Plain line flows",{"src":1694,"kind":1684,"order":1695,"caption":1696,"capturedAt":1687,"route":1688},"\u002Fcycles\u002Fqmap\u002Fc3-pulse.png",20,"Pulse style",{"src":17,"kind":1684,"order":1698,"caption":1699,"capturedAt":1687,"route":1688},21,"Arrow style",{"src":1701,"kind":1684,"order":1702,"caption":1703,"capturedAt":1687,"route":1688},"\u002Fcycles\u002Fqmap\u002Fc3-glow.png",22,"Glow style",{"src":1705,"kind":1684,"order":1706,"caption":1707,"capturedAt":1687,"route":1688},"\u002Fcycles\u002Fqmap\u002Fc3-flat.png",23,"Curve 0 — flows hug the ground",{"src":1709,"kind":1684,"order":1710,"caption":1711,"capturedAt":1687,"route":1688},"\u002Fcycles\u002Fqmap\u002Fc3-ballistic.png",24,"Curve 4, thickness 3 — heavy arcs",{"src":1713,"kind":1684,"order":1714,"caption":1715,"capturedAt":1687,"route":1688},"\u002Fcycles\u002Fqmap\u002Fc3-fast.png",25,"Speed cranked — traffic urgency",{"src":1717,"kind":1718,"order":1719},"\u002Fcycles\u002Fqmap\u002Fc3.outcomes.png","legacy",100,[],[1722],{"route":1688,"href":8},1794599444957]