NSSE Response Rates

NSSE 2026 – Response Rate Tracker

:root {
–navy: #002145;
–blue: #0055B3;
–sky: #00A7E1;
–gold: #F5A623;
–green: #22C55E;
–red: #e74c3c;
–bg: #F2F4F7;
–card: #FFFFFF;
–text: #1a2533;
–muted: #6B7A8E;
–border: #D8DFE9;
–mono: ‘IBM Plex Mono’, monospace;
–sans: ‘IBM Plex Sans’, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
font-family: var(–sans);
background: var(–bg);
color: var(–text);
}

/* ── PAGE HEADER ─────────────────────────────────── */
.page-header {
background: var(–navy);
padding: 28px 48px;
display: flex;
align-items: center;
gap: 40px;
flex-wrap: wrap;
}
.logo-block {
display: flex;
align-items: center;
gap: 14px;
}
.logo-crest {
width: 46px; height: 46px;
background: var(–gold);
border-radius: 4px;
display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 18px; color: var(–navy);
font-family: var(–mono); flex-shrink: 0;
}
.page-header h1 {
font-size: 20px; font-weight: 600; color: #fff; line-height: 1.25;
}
.page-header .subtitle {
font-size: 12px; color: rgba(255,255,255,0.55); margin-top: 3px; font-weight: 300;
}
.header-meta {
margin-left: auto;
text-align: right;
display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
}
.header-meta .date {
font-family: var(–mono); font-size: 12px; color: rgba(255,255,255,0.7);
}
.header-meta .badge {
display: inline-flex; align-items: center; gap: 5px;
background: var(–green); color: #fff;
font-size: 11px; font-weight: 600; letter-spacing: .7px;
padding: 3px 10px; border-radius: 20px;
text-transform: uppercase;
}
.badge-dot {
width: 6px; height: 6px; border-radius: 50%; background: #fff;
animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
0%,100% { opacity:1; transform:scale(1); }
50% { opacity:.4; transform:scale(.7); }
}

/* ── MAIN CONTENT ────────────────────────────────── */
.content {
padding: 36px 48px 48px;
display: flex;
flex-direction: column;
gap: 32px;
max-width: 1400px;
margin: 0 auto;
}

/* ── SECTION LABEL ───────────────────────────────── */
.section-label {
font-size: 11px; font-weight: 600; letter-spacing: 1.2px;
text-transform: uppercase; color: var(–muted);
margin-bottom: 14px;
display: flex; align-items: center; gap: 10px;
}
.section-label::after {
content: ”;
flex: 1; height: 1px;
background: linear-gradient(to right, var(–border), transparent);
}

/* ── CARD BASE ───────────────────────────────────── */
.card {
background: var(–card);
border-radius: 14px;
border: 1px solid var(–border);
box-shadow: 0 2px 14px rgba(0,33,69,.07);
padding: 28px 32px;
}

/* ─────────────────────────────────────────────────
MOCK A – Campus Overview
──────────────────────────────────────────────────*/
.campus-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.campus-card {
background: var(–card);
border-radius: 14px;
border: 1px solid var(–border);
box-shadow: 0 2px 14px rgba(0,33,69,.07);
padding: 28px 32px;
display: flex;
flex-direction: column;
gap: 20px;
}
.campus-header {
display: flex; align-items: center; justify-content: space-between;
}
.campus-name {
font-size: 19px; font-weight: 700; color: var(–navy);
display: flex; align-items: center; gap: 9px;
}
.campus-name .dot {
width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
.campus-tag {
font-family: var(–mono);
font-size: 10px; font-weight: 600; letter-spacing: .8px;
padding: 3px 9px; border-radius: 20px;
text-transform: uppercase;
}
.campus-body {
display: flex; align-items: center; gap: 28px;
}
.donut-wrap canvas { width: 140px !important; height: 140px !important; flex-shrink: 0; }
.campus-stats {
display: flex; flex-direction: column; gap: 14px;
}
.stat-block .val {
font-family: var(–mono); font-size: 28px; font-weight: 600; color: var(–navy);
line-height: 1;
}
.stat-block .lbl {
font-size: 11px; color: var(–muted); margin-top: 3px;
}
.target-note {
display: flex; align-items: center; gap: 6px;
font-size: 11px; font-family: var(–mono); color: var(–red);
}
.target-note .dash {
width: 16px; height: 2px; background: var(–red); border-radius: 1px; flex-shrink: 0;
}

/* ─────────────────────────────────────────────────
MOCK E / F – Faculty × Year, side by side
──────────────────────────────────────────────────*/
.faculty-year-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
align-items: start;
}
.fy-card {
background: var(–card);
border-radius: 14px;
border: 1px solid var(–border);
box-shadow: 0 2px 14px rgba(0,33,69,.07);
padding: 26px 30px;
}
.fy-header {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 18px;
}
.fy-title {
font-size: 16px; font-weight: 700; color: var(–navy);
display: flex; align-items: center; gap: 9px;
}
.fy-title .dot {
width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
.legend-row {
display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
margin-bottom: 18px;
}
.legend-item {
display: flex; align-items: center; gap: 5px;
font-size: 11px; color: var(–muted);
}
.legend-item .swatch {
width: 12px; height: 12px; border-radius: 2px; flex-shrink: 0;
}
.legend-item .line-sw {
width: 16px; height: 2px; background: var(–red); border-radius: 1px; flex-shrink: 0;
}

/* Grouped bars */
.gbar-row {
display: flex; align-items: stretch; gap: 0;
padding: 7px 0;
border-bottom: 1px solid #f0f3f7;
}
.gbar-row:last-child { border-bottom: none; }
.gbar-label {
width: 170px; flex-shrink: 0;
font-size: 12.5px; color: var(–text); font-weight: 400;
padding-top: 3px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gbar-tracks {
flex: 1; display: flex; flex-direction: column; gap: 5px; padding-top: 1px;
}
.gbar-sub { display: flex; align-items: center; gap: 8px; }
.gbar-sublabel {
width: 54px; flex-shrink: 0;
font-size: 10.5px; color: var(–muted); font-weight: 500; text-align: right;
}
.gbar-track {
flex: 1; height: 15px; background: #EBF0F7; border-radius: 3px; position: relative; overflow: visible;
}
.gbar-fill {
height: 100%; border-radius: 3px; min-width: 6px;
transition: width .8s ease;
}
.gbar-tick {
position: absolute; top: -3px; height: 21px; width: 2px;
background: var(–red); border-radius: 1px; z-index: 2;
}
.gbar-pct {
width: 36px; flex-shrink: 0;
font-family: var(–mono); font-size: 11.5px; font-weight: 600;
color: var(–navy); text-align: right;
}
.target-footer {
margin-top: 12px;
font-size: 11px; font-family: var(–mono); color: var(–red);
display: flex; align-items: center; gap: 6px;
}
.target-footer .dash {
width: 16px; height: 2px; background: var(–red); border-radius: 1px;
}

/* ── PAGE FOOTER ─────────────────────────────────── */
.page-footer {
background: var(–navy);
padding: 18px 48px;
font-size: 11px;
color: rgba(255,255,255,.45);
display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 6px;
font-family: var(–mono);
}

@media (max-width: 900px) {
.campus-row, .faculty-year-row { grid-template-columns: 1fr; }
.content { padding: 24px 20px 40px; }
.page-header { padding: 20px; }
.page-footer { padding: 16px 20px; }
.gbar-label { width: 120px; }
}

Campus Overview

UBC Okanagan

UBCO

18.4%

Overall Response Rate

812

responses of 4,414 invited

Target: 35%

UBC Vancouver

UBCV

14.9%

Overall Response Rate

2,861

responses of 19,202 invited

Target: 35%

Faculty Response Rates — 1st & 4th Year

UBC Okanagan

1st Year

4th Year

35% target

UBC Vancouver

1st Year

4th Year

35% target

/* ─── DATA ──────────────────────────────────────────────────────────── */
const TARGET = 35;

const ubcoYearFac = [
{ label: “Applied Science”, yr1: 24.3, yr4: 19.6 },
{ label: “Arts & Social Sciences”, yr1: 19.2, yr4: 15.9 },
{ label: “Creative & Critical Std.”,yr1: 15.8, yr4: 12.5 },
{ label: “Education”, yr1: 21.4, yr4: 17.3 },
{ label: “Health & Social Dev.”, yr1: 18.0, yr4: 14.0 },
{ label: “Management”, yr1: 23.5, yr4: 18.0 },
{ label: “Science”, yr1: 20.1, yr4: 16.5 },
];

const ubcvYearFac = [
{ label: “Science”, yr1: 18.4, yr4: 13.2 },
{ label: “Land & Food Systems”, yr1: 20.5, yr4: 16.5 },
{ label: “Education”, yr1: 22.8, yr4: 17.3 },
{ label: “Dentistry”, yr1: 27.3, yr4: 21.1 },
{ label: “Medicine”, yr1: 12.1, yr4: 8.0 },
{ label: “Pharmaceutical Sciences”, yr1: 22.4, yr4: 16.9 },
{ label: “Arts”, yr1: 15.8, yr4: 12.0 },
{ label: “Forestry”, yr1: 19.7, yr4: 14.7 },
{ label: “Applied Science”, yr1: 15.0, yr4: 11.2 },
{ label: “Commerce & Business”, yr1: 13.4, yr4: 10.1 },
];

/* ─── DONUTS ────────────────────────────────────────────────────────── */
function buildDonut(id, rr, color) {
const circ = 2 * Math.PI * 40;
new Chart(document.getElementById(id), {
type: ‘doughnut’,
data: {
datasets: [{
data: [rr, 100 – rr],
backgroundColor: [color, ‘#E9EEF5’],
borderWidth: 0,
hoverOffset: 0,
}]
},
options: {
cutout: ‘74%’,
animation: { duration: 1100, easing: ‘easeOutQuart’ },
plugins: { tooltip: { enabled: false }, legend: { display: false } },
},
plugins: [{
id: ‘center’,
beforeDraw(chart) {
const { width: w, height: h, ctx } = chart;
ctx.save();
ctx.textAlign = ‘center’; ctx.textBaseline = ‘middle’;
ctx.font = ‘700 24px “IBM Plex Mono”, monospace’;
ctx.fillStyle = ‘#002145’;
ctx.fillText(rr + ‘%’, w / 2, h / 2 – 9);
ctx.font = ‘400 10px “IBM Plex Sans”, sans-serif’;
ctx.fillStyle = ‘#6B7A8E’;
ctx.fillText(‘response rate’, w / 2, h / 2 + 12);
ctx.restore();
}
}]
});
}

buildDonut(‘donutUBCO’, 18.4, ‘#0055B3’);
buildDonut(‘donutUBCV’, 14.9, ‘#00A7E1’);

/* ─── GROUPED BAR BUILDER ───────────────────────────────────────────── */
// Scale: target (35%) sits at 88% of track width, giving 12% breathing room
function pct(rr) { return Math.min((rr / 40) * 100, 100); }
const tickLeft = pct(TARGET); // where the red tick sits

function buildGrouped(containerId, data, color1, color4) {
const container = document.getElementById(containerId);
data.forEach(d => {
const row = document.createElement(‘div’);
row.className = ‘gbar-row’;
row.innerHTML = `

${d.label}

1st Year

${d.yr1}%

4th Year

${d.yr4}%

`;
container.appendChild(row);
});
}

buildGrouped(‘ubco-grouped’, ubcoYearFac, ‘#0055B3’, ‘#6EC4E8’);
buildGrouped(‘ubcv-grouped’, ubcvYearFac, ‘#00A7E1’, ‘#A8DFF5’);