#mcps-enroll{–bg:#fcfcfb;–ink:#0b0b0b;–ink2:#52514e;–muted:#8a8984;–grid:#e6e5e0;–line:#2a78d6;–hi:#eb6834;–card:#ffffff;–border:#e2e1dc} #mcps-enroll,#mcps-enroll *{box-sizing:border-box} #mcps-enroll{background:var(–bg);color:var(–ink);font:14px/1.45 system-ui,-apple-system,”Segoe UI”,Arial,sans-serif;padding:16px;border-radius:10px;text-align:left} #mcps-enroll h1,#mcps-enroll h2{color:var(–ink);font-family:inherit;margin-top:0;text-transform:none;letter-spacing:normal} #mcps-enroll p,#mcps-enroll input,#mcps-enroll button{font-family:inherit} #mcps-enroll main{max-width:1100px;margin:0 auto} #mcps-enroll h1{font-size:22px;margin:0 0 4px} #mcps-enroll p.sub{color:var(–ink2);margin:0 0 20px} #mcps-enroll section{background:var(–card);border:1px solid var(–border);border-radius:10px;padding:16px 16px 8px;margin-bottom:20px} #mcps-enroll h2{font-size:16px;margin:0 0 2px} #mcps-enroll .meta{color:var(–ink2);font-size:13px;margin-bottom:10px} #mcps-enroll .controls{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:8px} #mcps-enroll input{font:inherit;padding:6px 10px;border:1px solid var(–border);border-radius:6px;background:var(–bg);color:var(–ink);min-width:220px} #mcps-enroll button{font:inherit;padding:6px 10px;border:1px solid var(–border);border-radius:6px;background:var(–bg);color:var(–ink2);cursor:pointer} #mcps-enroll .seg{display:inline-flex;border:1px solid var(–border);border-radius:7px;overflow:hidden;margin:6px 0 8px} #mcps-enroll .seg button{border:0;border-radius:0;padding:5px 12px} #mcps-enroll .seg button.on{background:var(–line);color:#fff} #mcps-enroll .chips{display:flex;gap:6px;flex-wrap:wrap} #mcps-enroll .chip{background:var(–bg);border:1px solid var(–hi);border-radius:999px;padding:2px 10px;font-size:12px;cursor:pointer} #mcps-enroll .chip:after{content:” ×”;color:var(–muted)} #mcps-enroll svg{width:100%;height:auto;display:block} #mcps-enroll .ax text{fill:var(–ink2);font-size:11px} #mcps-enroll .ax line{stroke:var(–grid)} #mcps-enroll .s{fill:none;stroke-linecap:round;stroke:var(–line);stroke-width:1;stroke-opacity:.28} #mcps-enroll .s.cl{stroke-opacity:.6;stroke-width:1.6} #mcps-enroll .s.cl.dim{stroke-opacity:.15} #mcps-enroll .s.dim{stroke-opacity:.08} #mcps-enroll .s.hov{stroke:var(–ink);stroke-opacity:1;stroke-width:2.5} #mcps-enroll .s.pin{stroke:var(–hi);stroke-opacity:1;stroke-width:2.5} #mcps-enroll .lbl{font-size:11px;fill:var(–ink)} #mcps-enroll .prelim{fill:var(–grid);opacity:.5} #mcps-enroll .tip{position:fixed;pointer-events:none;background:var(–card);border:1px solid var(–border);border-radius:6px;padding:6px 9px;font-size:12px;box-shadow:0 2px 8px rgba(0,0,0,.15);display:none;z-index:5} #mcps-enroll .tip b{display:block} #mcps-enroll .note{color:var(–ink2);font-size:12px;margin-top:4px}

MCPS Enrollment by School, 2007–2026

Switch between individual schools and cluster totals. Hover a line to identify it; type a name or click a line to highlight it.

Source: MCPS Department of Shared Accountability, Official Reports of Enrollment (Sept 30, 2007–2025); 2026-27 is preliminary, from MCPS FY2028 CIP Appendix E. Elementary totals include Pre-K. X-axis year = fall of the school year. Cluster totals use each school’s current cluster (from the workbook) for every year, so they show enrollment in today’s cluster schools, not historical boundaries. Schools with no current cluster (Community Montessori, Stephen Knolls Pre-K, M.E.C.C.A.) are left out of cluster totals.

${title}

`; const body=sec.querySelector(‘.body’); const views={s:()=>plot(body,DATA[key],’schools’,`${DATA[key].length} schools · enrollment as of Sept 30`), c:()=>plot(body,CL[key],’clusters’,`${CL[key].length} clusters · sum of each cluster’s ${key==’ES’?’elementary’:’middle’} schools (current cluster assignments applied to all years)`)}; sec.querySelectorAll(‘.seg button’).forEach(b=>b.onclick=()=>{sec.querySelectorAll(‘.seg button’).forEach(x=>x.classList.toggle(‘on’,x===b));views[b.dataset.v]()}); views.s(); } function plot(sec,rows,unit,meta){ sec.innerHTML=`

${meta}

${rows.map(r=>“).join(”)}

`; const W=1060,H=520,m={l:52,r:150,t:12,b:30}; const max=Math.ceil(Math.max(…rows.flatMap(r=>r.v.filter(v=>v!=null)))/(unit==’clusters’?1000:100))*(unit==’clusters’?1000:100); const x=y=>m.l+(y-2007)/(2026-2007)*(W-m.l-m.r), yv=v=>m.t+(1-v/max)*(H-m.t-m.b); const NS=’http://www.w3.org/2000/svg’;const svg=document.createElementNS(NS,’svg’);svg.setAttribute(‘viewBox’,`0 0 ${W} ${H}`);sec.appendChild(svg); let g=”;const step=unit==’clusters’?(max>10000?2000:1000):(max>1200?200:100); g+=“; for(let v=0;v<=max;v+=step)g+=`${v.toLocaleString()}`; for(const y of YEARS)if(y%2==1||y==2026)g+=`${y==2026?’2026*’:y}`; g+=`*prelim.`; svg.innerHTML=g;const LG=svg.querySelector(‘.lines’),LB=svg.querySelector(‘.labels’); const paths=rows.map((r,i)=>{let d=”,pen=false;r.v.forEach((v,j)=>{if(v==null){pen=false;return}d+=(pen?’L’:’M’)+x(YEARS[j]).toFixed(1)+’,’+yv(v).toFixed(1);pen=true}); const p=document.createElementNS(NS,’path’);if(d&&!d.includes(‘L’))d+=’l0.1,0′;p.setAttribute(‘d’,d||’M0,0′);p.setAttribute(‘class’,’s’+(unit==’clusters’?’ cl’:”));p.dataset.i=i;LG.appendChild(p);return p}); const pinned=new Set();const chips=sec.querySelector(‘.chips’); function lastPt(r){for(let j=r.v.length-1;j>=0;j–)if(r.v[j]!=null)return [YEARS[j],r.v[j]]} function render(hov){paths.forEach((p,i)=>{p.classList.toggle(‘pin’,pinned.has(i));p.classList.toggle(‘hov’,i===hov&&!pinned.has(i));p.classList.toggle(‘dim’,(pinned.size>0||hov!=null)&&!pinned.has(i)&&i!==hov)}); […pinned].forEach(i=>LG.appendChild(paths[i]));if(hov!=null)LG.appendChild(paths[hov]); const L=[…pinned];if(hov!=null&&!pinned.has(hov))L.push(hov); const pos=L.map(i=>{const [yy,v]=lastPt(rows[i]);return {i,x:x(yy)+6,y:yv(v)+4}}).sort((a,b)=>a.y-b.y);for(let k=1;k<pos.length;k++)if(pos[k].y-pos[k-1].y`${rows[p.i].n}`).join(”); chips.innerHTML=[…pinned].map(i=>`${rows[i].n}`).join(”);} function nearest(evt){const pt=svg.createSVGPoint();pt.x=evt.clientX;pt.y=evt.clientY;const p=pt.matrixTransform(svg.getScreenCTM().inverse()); const j=Math.round((p.x-m.l)/(W-m.l-m.r)*19);if(j19)return null;let best=null,bd=unit==’clusters’?20:14; rows.forEach((r,i)=>{const v=r.v[j];if(v==null)return;const dd=Math.abs(yv(v)-p.y);if(dd{const n=nearest(e);if(!n){tip.style.display=’none’;render(null);return} const r=rows[n.i],v=r.v[n.j],pv=n.j>0?r.v[n.j-1]:null;const yl=YEARS[n.j]+’-‘+String(YEARS[n.j]+1).slice(2)+(n.j==19?’ (prelim.)’:”); tip.innerHTML=`${r.n}${r.k?`${r.k} schools
`:”}${yl}: ${v.toLocaleString()}${pv!=null?` (${v-pv>=0?’+’:”}${(v-pv).toLocaleString()} vs prior yr)`:”}`; tip.style.display=’block’;tip.style.left=Math.min(e.clientX+14,innerWidth-260)+’px’;tip.style.top=(e.clientY+14)+’px’;render(n.i)}); svg.addEventListener(‘mouseleave’,()=>{tip.style.display=’none’;render(null)}); svg.addEventListener(‘click’,e=>{const n=nearest(e);if(!n)return;pinned.has(n.i)?pinned.delete(n.i):pinned.add(n.i);render(n.i)}); const inp=sec.querySelector(‘input’);inp.addEventListener(‘change’,()=>{const i=rows.findIndex(r=>r.n.toLowerCase()==inp.value.trim().toLowerCase());if(i>=0){pinned.add(i);inp.value=”;render(null)}}); sec.querySelector(‘button’).onclick=()=>{pinned.clear();render(null)}; chips.addEventListener(‘click’,e=>{const c=e.target.closest(‘.chip’);if(c){pinned.delete(+c.dataset.i);render(null)}}); } chart(‘ES’,’Elementary schools’);chart(‘MS’,’Middle schools’); })();

Enrollment Data

MCPS Enrollment by School, 2007–2026

${title}