Cohort analysis

<div class="co"><div class="title">RETENTION BY SIGN-UP WEEK <b id="week">W+1</b></div><div class="grid"><span></span><b>W0</b><b>W1</b><b>W2</b><b>W3</b><label>SEP 01</label><i data-col="0">100</i><i data-col="1">60</i><i data-col="2">42</i><i data-col="3">33</i><label>SEP 08</label><i data-col="0">100</i><i data-col="1">68</i><i data-col="2">50</i><i data-col="3">39</i><label>SEP 15</label><i data-col="0">100</i><i data-col="1">64</i><i data-col="2">47</i><i data-col="3">34</i></div></div>

.co{width:min(88%,620px);font:800 clamp(10px,max(1.8vmin,1vw),13px)/1.2 sans-serif}.title{display:flex;justify-content:space-between;gap:8px;border-bottom:2px solid var(--fg);padding-bottom:clamp(7px,2vmin,14px);letter-spacing:.05em}.title b{color:var(--accent)}.grid{display:grid;grid-template-columns:minmax(45px,1.5fr) repeat(4,1fr);gap:clamp(4px,1.3vmin,9px);margin-top:clamp(9px,2vmin,18px);align-items:stretch;text-align:center}.grid>b{color:var(--muted)}.grid label{display:grid;place-items:center;font-size:clamp(10px,max(1.6vmin,1vw),12px)}.grid i{display:grid;place-items:center;font-style:normal;background:color-mix(in srgb,var(--accent) 50%,var(--surface));color:var(--fg);min-height:clamp(24px,6vmin,44px);transition:opacity .5s,transform .5s}.grid i.hidden{opacity:.08;transform:scale(.9)}.grid i[data-col="1"]{background:color-mix(in srgb,var(--accent) 35%,var(--surface))}.grid i[data-col="2"]{background:color-mix(in srgb,var(--accent) 25%,var(--surface))}.grid i[data-col="3"]{background:color-mix(in srgb,var(--accent) 18%,var(--surface))}

let col=1;const cells=[...document.querySelectorAll('.grid i')];function draw(){cells.forEach(c=>c.classList.toggle('hidden',Number(c.dataset.col)>col));document.querySelector('#week').textContent='W+'+col}draw();setInterval(()=>{col=col===3?0:col+1;draw()},750);