Filter the fictional session chart: all sessions total 63 attendances; Wednesday alone is 24.

Select the code and use your copy shortcut. Changes in this preview are temporary.

<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="nos-demo-layout" content="responsive-lab"><title>Workshop attendance — interactive snapshot</title><style>*{box-sizing:border-box}body{margin:0;background:#eeeae1;color:#292b27;font:16px/1.6 system-ui,-apple-system,Segoe UI,sans-serif}main{max-width:940px;margin:32px auto;background:#fffdf7;padding:34px clamp(18px,5vw,48px);border-top:5px solid #a94e28}h1{font:500 clamp(34px,5vw,51px)/1.12 Georgia,serif;max-width:720px;margin:17px 0}h2{font:500 25px/1.3 Georgia,serif;margin:24px 0 12px}p{margin:12px 0}.eyebrow{font-size:13px;letter-spacing:.13em;font-weight:750;color:#6d5040}.intro{max-width:650px;color:#595b52}.stamp{border-top:1px solid #d9d6ca;margin-top:28px;padding-top:17px;color:#686a5e;font-size:14px}.panel{padding:23px;background:#f0eee4;border:1px solid #d9d5c6;margin-top:22px}.result{font:500 49px/1.2 Georgia,serif;color:#864021;margin:12px 0}.note{padding:14px 17px;border-left:3px solid #a94e28;background:#f7ebda;color:#514535}button,select{font:inherit;max-width:100%}button{padding:10px 17px;border:1px solid #bab9ac;background:white;color:#30392d;cursor:pointer;border-radius:3px}button[aria-pressed=true],button.active{color:white;background:#314939;border-color:#314939}button:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid #c9652b;outline-offset:4px}.controls{display:flex;gap:9px;flex-wrap:wrap;margin:18px 0}select{padding:11px;background:white;color:#293128;border:1px solid #9c9d90;width:100%;margin-top:8px}.label{font-weight:650}small{font-size:14px}table{width:100%;border-collapse:collapse;margin:20px 0}th,td{padding:12px 7px;border-bottom:1px solid #d9d5c6;text-align:left;font-variant-numeric:tabular-nums}th:last-child,td:last-child{text-align:right}svg{max-width:100%;height:auto}.two{display:grid;grid-template-columns:1fr 1fr;gap:22px}.hide{display:none}@media(max-width:600px){main{margin:0;padding:24px 18px 30px}h1{font-size:37px}.two{grid-template-columns:1fr}.panel{padding:18px}.result{font-size:43px}}@media print{body{background:white}main{margin:0;border-top:3px solid #a94e28}}</style></head><body><main><p class="eyebrow">COMMUNITY WORKSHOP / SESSION SNAPSHOT</p><h1>Which session<br>filled the room?</h1><p class="intro">Three fictional sessions. Compare attendances by session, then check the same records in the table below. Counts are attendances, not unique people.</p><div class="two"><div><label for="filter" class="label">Session</label><select id="filter"><option value="All">All sessions</option><option value="Monday">Monday</option><option value="Wednesday">Wednesday</option><option value="Friday">Friday</option></select></div><div aria-live="polite"><p class="eyebrow">DISPLAYED TOTAL / ATTENDANCES</p><div class="result" id="total">63</div></div></div><div id="chart" role="img" aria-label="Attendance by session. See the data table for exact values."></div><table><caption style="text-align:left;font-weight:650">The records behind the chart</caption><thead><tr><th scope="col">Session</th><th scope="col">Attendances</th></tr></thead><tbody id="rows"></tbody></table><p class="note">Fixed sample data. Changing the filter does not fetch new records or rerun a Python notebook.</p><footer class="stamp">Original authored example · No ChatGPT session captured · Filter changes stay in this page</footer></main><script>const data=[['Monday',18],['Wednesday',24],['Friday',21]];const select=document.querySelector('#filter');function draw(){const filtered=select.value==='All'?data:data.filter(d=>d[0]===select.value);document.querySelector('#total').textContent=filtered.reduce((s,r)=>s+r[1],0);document.querySelector('#rows').replaceChildren(...filtered.map(r=>{const tr=document.createElement('tr');r.forEach(v=>{const td=document.createElement('td');td.textContent=v;tr.append(td);});return tr;}));const chart=document.querySelector('#chart');chart.replaceChildren(...filtered.map(r=>{const row=document.createElement('div');row.style.cssText='display:grid;grid-template-columns:100px 1fr 30px;align-items:center;gap:10px;margin:19px 0;min-height:43px';const name=document.createElement('span');name.textContent=r[0];const rail=document.createElement('div');rail.style.cssText='background:#e8e6da;height:36px';const bar=document.createElement('div');bar.style.cssText='height:36px;width:'+(r[1]/30*100)+'%;background:'+(r[0]==='Wednesday'?'#a4542d':'#3f5a43');rail.append(bar);const value=document.createElement('strong');value.textContent=r[1];row.append(name,rail,value);return row;}));}select.addEventListener('change',draw);draw();</script></body></html>