No usable records remain after excluding rows without a valid month.

'; legendEl.innerHTML=''; modesEl.innerHTML=''; return; } // ---- corridor meta + totals (totals used only to derive a FIXED biggest->smallest order) ---- const corridorMap=new Map(); for(const r of rows){ if(!corridorMap.has(r.corridor)){ corridorMap.set(r.corridor,{corridor:r.corridor,stack_order:r.stack_order,is_other:r.is_other, origin_region:r.origin_region,destination_region:r.destination_region,total:0}); } else { const c=corridorMap.get(r.corridor); if(r.origin_region&&!c.origin_region) c.origin_region=r.origin_region; if(r.destination_region&&!c.destination_region) c.destination_region=r.destination_region; if(isFinite(r.stack_order)&&r.stack_order{ const ao=(a.is_other||a.corridor==='Other')?1:0; const bo=(b.is_other||b.corridor==='Other')?1:0; if(ao!==bo) return ao-bo; if(b.total!==a.total) return b.total-a.total; return a.stack_order-b.stack_order; }); // center-out placement: rank 1 (largest) center, then alternate outward const centerOut=[]; bySize.forEach((c,i)=>{ if(i%2===0) centerOut.push(c); else centerOut.unshift(c); }); const corridors=centerOut; const corridorKeys=corridors.map(c=>c.corridor); const monthMap=new Map(); for(const r of rows){ if(!monthMap.has(r.mkey)) monthMap.set(r.mkey,r.dt); } const months=Array.from(monthMap.entries()).map(([k,dt])=>({mkey:k,dt})).sort((a,b)=>a.dt-b.dt); const monthKeys=months.map(m=>m.mkey); // month -> corridor -> record const cell=new Map(); for(const r of rows){ cell.set(r.mkey+'|'+r.corridor, r); } // month completeness: missing if any present row flags missing/incomplete, or all values absent const monthComplete=new Map(); for(const m of months){ let anyMissing=false, anyVal=false; for(const c of corridorKeys){ const rec=cell.get(m.mkey+'|'+c); if(rec){ if(rec.missing||!rec.complete) anyMissing=true; if(isFinite(rec.valB)) anyVal=true; } } monthComplete.set(m.mkey, anyVal && !anyMissing); } // ---- color palette (brighter, still editorial; assigned by size rank so largest rivers read strongest) ---- const palette=['#2f7fd6','#f2802e','#17a673','#a463d6','#e6b422','#3aa8c1','#e0568a','#5fb84a','#7d6be0','#d98c34','#2bb3a3','#c95b4b']; const otherColor='#c9cfd8'; const colorFor=new Map(); let pi=0; for(const c of bySize){ if(c.is_other||c.corridor==='Other'){ colorFor.set(c.corridor,otherColor); } else { colorFor.set(c.corridor, palette[pi%palette.length]); pi++; } } // ---- mode control ---- let mode = root.__mode || 'value'; root.__mode = mode; modesEl.innerHTML=''; const modeDefs=[{k:'value',label:'Trade value'},{k:'share',label:'Share'}]; const modeBtns={}; modeDefs.forEach(md=>{ const b=document.createElement('button'); b.type='button'; b.textContent=md.label; b.setAttribute('aria-pressed', md.k===mode?'true':'false'); b.addEventListener('click',()=>{ if(root.__mode===md.k) return; root.__mode=md.k; mode=md.k; Object.keys(modeBtns).forEach(k=>modeBtns[k].setAttribute('aria-pressed',k===md.k?'true':'false')); draw(true); }); modeBtns[md.k]=b; modesEl.appendChild(b); }); // ---- legend visibility toggle ---- let legendOpen = root.__legendOpen===undefined ? false : root.__legendOpen; root.__legendOpen = legendOpen; const oldToggle = ctrlsEl.querySelector('.vlegtoggle'); if(oldToggle) oldToggle.remove(); const legToggle=document.createElement('button'); legToggle.type='button'; legToggle.className='vlegtoggle'; legToggle.textContent='Legend'; legToggle.setAttribute('aria-pressed', legendOpen?'true':'false'); function applyLegendVisibility(){ legendEl.hidden = !root.__legendOpen; legToggle.setAttribute('aria-pressed', root.__legendOpen?'true':'false'); } legToggle.addEventListener('click',()=>{ root.__legendOpen = !root.__legendOpen; applyLegendVisibility(); svg=null; draw(false); }); ctrlsEl.appendChild(legToggle); applyLegendVisibility(); // ---- tooltip ---- const tip=document.createElement('div'); tip.className='vtip'; plot.appendChild(tip); // ---- legend (ordered biggest -> smallest so it reads with the new stack) ---- function buildLegend(){ legendEl.innerHTML=''; bySize.forEach(c=>{ const li=document.createElement('div'); li.className='li'+((c.is_other||c.corridor==='Other')?' other':''); li.dataset.corridor=c.corridor; const sw=document.createElement('span'); sw.className='sw'; sw.style.background=colorFor.get(c.corridor); const tx=document.createElement('span'); tx.textContent=c.corridor; li.appendChild(sw); li.appendChild(tx); li.addEventListener('mouseenter',()=>setActive(c.corridor)); li.addEventListener('mouseleave',()=>setActive(null)); legendEl.appendChild(li); }); } buildLegend(); const fmtB=(b)=>{ if(!isFinite(b)) return 'n/a'; if(b>=1000) return '$'+(b/1000).toFixed(2)+'T'; return '$'+b.toFixed(1)+'B'; }; const fmtPct=(p)=> isFinite(p)? (p*100).toFixed(1)+'%' : 'n/a'; const fmtMonth=d3.timeFormat('%B %Y'); const state={ activeCorridor:null }; let layers=null, xScale=null, guide=null, svg=null, plotW=0, plotH=0, margin=null, innerH=0; function setActive(corr){ state.activeCorridor=corr; if(layers){ layers.attr('fill-opacity',d=> corr==null?1:(d.key===corr?1:0.16)); } legendEl.querySelectorAll('.li').forEach(li=>{ li.style.opacity = corr==null?1:(li.dataset.corridor===corr?1:0.35); }); if(root.__labels){ root.__labels.style('opacity',d=> corr==null?null:(d.key===corr?1:0.15)); } } function computeSeries(useMode){ // matrix month x corridor of thickness values const series=corridorKeys.map(k=>({key:k, values:[]})); months.forEach((m,mi)=>{ let denom=0; if(useMode==='share'){ // normalize present values to 100% within the month for(const c of corridorKeys){ const rec=cell.get(m.mkey+'|'+c); if(rec && isFinite(rec.valB)) denom+=Math.max(0,rec.valB); } } corridorKeys.forEach((k,ki)=>{ const rec=cell.get(m.mkey+'|'+k); let v=0, present=false; if(rec && isFinite(rec.valB)){ present=true; if(useMode==='share'){ v = denom>0 ? Math.max(0,rec.valB)/denom : 0; } else { v = Math.max(0,rec.valB); } } series[ki].values.push({mi, mkey:m.mkey, dt:m.dt, v, present, rec}); }); }); return series; } function draw(isTransition){ const rect=plot.getBoundingClientRect(); const width=Math.max(260, Math.floor(rect.width)); const measuredH=Math.floor(rect.height); const isMobile=width<520; // give the stream substantial height; on mobile keep it tall enough to read const height = measuredH>=220 ? measuredH : Math.max(isMobile?320:360, Math.min(640, Math.round(width*(isMobile?0.9:0.5)))); plotW=width; plotH=height; margin={top:14,right:14,bottom:24,left:14}; const innerW=Math.max(10,width-margin.left-margin.right); innerH=Math.max(10,height-margin.top-margin.bottom); const useMode=root.__mode; const series=computeSeries(useMode); // stack with wiggle offset, fixed order = corridorKeys order const stackGen=d3.stack() .keys(corridorKeys) .value((d,key)=> d.byKey[key]) .order(d3.stackOrderNone) .offset(d3.stackOffsetWiggle); const stackInput=months.map((m,mi)=>{ const o={_mi:mi, byKey:{}}; corridorKeys.forEach((k,ki)=>{ o.byKey[k]=series[ki].values[mi].v; }); return o; }); const stacked=stackGen(stackInput); let minY=Infinity,maxY=-Infinity; stacked.forEach(layer=>layer.forEach(pt=>{ if(pt[0]maxY)maxY=pt[0]; if(pt[1]>maxY)maxY=pt[1]; })); if(!isFinite(minY)||!isFinite(maxY)){minY=-1;maxY=1;} xScale=d3.scaleTime().domain(d3.extent(months,m=>m.dt)).range([margin.left,margin.left+innerW]); const pad=(maxY-minY)*0.06||1; const yScale=d3.scaleLinear().domain([minY-pad,maxY+pad]).range([margin.top+innerH,margin.top]); // build/refresh svg if(!svg){ plot.querySelectorAll('svg').forEach(n=>n.remove()); svg=d3.select(plot).append('svg') .attr('preserveAspectRatio','xMidYMid meet') .style('overflow','visible'); svg.append('defs'); svg.append('g').attr('class','layers'); svg.append('g').attr('class','gap-layer'); svg.append('g').attr('class','labels'); svg.append('g').attr('class','xaxis'); const g=svg.append('g').attr('class','guide-g'); g.append('line').attr('class','guide').attr('stroke','#2b3440').attr('stroke-width',1) .attr('stroke-dasharray','3 3').attr('opacity',0); } svg.attr('viewBox','0 0 '+width+' '+height).attr('width',width).attr('height',height); // hatch pattern for missing months const defs=svg.select('defs'); defs.selectAll('#missHatch').remove(); const pat=defs.append('pattern').attr('id','missHatch').attr('width',6).attr('height',6) .attr('patternUnits','userSpaceOnUse').attr('patternTransform','rotate(45)'); pat.append('rect').attr('width',6).attr('height',6).attr('fill','#f4f5f7'); pat.append('line').attr('x1',0).attr('y1',0).attr('x2',0).attr('y2',6).attr('stroke','#d3d8df').attr('stroke-width',2); const area=d3.area() .x(d=>xScale(months[d.data._mi].dt)) .y0(d=>yScale(d[0])) .y1(d=>yScale(d[1])) .curve(d3.curveBasis); // ---- missing-month gap bands ---- const gaps=[]; months.forEach((m,mi)=>{ if(!monthComplete.get(m.mkey)) gaps.push(mi); }); const gapRects=[]; if(months.length>1){ const half=(xScale(months[1].dt)-xScale(months[0].dt))/2; gaps.forEach(mi=>{ const cx=xScale(months[mi].dt); gapRects.push({x0:cx-half,x1:cx+half}); }); } const gapSel=svg.select('.gap-layer').selectAll('rect').data(gapRects); gapSel.exit().remove(); gapSel.enter().append('rect') .attr('fill','url(#missHatch)').attr('pointer-events','none') .merge(gapSel) .attr('x',d=>d.x0).attr('width',d=>Math.max(0,d.x1-d.x0)) .attr('y',margin.top).attr('height',innerH).attr('opacity',0.9); // ---- ribbons ---- const layerData=stacked.map((s,i)=>({key:corridorKeys[i], stack:s})); const sel=svg.select('.layers').selectAll('path.ribbon').data(layerData,d=>d.key); sel.exit().remove(); const enter=sel.enter().append('path') .attr('class','ribbon') .attr('fill',d=>colorFor.get(d.key)) .attr('stroke','none') .attr('d',d=>area(d.stack)); layers=enter.merge(sel); layers.attr('fill',d=>colorFor.get(d.key)); if(isTransition){ layers.transition().duration(900).ease(d3.easeCubicInOut).attr('d',d=>area(d.stack)); } else { layers.attr('d',d=>area(d.stack)); } // subtle top highlight so adjacent bright ribbons stay distinguishable const topLine=d3.line() .x(d=>xScale(months[d.data._mi].dt)) .y(d=>yScale(d[1])) .curve(d3.curveBasis); const hlSel=svg.select('.layers').selectAll('path.rhl').data(layerData,d=>d.key); hlSel.exit().remove(); const hlEnter=hlSel.enter().append('path') .attr('class','rhl').attr('fill','none') .attr('stroke','rgba(255,255,255,0.35)').attr('stroke-width',0.9) .attr('pointer-events','none').attr('d',d=>topLine(d.stack)); const hlMerge=hlEnter.merge(hlSel); if(isTransition){ hlMerge.transition().duration(900).ease(d3.easeCubicInOut).attr('d',d=>topLine(d.stack)); } else { hlMerge.attr('d',d=>topLine(d.stack)); } // reveal animation on first draw only (slower, restrained) if(!root.__revealed && !isTransition){ root.__revealed=true; const clip=defs.append('clipPath').attr('id','revealClip'); const cr=clip.append('rect').attr('x',margin.left).attr('y',margin.top).attr('height',innerH).attr('width',0); svg.select('.layers').attr('clip-path','url(#revealClip)'); cr.transition().duration(1400).ease(d3.easeCubicOut).attr('width',innerW) .on('end',()=>{ svg.select('.layers').attr('clip-path',null); }); } // ---- x axis: years only ---- const yearTicks=xScale.ticks(d3.timeYear.every(1)); const maxTicks=isMobile?6:12; let ticks=yearTicks; if(ticks.length>maxTicks){ const step=Math.ceil(ticks.length/maxTicks); ticks=ticks.filter((t,i)=>i%step===0); } const axisG=svg.select('.xaxis').attr('transform','translate(0,'+(margin.top+innerH)+')'); const tickSel=axisG.selectAll('g.tk').data(ticks,d=>+d); tickSel.exit().remove(); const tEnter=tickSel.enter().append('g').attr('class','tk'); tEnter.append('text').attr('y',16).attr('text-anchor','middle') .attr('fill','#8b929c').attr('font-size',11.5); const tMerge=tEnter.merge(tickSel); tMerge.attr('transform',d=>'translate('+xScale(d)+',0)'); tMerge.select('text').text(d=>d3.timeFormat('%Y')(d)); // ---- direct labels: right-aligned column ---- // For each labelable ribbon, find the LAST month where it is thick enough to read, // then anchor the label against the right edge and de-collide vertically. const minThick = isMobile?22:18; const rawLabels=[]; layerData.forEach(ld=>{ if(ld.key==='Other') return; // scan from the right for the last month where this ribbon is thick enough let chosen=null; for(let mi=ld.stack.length-1; mi>=0; mi--){ const pt=ld.stack[mi]; const thick=Math.abs(yScale(pt[0])-yScale(pt[1])); if(thick>=minThick){ chosen={mi,thick,mid:(pt[0]+pt[1])/2}; break; } } // fallback: overall widest region if never thick enough at the tail if(!chosen){ let best=null; ld.stack.forEach((pt,mi)=>{ const thick=Math.abs(yScale(pt[0])-yScale(pt[1])); if(!best||thick>best.thick){ best={mi,thick,mid:(pt[0]+pt[1])/2}; } }); if(best && best.thick>=minThick) chosen=best; } if(chosen){ rawLabels.push({ key:ld.key, y:yScale(chosen.mid), thick:chosen.thick, fontSize:Math.min(13,Math.max(10.5,chosen.thick*0.5)) }); } }); // vertical de-collision so labels never sit on top of one another rawLabels.sort((a,b)=>a.y-b.y); const topBound=margin.top+2; const botBound=margin.top+innerH-2; for(let i=1;i0){ rawLabels[rawLabels.length-1].y=botBound; for(let i=rawLabels.length-2;i>=0;i--){ const next=rawLabels[i+1], cur=rawLabels[i]; const minGap=(next.fontSize+cur.fontSize)/2 + 3; if(next.y-cur.yd.key); labSel.exit().remove(); const labEnter=labSel.enter().append('text').attr('class','rlab') .attr('text-anchor','end').attr('pointer-events','none') .attr('paint-order','stroke').attr('stroke','#ffffff').attr('stroke-width',3) .attr('font-weight',600); const labMerge=labEnter.merge(labSel); labMerge.attr('x',labelX) .attr('y',d=>d.y) .attr('dominant-baseline','middle') .attr('font-size',d=>d.fontSize) .attr('fill',d=>d3.color(colorFor.get(d.key)).darker(1.4)) .text(d=>{ const maxLen=isMobile?14:22; return d.key.length>maxLen? d.key.replace(' -> ','->') : d.key; }); root.__labels=labMerge; // ---- interaction overlay ---- svg.selectAll('.hit').remove(); const hit=svg.append('rect').attr('class','hit') .attr('x',margin.left).attr('y',margin.top).attr('width',innerW).attr('height',innerH) .attr('fill','transparent').style('cursor','crosshair'); const guideLine=svg.select('.guide'); function nearestMonthIndex(mx){ let lo=0,hi=months.length-1; const t=xScale.invert(mx); // linear scan is fine for typical month counts let bi=0,bd=Infinity; for(let i=0;i=top && my<=bot) return corridorKeys[li]; } return null; } function moveHandler(ev){ const p=d3.pointer(ev, svg.node()); const mx=Math.max(margin.left,Math.min(margin.left+innerW,p[0])); const my=p[1]; const mi=nearestMonthIndex(mx); const m=months[mi]; const gx=xScale(m.dt); guideLine.attr('x1',gx).attr('x2',gx).attr('y1',margin.top).attr('y2',margin.top+innerH).attr('opacity',0.4); const corr=corridorAt(mi,my); setActive(corr); if(!corr){ tip.style.opacity=0; return; } const meta=corridorMap.get(corr); const rec=cell.get(m.mkey+'|'+corr); const complete=monthComplete.get(m.mkey); const valB = rec&&isFinite(rec.valB)? rec.valB : NaN; const share = rec&&isFinite(rec.share)? rec.share : (rec&&isFinite(rec.valB)&&rec.rec?NaN:NaN); let dirHtml=''; if(meta && meta.origin_region && meta.destination_region){ dirHtml='

'+esc(meta.origin_region)+' → '+esc(meta.destination_region)+'

'; } let missHtml=''; if(!complete){ missHtml='

Source month incomplete or missing

'; } const shareVal = rec&&isFinite(rec.share)?rec.share:NaN; tip.innerHTML= '

'+esc(corr)+'

'+dirHtml+ '

'+fmtMonth(m.dt)+'

'+ '

Trade'+fmtB(valB)+'

'+ '

Share of global'+fmtPct(shareVal)+'

'+ missHtml; tip.style.opacity=1; // position tooltip const tw=tip.offsetWidth||170, th=tip.offsetHeight||90; let tx=gx+12, ty=my-th/2; if(tx+tw>width-4) tx=gx-tw-12; if(tx<4) tx=4; ty=Math.max(4,Math.min(height-th-4,ty)); tip.style.left=tx+'px'; tip.style.top=ty+'px'; } function leaveHandler(){ guideLine.attr('opacity',0); tip.style.opacity=0; setActive(null); } hit.on('mousemove',moveHandler).on('mouseleave',leaveHandler); hit.on('touchstart',function(ev){ev.preventDefault();moveHandler(ev);},{passive:false}) .on('touchmove',function(ev){ev.preventDefault();moveHandler(ev);},{passive:false}) .on('touchend',leaveHandler); // reapply active state after redraw setActive(state.activeCorridor); } function esc(s){return String(s).replace(/&/g,'&').replace(//g,'>');} draw(false); // ---- responsive redraw on width change ---- let lastW=Math.floor(plot.getBoundingClientRect().width); const ro=new ResizeObserver(()=>{ const w=Math.floor(plot.getBoundingClientRect().width); if(Math.abs(w-lastW)>=12){ lastW=w; svg=null; draw(false); } }); ro.observe(plot); root.__ro=ro; }