From d8cb99a958c7434d51bbe49e8a248da474326e6e Mon Sep 17 00:00:00 2001 From: Scout Date: Fri, 18 Sep 2026 00:20:02 +0000 Subject: [PATCH] Add Physical build-up tab: chip -> server -> rack -> data-center hall - New Physical build-up tab next to Compute scale with 4 stages: chip recap, GPU server (chassis, board, 2 CPU sockets, DDR5, 8 GPUs, DPU, NVMe, fan wall, PSUs, BMC), 42U rack (servers, ToR, PDUs, CDU), data-center hall (rack rows, spine, power/cooling/network plants) - Data-center power/cooling/network layers toggleable with animated paths - Labeled components, hover tooltips, click-to-pin details, component manifest, ELI5/15/Pro/Expert depths wired to global setLevel - Schematic disclosure: sizes/counts/specs illustrative, not to scale - Mobile layout; zero console errors --- chips/index.html | 694 +++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 694 insertions(+) diff --git a/chips/index.html b/chips/index.html index 5ef542b..b716e70 100644 --- a/chips/index.html +++ b/chips/index.html @@ -83,6 +83,11 @@ padding:8px 12px;font-size:.8rem;backdrop-filter:blur(6px)} #tip b{display:block;font-size:.85rem;margin-bottom:2px} #tip .tag{font-size:.65rem;text-transform:uppercase;letter-spacing:.1em} +/* hover tooltip for the physical build-up stage */ +#build-tip{position:absolute;z-index:20;pointer-events:none;display:none;max-width:250px; + background:rgba(20,17,13,.94);border:1px solid var(--line);border-radius:10px; + padding:8px 12px;font-size:.8rem;backdrop-filter:blur(6px)} +#build-tip b{display:block;font-size:.85rem;margin-bottom:2px} /* pinned detail card — overlays stage, never displaces it */ #pin{position:absolute;z-index:15;right:22px;bottom:158px;width:min(340px,calc(100vw - 44px)); background:rgba(30,25,19,.96);border:1px solid var(--line);border-radius:var(--radius); @@ -218,6 +223,33 @@ font-size:.85rem;color:var(--muted);line-height:1.55} .scale-contrast b{color:var(--accent);font-weight:600} #scale-fallback{display:none;padding:40px 20px;text-align:center;color:var(--muted)} +/* ============ scale: physical build-up tab ============ */ +#scale-tabs{margin-bottom:18px} +#build-pills{margin-bottom:18px;flex-wrap:wrap;width:fit-content;max-width:100%} +#build-scene{display:block;width:100%;height:440px} +.build-note{font-size:.75rem;color:var(--muted);margin:10px 2px 0} +@media(max-width:700px){#build-scene{height:320px}} +#build-labels{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:5} +#build-labels .label{font-size:10px} +#build-fallback{display:none;padding:40px 20px;text-align:center;color:var(--muted)} +#build-pin{margin:0 0 12px;padding:10px 14px;border:1px solid var(--line);border-radius:10px; + background:rgba(217,164,65,.06);font-size:.85rem;line-height:1.5;display:none} +#build-pin.show{display:block} +#build-pin b{color:var(--accent)} +.manifest{margin:0 0 14px;display:flex;flex-direction:column;gap:7px;max-height:300px;overflow-y:auto} +.mitem{border:1px solid var(--line);border-radius:10px;padding:8px 12px;font-size:.82rem; + cursor:pointer;transition:border-color .2s,background .2s} +.mitem b{display:block;font-size:.85rem;margin-bottom:2px} +.mitem span{color:var(--muted);line-height:1.45} +.mitem:hover{border-color:var(--accent)} +.mitem.on{border-color:var(--accent);background:rgba(217,164,65,.07)} +.mitem.off{display:none} +#build-layers{flex-wrap:wrap;width:fit-content;max-width:100%} +.seg .ybtn.on[data-layer="power"]{background:#d9a441;color:#14110d;font-weight:700} +.seg .ybtn.on[data-layer="cooling"]{background:#2dd4bf;color:#14110d;font-weight:700} +.seg .ybtn.on[data-layer="network"]{background:#5aa2ff;color:#14110d;font-weight:700} +.seg .ybtn:not(.on){opacity:.45} +.build-jump{display:inline-block;margin-top:4px;font-size:.82rem;color:var(--accent);text-decoration:none} @media(max-width:700px){ .stage-hero{min-height:560px} .ovl-title{top:8px;left:12px;right:12px;max-width:none} @@ -377,6 +409,11 @@

Scale

From one box to a data center

The same three chips, wired four ways. Watch the links change as you zoom out — and notice the moment the network stops being plumbing and becomes the computer.

+
+ + +
+
@@ -400,6 +437,38 @@

+
+ @@ -509,6 +578,7 @@

Provenance

if (lastVChange && window.renderVChange) window.renderVChange(lastVChange.chip, lastVChange.oldV, lastVChange.v); if (window.renderFlow) window.renderFlow(); if (window.renderScale) window.renderScale(); + if (window.renderBuild) window.renderBuild(); } document.querySelectorAll('.lbtn').forEach(function(b){ b.addEventListener('click', function(){ setLevel(b.getAttribute('data-lvl')); }); @@ -3484,6 +3554,630 @@

Provenance

sizeScale(); buildScale(); renderScaleCap(); })(); +/* ============ scale: physical build-up tab ============ */ +(function(){ + var canvas = document.getElementById('build-scene'); + var labelLayer = document.getElementById('build-labels'); + var buildKey = 'chip'; + var layersOn = {power:true, cooling:true, network:true}; + + function esc(s){ return String(s).replace(/&/g,'&').replace(/The through-line: nothing new gets invented above this level — servers, racks, and halls are just these three chips, repackaged with more power, more cooling, and more network.', + cap:{ + eli5:'Three kinds of silicon are the ingredients for everything above: CPUs do the thinking, GPUs do the math, DPUs do the talking. Scroll up to take them apart — then come back and watch them become a server.', + fifteen:'The bill of materials starts with three chip classes: a host CPU for control, GPUs for parallel math, and a DPU that owns the network. Every server, rack, and data center below is just these three, packaged and powered at increasing scale.', + pro:'The physical stack-up starts at the die: host CPU (control plane), accelerators (data plane), DPU (network/storage offload). Packaging, power delivery, and thermals are solved once per chip — then re-solved at every level above.', + expert:'Chip → package → board → chassis → rack → hall: each level re-solves power, cooling, and interconnect with ~10× the budget of the last. The DPU exists because the network problem outgrew the host CPU at the server level and never looked back.'}, + legend:'CPUGPUDPU', + cam:{pos:[0,11,23], tgt:[0,0.5,0]}, + jump:true, + manifest:[ + {part:'cpu-pkg', name:'CPU package', w:{ + eli5:'The boss chip: runs the operating system and tells everyone what to do.', + fifteen:'Host processor: runs the OS, drivers, and orchestration; feeds work to the GPUs.', + pro:'Control plane: the host CPU runs the OS and job scheduler; every GPU kernel is launched from here.', + expert:'Host CPU: control plane + PCIe root complex. Kept out of the data path by design — the DPU takes the network so the host never becomes the bottleneck.'}}, + {part:'gpu-pkg', name:'GPU package', w:{ + eli5:'The muscle: does thousands of math problems at the same time.', + fifteen:'Parallel math engine: thousands of cores crunching the matrix math behind AI.', + pro:'Data plane: ~100+ TFLOPS of dense math per GPU — the reason the whole server exists.', + expert:'Accelerator: tensor cores, HBM3, NVLink. ~700 W each — the thermal and power design center of every level above.'}}, + {part:'dpu-pkg', name:'DPU package', w:{ + eli5:'The mailman: handles all the talking so the boss can keep thinking.', + fifteen:'Infrastructure processor: owns networking, storage, and security offload.', + pro:'Infrastructure offload: RDMA, encryption, and storage — off the host CPU and off the critical path.', + expert:'DPU/IPU: a data-plane OS for the fabric. One per node is the tax for cluster-scale training.'}}], + build:function(){ + var boxes=[B(0,-0.25,0, 22,0.5,11, BOARDC)]; + boxes.push(B(-7,0.35,0, 4.6,0.4,4.6, 0x8a5a2e,'cpu-pkg','CPU — the thinker')); + [[-1.15,-1.15],[1.15,-1.15],[-1.15,1.15],[1.15,1.15]].forEach(function(o){ + boxes.push(B(-7+o[0],0.85,o[1], 1.5,0.5,1.5, CPUC,'cpu-ccd')); }); + boxes.push(B(-7,0.85,0, 1.3,0.5,1.3, 0xc47b3a,'cpu-iod')); + boxes.push(B(0,0.35,0, 5.2,0.4,4.2, 0x2a6b5e,'gpu-pkg','GPU — the muscle')); + boxes.push(B(0,0.9,0, 2.8,0.55,2.8, GPUC,'gpu-die')); + [[-1.85,-1.35],[1.85,-1.35],[-1.85,1.35],[1.85,1.35]].forEach(function(o){ + boxes.push(B(o[0],0.9,o[1], 1.0,0.55,1.0, 0x3fd0a8,'gpu-hbm')); }); + boxes.push(B(7,0.35,0, 4.2,0.4,3.6, 0x3a5a8a,'dpu-pkg','DPU — the talker')); + boxes.push(B(7,0.9,0, 2.2,0.55,2.2, DPUC,'dpu-soc')); + boxes.push(B(6.2,0.9,2.25, 1.0,0.55,0.7, TORC,'dpu-qsfp')); + boxes.push(B(7.8,0.9,2.25, 1.0,0.55,0.7, TORC,'dpu-qsfp')); + return {boxes:boxes, links:[]}; + }}, + server:{ + name:'2 · Server — one GPU machine', + stats:['2 CPUs','8 GPUs','1 DPU','1+1 PSUs'], + contrast:'Why it looks like this: the GPUs are the furnace and the paycheck — everything else (power, cooling, memory bandwidth) is sized so they never wait.', + cap:{ + eli5:'A pizza-box computer stuffed with parts: two CPUs in charge, memory sticks feeding them, eight GPUs doing the heavy math, a DPU handling all the talking, fans blowing the heat out, and two power supplies in case one dies. Click any part.', + fifteen:'A 4U GPU server: dual CPUs, banks of DDR5, eight GPUs on a baseboard, a DPU for networking, NVMe for fast storage, a fan wall for airflow, and redundant PSUs. Click any part to see why it is there.', + pro:'The standard AI building block: 2× host CPUs, DDR5 banks, 8 GPUs on an NVLink baseboard, a DPU owning storage and fabric, NVMe bays, N+1 fans, 1+1 PSUs, and a BMC for out-of-band management. Every part below exists to keep the GPUs fed.', + expert:'4U node: dual-socket host, 12-ch DDR5 per socket, 8× SXM GPUs on NVSwitch, DPU for GPUDirect storage + RDMA, U.2 NVMe, counter-rotating fan wall, 1+1 titanium PSUs, BMC/Redfish. Power and thermals are sized for worst-case all-reduce, not average load.'}, + legend:'PCIe Gen5CPUGPUDPU', + cam:{pos:[0,15,25], tgt:[0,0.8,0]}, + manifest:[ + {part:'srv-chassis', name:'4U chassis', w:{ + eli5:'The metal box that holds everything and slides into the closet.', + fifteen:'19-inch rack-mount enclosure — the mechanical and airflow unit.', + pro:'4U chassis: structural, EMI, and airflow boundary; hot-swap sled design.', + expert:'4U chassis: defines the rack-unit math, airflow impedance, and front/rear service model.'}}, + {part:'srv-board', name:'Motherboard', w:{ + eli5:'The big green board everything plugs into.', + fifteen:'Mainboard: routes power and signals between CPU, memory, and PCIe slots.', + pro:'12+ layer PCB carrying PCIe Gen5, DDR5, and power planes.', + expert:'High-layer-count PCB; Gen5/CXL signal integrity at these trace lengths is a first-order constraint.'}}, + {part:'srv-socket', name:'2× CPU sockets', w:{ + eli5:'Two boss chips instead of one, so nothing waits for instructions.', + fifteen:'Dual-socket host: more cores, more memory channels, more PCIe lanes.', + pro:'2× sockets: doubles the memory bandwidth and PCIe lanes feeding the GPUs.', + expert:'Dual NUMA nodes; GPU affinity to the nearest socket avoids cross-NUMA PCIe hops.'}}, + {part:'srv-dimm', name:'DDR5 DIMMs', w:{ + eli5:'The desk the boss works on — fast, but small.', + fifteen:'System memory: banks of DDR5 feeding the CPUs.', + pro:'12 channels per socket of DDR5; host memory stages data for the GPUs.', + expert:'DDR5 RDIMMs; capacity for datasets and checkpoints, bandwidth for host-side preprocessing.'}}, + {part:'srv-gpu', name:'8× GPUs', w:{ + eli5:'Eight muscle chips doing the AI math together.', + fifteen:'The compute: 8 GPUs fully meshed — where training actually happens.', + pro:'8× SXM GPUs on NVLink/NVSwitch: the training engine; ~5.6 kW of the power budget.', + expert:'8-GPU NVL domain: HBM capacity sets max model size, NVLink bisection sets all-reduce speed.'}}, + {part:'srv-dpu', name:'DPU card', w:{ + eli5:'The mailman card: all network and storage talk goes through here.', + fifteen:'Offloads networking, storage, and encryption from the CPUs.', + pro:'GPUDirect storage + RDMA with zero host-CPU involvement.', + expert:'High-speed NIC with data-path OS; isolates noisy infrastructure from the training job.'}}, + {part:'srv-nvme', name:'NVMe bays', w:{ + eli5:'Super-fast filing cabinets for data and saved work.', + fifteen:'Fast local storage: datasets, checkpoints, logs.', + pro:'U.2 NVMe: checkpoint writes must never stall training.', + expert:'Gen5 NVMe; checkpoint bandwidth sized so multi-GB dumps finish in seconds.'}}, + {part:'srv-fan', name:'Fan wall', w:{ + eli5:'Big fans blowing the hot air out the back.', + fifteen:'Counter-rotating fans pulling air front-to-back across the GPUs.', + pro:'N+1 fan wall: ~5 kW of heat has to leave the box somehow.', + expert:'Hot-swap counter-rotating fans; static pressure sized for dense fin stacks.'}}, + {part:'srv-psu', name:'Redundant PSUs', w:{ + eli5:'Two plugs, so the computer stays on if one breaks.', + fifteen:'1+1 power supplies: one can fail with zero downtime.', + pro:'Titanium 1+1 PSUs: ~5–8 kW per server, no single point of failure.', + expert:'CRPS titanium, 1+1; hold-up time rides through transfer-switch events.'}}, + {part:'srv-bmc', name:'BMC', w:{ + eli5:'A tiny helper chip that lets engineers fix the server from far away.', + fifteen:'Baseboard management controller: remote power, console, sensors.', + pro:'Out-of-band management: Redfish/IPMI even when the host is down.', + expert:'BMC/Redfish: fleet telemetry, firmware, and power capping across 10k+ nodes.'}}], + build:function(){ + var boxes=[ + B(0,0.2,0, 16,0.4,10, 0x23262c,'srv-chassis','4U chassis'), + B(-7.9,1.5,0, 0.25,2.6,10, 0x2e3238), B(7.9,1.5,0, 0.25,2.6,10, 0x2e3238), + B(-0.8,0.55,0, 13,0.18,8.8, PCBC,'srv-board','Motherboard'), + B(-4.9,1.05,-2.3, 1.9,0.75,1.9, CPUC,'srv-socket','2× CPU sockets'), + B(-4.9,1.05,2.3, 1.9,0.75,1.9, CPUC,'srv-socket'), + B(6.1,1.15,0, 1.7,1.15,2.8, DPUC,'srv-dpu','DPU'), + B(-2.9,1.1,4.35, 2.5,1.25,1.3, PSC,'srv-psu','Redundant PSUs'), + B(2.9,1.1,4.35, 2.5,1.25,1.3, PSC,'srv-psu'), + B(-0.8,0.8,3.95, 0.95,0.3,0.95, SWC,'srv-bmc','BMC')]; + [-6.6,-3.2].forEach(function(x){ + for(var i=0;i<6;i++){ + var z=-2.5+i*1.0; + boxes.push(B(x,1.15,z, 0.32,1.3,0.55, DIMMC,'srv-dimm',(x===-6.6&&i===0)?'DDR5 DIMMs':null)); + }}); + [0.4,3.2].forEach(function(x){ + [-3.4,-1.15,1.15,3.4].forEach(function(z){ + boxes.push(B(x,1.2,z, 2.3,1.35,1.95, GPUC,'srv-gpu',(x===0.4&&z===-3.4)?'8× GPUs':null)); + });}); + for(var n=0;n<4;n++) boxes.push(B(-1.6+n*1.05,0.95,-4.35, 0.85,0.85,0.55, PSC,'srv-nvme',n===0?'NVMe bays':null)); + for(var f=0;f<6;f++) boxes.push(B(-1.1,1.35,-3.5+f*1.4, 0.75,1.9,1.15, FANC,'srv-fan',f===0?'Fan wall':null)); + var links=[ + LK([-4.9,1.45,-2.3],[0.4,1.9,-3.4],'pcie'), LK([-4.9,1.45,-2.3],[0.4,1.9,-1.15],'pcie'), + LK([-4.9,1.45,2.3],[0.4,1.9,1.15],'pcie'), LK([-4.9,1.45,2.3],[0.4,1.9,3.4],'pcie'), + LK([-4.9,1.45,0],[6.1,1.75,0],'pcie')]; + return {boxes:boxes, links:links}; + }}, + rack:{ + name:'3 · Rack — 42U of servers', + stats:['42U','4 GPU servers','32 GPUs','ToR leaf switch'], + contrast:'The step change: inside the rack, traffic is one hop. The moment a packet leaves the ToR, it pays the oversubscription tax — this is where “the network” first becomes a real thing.', + cap:{ + eli5:'A tall metal closet holding several pizza-box computers. A switch at the top connects them all, power strips run down the sides, and a water box cools the hottest ones.', + fifteen:'The 42U rack: four GPU servers, a top-of-rack switch tying them together, PDUs feeding power down both sides, and a CDU circulating coolant for liquid-cooled sleds.', + pro:'Rack = power + cooling + network + failure domain. 4 GPU sleds, ToR leaf switch, dual PDUs, cable management, and a CDU for direct-to-chip liquid cooling. The ToR uplinks are the first oversubscription point in the fabric.', + expert:'42U, ~30–100 kW per AI rack: dual power feeds, in-rack CDUs for DLC, ToR leaf with 400G+ uplinks. One ToR or PDU failure takes the rack — jobs checkpoint accordingly.'}, + legend:'Network (IB)PowerCooling', + cam:{pos:[0,12,27], tgt:[0,7,0]}, + manifest:[ + {part:'rack-frame', name:'42U frame', w:{ + eli5:'The tall metal closet everything bolts into.', + fifteen:'Standard 19-inch, 42-unit frame: the unit of floor planning.', + pro:'42U EIA frame: defines density, weight limits (over a ton loaded), and airflow.', + expert:'42U/48U; floor loading, seismic bracing, and aisle containment all key off this box.'}}, + {part:'rack-server', name:'GPU servers ×4', w:{ + eli5:'Four pizza-box computers stacked up.', + fifteen:'4 GPU sleds = 32 GPUs per rack.', + pro:'Compute density: 32 GPUs sharing power, cooling, and one ToR.', + expert:'4× 8-GPU sleds; the rack is the unit of deployment, power provisioning, and failure.'}}, + {part:'rack-tor', name:'ToR leaf switch', w:{ + eli5:'The hallway switch connecting the four computers.', + fifteen:'Top-of-rack switch: every server plugs in here; uplinks go to the spines.', + pro:'Leaf switch: first aggregation point; uplink oversubscription starts here.', + expert:'ToR leaf, 400/800G; ECMP across uplinks, DCQCN for congestion. One ToR = one failure domain.'}}, + {part:'rack-pdu', name:'PDUs', w:{ + eli5:'Giant power strips running down the sides.', + fifteen:'Power distribution units: metered outlets feeding every sled.', + pro:'Dual PDUs (A/B feeds): per-outlet metering and remote switching.', + expert:'Intelligent PDUs: per-phase metering, A/B redundancy, branch-circuit monitoring.'}}, + {part:'rack-cable', name:'Cable management', w:{ + eli5:'Tidy trays so the wires never become spaghetti.', + fifteen:'Cable arms and trays: serviceability without unplugging the rack.', + pro:'Structured cabling: bend radius and airflow matter at 400G.', + expert:'Fiber bend radius and copper weight add up; sloppy cabling measurably hurts airflow and repair time.'}}, + {part:'rack-cdu', name:'CDU — liquid cooling', w:{ + eli5:'A water box that carries heat away from the hottest computers.', + fifteen:'Coolant distribution unit: pumps facility water to cold plates in the sleds.', + pro:'In-rack CDU: isolates the facility water loop from the electronics loop.', + expert:'CDU: heat exchanger + N+1 pumps; the air-to-liquid handoff that makes 100 kW racks possible.'}}], + build:function(){ + var boxes=[B(0,-0.25,0, 12,0.5,7, 0x14161a)]; + [[-4.3,-2.4],[4.3,-2.4],[-4.3,2.4],[4.3,2.4]].forEach(function(o,i){ + boxes.push(B(o[0],10.5,o[1], 0.35,21,0.35, RAILC,'rack-frame',i===0?'42U frame':null)); }); + var sledY=[3.2,5.6,8.0,10.4], links=[]; + sledY.forEach(function(y,i){ + boxes.push(B(0,y,0, 8,1.9,4.4, 0x1d5f5c,'rack-server',i===0?'4× GPU servers':null)); + links.push(LK([0,y+0.95,1.8],[0,12.6,1.4],'ib')); }); + boxes.push(B(0,13.2,0, 8,1.2,3.2, TORC,'rack-tor','ToR leaf switch')); + boxes.push(B(-4.3,10.5,1.2, 0.6,18,0.9, 0x8a6a2f,'rack-pdu','PDUs')); + boxes.push(B(4.3,10.5,1.2, 0.6,18,0.9, 0x8a6a2f,'rack-pdu')); + boxes.push(B(0,12.2,2.8, 8,0.35,0.9, 0x2e3238,'rack-cable','Cable management')); + boxes.push(B(6.2,2.2,0, 2.2,4.4,3.2, 0x1f8a8a,'rack-cdu','CDU — liquid cooling')); + links.push(LK([-4.3,18,1.2],[-3.5,11,1.2],'power')); + links.push(LK([4.3,18,1.2],[3.5,11,1.2],'power')); + links.push(LK([5.1,3,0],[3,4,0],'cool')); + links.push(LK([5.1,3,2],[3,8,2],'cool')); + return {boxes:boxes, links:links}; + }}, + dc:{ + name:'4 · Data center — the hall', + stats:['10s of MW','N+1 everywhere','3 lifelines'], + contrast:'The punchline: the chips are the smallest line item. Power, cooling, and networking — and the redundancy for each — are what a data center actually is.', + cap:{ + eli5:'A warehouse full of closets, with its own backup power, giant air conditioners, and water pipes — because thousands of GPUs make as much heat as a small town. Toggle the Power, Cooling, and Network buttons to see each lifeline.', + fifteen:'The hall: rows of racks under spine switches, kept alive by three lifelines — power (utility, generators, UPS), cooling (chillers, towers, CRAH, liquid loops), and network (spine-leaf fabric, core routers, fiber to other halls). Toggle each layer to see what it takes.', + pro:'A training hall is three infrastructures sharing a building: power (utility → substation → UPS → generators → busway → rack PDUs), cooling (chillers → towers → CRAH/CDU → liquid loops), and network (spine-leaf → core routers → inter-hall fiber). Each is sized for the hall at full load, with N+1 redundancy.', + expert:'AI hall design: tens of MW, low PUE with liquid cooling, 2N UPS + N+1 gens, N+1 chillers and CRAH, non-blocking fat-tree with ECMP + DCQCN. Toggle the layers: every box is a single point of failure that money was spent to duplicate.'}, + legend:'PowerCoolingNetwork', + cam:{pos:[0,21,42], tgt:[0,2,0]}, + hasLayers:true, + manifest:[ + {part:'dc-rack', name:'Rack rows', w:{ + eli5:'Rows of closets, all humming together.', + fifteen:'Rows of GPU racks: the compute floor.', + pro:'Compute rows: hot/cold aisle layout, ~30–100 kW per rack.', + expert:'Rack rows on 600 mm tiles; containment, floor loading, and cable trays planned per row.'}}, + {part:'dc-spine', name:'Spine switches', w:{ + eli5:'The big switches connecting all the closet switches.', + fifteen:'Spine layer: every ToR connects to every spine — two hops anywhere.', + pro:'Spine switches: the fat-tree core; bisection bandwidth lives here.', + expert:'High-radix spines, non-blocking within the pod; the priciest cables in the building terminate here.'}}, + {part:'dc-utility', name:'Utility feed', layer:'power', w:{ + eli5:'The giant plug from the city power grid.', + fifteen:'Grid connection: tens of megawatts from the utility.', + pro:'Utility feed: dual substations, MW-scale service entrance.', + expert:'Often 2N feeds from separate substations; power availability gates site selection.'}}, + {part:'dc-sub', name:'Substation', layer:'power', w:{ + eli5:'Steps the city power down to a size the building can use.', + fifteen:'On-site substation: transforms transmission voltage down.', + pro:'Substation: MV→LV transformation, switchgear, protection.', + expert:'Dedicated substation: the most expensive long-lead item on site.'}}, + {part:'dc-ups', name:'UPS room', layer:'power', w:{ + eli5:'Giant batteries that keep everything on during a blackout.', + fifteen:'Uninterruptible power: bridging the gap until generators start.', + pro:'UPS: rides through sags and the generator start gap.', + expert:'Battery/flywheel UPS at 2N; sized for full hall load during transfer.'}}, + {part:'dc-gen', name:'Diesel generators', layer:'power', w:{ + eli5:'Backup engines that roar to life if the city power dies.', + fifteen:'On-site generators: full hall power for days.', + pro:'N+1 gensets: on-site fuel for extended outages; tested monthly under load.', + expert:'N+1 diesel; the reason training survives grid events. Fuel logistics is a real ops discipline.'}}, + {part:'dc-bus', name:'Busway', layer:'power', w:{ + eli5:'Power highways running above the closets.', + fifteen:'Overhead busway: tap-off boxes feed each rack row.', + pro:'Busway: flexible MW distribution; racks tap in anywhere.', + expert:'Busbar trunking: rows re-provisioned without pulling new conduit.'}}, + {part:'dc-chiller', name:'Chillers', layer:'cooling', w:{ + eli5:'Giant fridges that make cold water.', + fifteen:'Chillers: the refrigeration plant making chilled water.', + pro:'Chiller plant: N+1, the thermodynamic heart of the site.', + expert:'Centrifugal chillers; a chiller failure is a site-level event.'}}, + {part:'dc-tower', name:'Cooling towers', layer:'cooling', w:{ + eli5:'Big steamy boxes that dump heat into the sky.', + fifteen:'Towers reject heat to the atmosphere by evaporating water.', + pro:'Cooling towers: evaporative heat rejection; water usage is the trade.', + expert:'Open towers: approach temperature sets chiller lift; water treatment is an ops reality.'}}, + {part:'dc-crah', name:'CRAH units', layer:'cooling', w:{ + eli5:'Room-sized air conditioners blowing cold air at the closets.', + fifteen:'Computer-room air handlers: chilled-water coils + fans per row.', + pro:'CRAH: sensible cooling for air-cooled racks; N+1 per row.', + expert:'CRAH with EC fans; containment + placement decides bypass airflow.'}}, + {part:'dc-cdu', name:'Row CDUs', layer:'cooling', w:{ + eli5:'Water boxes for each row of hot closets.', + fifteen:'Row-level coolant distribution for liquid-cooled racks.', + pro:'Row CDUs: facility-water to technology-water handoff per row.', + expert:'Row CDUs enable 100 kW+ racks; leak detection and isolation valves per row.'}}, + {part:'dc-core', name:'Core routers', layer:'network', w:{ + eli5:'The front doors where data enters and leaves the building.', + fifteen:'Core/border routers: connect the hall to the outside world.', + pro:'Border routers: peering, ingress/egress, DDoS scrubbing.', + expert:'Core: BGP peering, optical transport; the hall is an AS on the internet.'}}, + {part:'dc-hallb', name:'Hall B — fiber interconnect', layer:'network', w:{ + eli5:'A second warehouse across the yard, joined by threads of light.', + fifteen:'Second hall linked by fiber: campuses scale hall by hall.', + pro:'Inter-hall fiber (DCI): jobs can span halls at a latency cost.', + expert:'DCI: DWDM fiber between halls; cross-hall all-reduce is budgeted like a WAN.'}}], + build:function(){ + var boxes=[B(0,-0.3,0, 48,0.6,34, 0x14161a)]; + [-15,-5,5,15].forEach(function(x){ + [-5,5].forEach(function(z){ + boxes.push(B(x,2.2,z, 6,4.4,4.2, RACKC,'dc-rack',(x===-15&&z===-5)?'Rack rows (8 shown)':null)); }); }); + boxes.push(B(-4,7.5,-10, 3.2,1.3,2.2, SWC,'dc-spine','Spine switches')); + boxes.push(B(4,7.5,-10, 3.2,1.3,2.2, SWC,'dc-spine')); + /* power */ + boxes.push(B(-22,1.6,8, 2.2,3.2,2.2, PWC,'dc-utility','Utility feed','power')); + boxes.push(B(-18,1.3,8, 3.2,2.6,3.2, PWC,'dc-sub','Substation','power')); + boxes.push(B(-13.5,1.1,10, 2.6,2.2,2.6, PWC,'dc-gen','Diesel generators','power')); + boxes.push(B(-10,1.1,10, 2.6,2.2,2.6, PWC,'dc-gen',null,'power')); + boxes.push(B(-5.5,1.3,8, 3.4,2.6,2.8, PWC,'dc-ups','UPS room','power')); + boxes.push(B(0,6.8,0, 42,0.4,0.7, PWC,'dc-bus','Busway','power')); + /* cooling */ + boxes.push(B(15,1.3,11, 3.2,2.6,2.8, CLC,'dc-chiller','Chillers','cooling')); + boxes.push(B(19,1.3,11, 3.2,2.6,2.8, CLC,'dc-chiller',null,'cooling')); + boxes.push(B(22.5,2,7, 2.6,4,2.6, CLC,'dc-tower','Cooling towers','cooling')); + [-12,0,12].forEach(function(x){ + boxes.push(B(x,1.6,-14.5, 3.2,3.2,1.6, CLC,'dc-crah',x===-12?'CRAH units':null,'cooling')); }); + boxes.push(B(11,1.1,4, 2.2,2.2,2.2, CLC,'dc-cdu','Row CDUs','cooling')); + /* network */ + boxes.push(B(-4,2.2,-14.5, 3.2,2.2,2.2, NTC,'dc-core','Core routers','network')); + boxes.push(B(4,2.2,-14.5, 3.2,2.2,2.2, NTC,'dc-core',null,'network')); + boxes.push(B(0,0.8,17, 22,0.35,9, 0x1a2030,'dc-hallb','Hall B — fiber interconnect','network')); + var links=[ + LK([-20.9,2.5,8],[-19.6,2,8],'power','power'), + LK([-16.4,2,8],[-14.8,1.8,10],'power','power'), + LK([-12.2,1.8,10],[-7.2,2,8],'power','power'), + LK([-8.7,1.8,10],[-7.2,2,8],'power','power'), + LK([-3.8,2.2,8],[-1,6.8,2],'power','power'), + LK([-8,6.8,0],[-8,4.6,-3],'power','power'), + LK([8,6.8,0],[8,4.6,3],'power','power'), + LK([16.6,2,11],[21.2,2.5,8],'cool','cooling'), + LK([15,2.4,9.6],[12,2.5,4.5],'cool','cooling'), + LK([0,3.2,-13.7],[0,3,-7],'cool','cooling'), + LK([-12,3.2,-13.7],[-12,3,-7],'cool','cooling'), + LK([11,2.2,2.9],[8,2.5,3.2],'cool','cooling'), + LK([-4,8.2,-10],[-4,3.3,-13.4],'net','network'), + LK([4,8.2,-10],[4,3.3,-13.4],'net','network'), + LK([-4,2.5,-13.4],[-4,1,12.5],'net','network'), + LK([4,2.5,-13.4],[4,1,12.5],'net','network')]; + return {boxes:boxes, links:links}; + }} + }; + + var renderer, scene, camera, root, pktPts, packets=[], labels=[], partMats={}, clickables=[], clock; + var rotY=0, dragging=false, lx=0, ly=0, moved=0, zoom=1; + var camBase={pos:[0,11,23], tgt:[0,0.5,0]}; + + function disposeObj(o){ + o.traverse(function(n){ + if(n.geometry) n.geometry.dispose(); + if(n.material){ (Array.isArray(n.material)?n.material:[n.material]).forEach(function(m){ m.dispose(); }); } + }); + } + function clearLabels(){ labelLayer.innerHTML=''; labels=[]; } + + function findManifest(part){ + var m=STAGES[buildKey].manifest; + for(var i=0;i'+esc(it.name)+''+esc(it.w[LEVEL]||it.w.pro)+''; + }); + document.getElementById('build-manifest').innerHTML=html; + Array.prototype.forEach.call(document.querySelectorAll('#build-manifest .mitem'), function(el){ + el.addEventListener('click', function(){ + var p=el.getAttribute('data-part'); + pinPart(p); pulsePart(p); + }); + }); + } + function pinPart(part){ + var pin=document.getElementById('build-pin'), item=part&&findManifest(part); + if(!item){ pin.classList.remove('show'); pin.innerHTML=''; + Array.prototype.forEach.call(document.querySelectorAll('#build-manifest .mitem'), function(x){ x.classList.remove('on'); }); + return; } + pin.innerHTML=''+esc(item.name)+' — '+esc(item.w[LEVEL]||item.w.pro); + pin.classList.add('show'); + Array.prototype.forEach.call(document.querySelectorAll('#build-manifest .mitem'), function(x){ + x.classList.toggle('on', x.getAttribute('data-part')===part); }); + } + function pulsePart(part){ + (partMats[part]||[]).forEach(function(mt){ + mt.emissive=new THREE.Color(0xd9a441); mt.emissiveIntensity=2.2; + setTimeout(function(){ mt.emissiveIntensity=0; }, 750); + }); + } + function renderBuildCap(){ + var st=STAGES[buildKey]; + document.getElementById('build-name').textContent=st.name; + document.getElementById('build-why').innerHTML=esc(st.cap[LEVEL]||st.cap.pro)+ + (st.jump?' ↑ Explore the chips up close':''); + document.getElementById('build-stats').innerHTML=st.stats.map(function(s){ return ''+esc(s)+''; }).join(''); + document.getElementById('build-contrast').innerHTML=st.contrast; + document.getElementById('build-legend').innerHTML=st.legend; + document.getElementById('build-layers').style.display=st.hasLayers?'flex':'none'; + pinPart(null); + renderManifest(); + } + window.renderBuild=function(){ renderBuildCap(); }; + + function buildPackets(curves){ + if(pktPts){ root.remove(pktPts); pktPts.geometry.dispose(); pktPts.material.dispose(); pktPts=null; } + packets=[]; + var vis=curves.filter(function(c){ return c.visible; }); + var per=3, n=vis.length*per; + if(!n) return; + var pos=new Float32Array(n*3), col=new Float32Array(n*3), ci=0; + vis.forEach(function(c){ + var cc=new THREE.Color(LINKC[c.userData.type]); + for(var i=0;i'+esc(item.w[LEVEL]||item.w.pro); + btip.style.display='block'; + btip.style.left=Math.min(e.clientX-r.left+16, r.width-260)+'px'; + btip.style.top=(e.clientY-r.top+14)+'px'; + canvas.style.cursor='pointer'; + } else { btip.style.display='none'; canvas.style.cursor='grab'; } + }); + } + canvas.addEventListener('pointerleave', function(){ btip.style.display='none'; }); + + var v3=new THREE.Vector3(), tmpV=new THREE.Vector3(); + (function animateBuild(){ + requestAnimationFrame(animateBuild); + if(!canvas.clientWidth) return; + var dt=Math.min(.05, clock.getDelta()); + if(!dragging) rotY+=dt*0.1; + root.rotation.y=rotY; + if(pktPts){ + var arr=pktPts.geometry.attributes.position.array; + for(var i=0;i1||v3.z<-1){ L.el.style.display='none'; return; } + L.el.style.left=((v3.x*0.5+0.5)*w)+'px'; + L.el.style.top=((-v3.y*0.5+0.5)*h)+'px'; + }); + renderer.render(scene,camera); + })(); + sizeBuild(); buildBuild(); +})(); + resize(); animate(); })();