29:null 2a:["$","title",null,{"children":"Assignment 2: Basic Visualizations | Harrison Law | Observable"}] 2f:T716,## 1. Assessment of "Total Enrollment Numbers" Bar Chart - **Is this the best way to present this data? Does it show trends over time?** No. A bar chart with only two time points cannot show a trend, as it only shows a before/after snapshot. Enrollment could varied semester by semester between 2010 and 2024, and none of that would be visible. A trend requires a continuous or year-by-year view, ideally with a line or area chart connecting all the years in between. - **Is this a complete view of the data? Could Covid-19 have been disruptive?** No, this chart doesn't provide a complete view of the data. The Covid-19 pandemic likely caused enrollment numbers to drop, as people stayed quarantined at home. By only showing 2010 and 2024, this chart hides any such dip (or the possibility that enrollment cratered in the middle and only recently recovered to a similar level as 2010). We would need to look at every year individually to understand the shape of the trend, not just the two endpoints. - **Should we use a bar chart? If not, what other chart? If yes, which variant?** A line chart is much better suited to showing a trend across many sequential time points, which is what this data represents. If we did want to use bars for all 15 years, a grouped bar chart per year could work, but with two institutions across 15 years, a line chart is cleaner and easier to read since it directly shows the shape of the trajectory rather than requiring the eye to compare bar heights across a long, cluttered x-axis. - **What aesthetic elements can improve the visualization?** - Plot every year from 2010-2024, not just the two endpoints - Have a more specific title that fully explains the plot - If highlighting the Covid-19 impacted semesters is important, mark on the graph when that began 30:T4a0,const trendPlot = Plot.plot({ title: "Fall semester total enrollment (all ages), 2010–2024, University of Hawai`i at Mānoa vs. West O`ahu", width: 800, height: 440, marginRight: 60, x: {label: "Year", tickFormat: "d"}, y: {label: "Enrollment (headcount)", grid: true, zero: true}, color: {legend: true, label: "Institution"}, marks: [ Plot.rect([{x1: 2019.5, x2: 2021.5}], { x1: "x1", x2: "x2", fill: "#000", fillOpacity: 0.05 }), Plot.ruleY([0]), Plot.lineY(enrollmentByYear, { x: "year", y: "total", stroke: "campus", strokeWidth: 2.5, tip: true }), Plot.dot(enrollmentByYear, {x: "year", y: "total", stroke: "campus", fill: "white"}), Plot.text( enrollmentByYear.filter(d => d.year === 2024), { x: "year", y: "total", text: d => d.campus.replace("University of Hawai`i", "UH"), dx: 6, textAnchor: "start", fontWeight: "bold" } ), Plot.text([{year: 2020.5, label: "Covid-19"}], { x: "year", y: 22500, text: "label", fontSize: 11, fill: "gray" }) ] }); display(trendPlot);31:T4f8,## 6. Trends We See - UH Mānoa declined for most of the decade, before Covid, then recovered. Mānoa enrollment fell almost every year from 20,335 in Fall 2010 to a low of 17,487 in Fall 2019, a ~14% decline over nine years, entirely pre-pandemic. It then rose through the Covid years (2020-2022) and continued climbing to 20,027 by Fall 2024, nearly back to its 2010 level. This is the opposite of what many people would assume, as the pandemic did not cause Mānoa's biggest drop. - West Oahu grew steadily and consistently, nearly doubling from 1,471 (2010) to a peak of 3,164 (2020), before leveling off and dipping slightly to 2,814 by 2024. Unlike Mānoa, West Oahu's slight downturn happens during/after Covid, not before it. - A two-point bar chart comparing only 2010 and 2024 would have shown Mānoa "flat" (20,335 → 20,027) and masked a substantial mid-decade decline and recovery entirely. It also would have shown West Oahu "way up" without revealing that its growth actually stalled/reversed slightly after 2020. - The line chart's slope makes both the decline-then-recovery in Mānoa and the rise-then-plateau in West Oahu immediately visible as a "V" and an inverted "check-mark" shape, respectively, something no two-bar comparison could ever reveal. 32:Tb50,function donut(campusRows) { const size = 260; // actual on-screen pixel size const width = 1000, radius = 400; const svg = d3.create("svg") .attr("viewBox", [-width/2, -width/2, width, width]) .attr("width", size) .attr("height", size) .style("font-family", "sans-serif"); const arc = d3.arc().innerRadius(radius * 0.6).outerRadius(radius).padAngle(0.02); const pie = d3.pie().value(d => d.count).sort(null); const color = d3.scaleOrdinal(["Under 45 (younger)", "45+ (older)"], ["#4c78a8", "#e45756"]); const arcs = pie(campusRows); const total = d3.sum(campusRows, d => d.count); svg.append("g") .selectAll("path") .data(arcs) .join("path") .attr("d", arc) .attr("fill", d => color(d.data.ageGroup)) .attr("stroke", "white") .attr("stroke-width", 4) .append("title") .text(d => `${d.data.ageGroup}: ${d.data.count.toLocaleString()} (${(d.data.count/total*100).toFixed(1)}%)`); svg.append("g") .selectAll("text") .data(arcs.filter(d => (d.endAngle - d.startAngle) > 0.15)) .join("text") .attr("transform", d => `translate(${arc.centroid(d)})`) .attr("text-anchor", "middle") .attr("font-size", 34) .attr("font-weight", "bold") .attr("fill", "white") .text(d => `${(d.data.count/total*100).toFixed(1)}%`); // big center callout for the older-student share specifically const olderCount = campusRows.find(d => d.ageGroup === "45+ (older)")?.count ?? 0; const pct = total > 0 ? (olderCount / total * 100).toFixed(1) : "0.0"; svg.append("text") .attr("text-anchor", "middle") .attr("dy", "-0.15em") .attr("font-weight", "bold") .attr("font-size", 70) .text(`${pct}%`); svg.append("text") .attr("text-anchor", "middle") .attr("dy", "1.6em") .attr("font-size", 26) .attr("fill", "#666") .text("are 45+"); return svg.node(); } const donutCampuses = Array.from(new Set(ageProportion.map(d => d.campus))); // a single shared legend instead of repeating tiny labels per chart const legend = html`

Under 45 (younger) 45+ (older)

`; const donuts = html`

${legend}

${donutCampuses.map(c => html`

${c.replace("University of Hawai`i", "UH")}

${donut(ageProportion.filter(d => d.campus === c))}

`)}

`; display(donuts);33:[] 2d:{"id":"281316f842f1b39d","slug":"assignment-2-basic-visualizations","title":"Assignment 2: Basic Visualizations","thumbnail":"915abc7975b868c4cdec4fde3e40669d7d90955da2eded3aedc0b1cf3db95b7c","access_level":"public","create_time":"$D2026-09-22T19:42:28.448Z","update_time":"$D2026-09-25T05:58:10.412Z","view_time":null,"first_public_time":"$D2026-09-25T05:59:08.053Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"016a75231850063b","login":"harrison-law","name":"Harrison Law","avatar_url":"https://avatars-next.observableusercontent.com/136636aa6e7ce908c07533ee74b8a3f44e7ed33ef773a6443c710d40248d2fa4","tier":"free_2026"},"version":160,"publish_version":160,"role":null,"authored":false,"authors":[{"type":"individual","id":"d66e4012a6856cb7","login":"harrison-law","name":"Harrison Law","avatar_url":"https://avatars-next.observableusercontent.com/136636aa6e7ce908c07533ee74b8a3f44e7ed33ef773a6443c710d40248d2fa4","tier":null}],"members":[{"type":"team","id":"016a75231850063b","login":"harrison-law","name":"Harrison Law","avatar_url":"https://avatars-next.observableusercontent.com/136636aa6e7ce908c07533ee74b8a3f44e7ed33ef773a6443c710d40248d2fa4","tier":"free_2026","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Assignment 2: Basic Visualizations","cells":[{"id":1,"value":"# Assignment 2: Basic Visualizations","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"# Enrollment Over the Years","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"$2f","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"## 2. Data Wrangling","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"const rawText = await (await fetch(\n \"https://raw.githubusercontent.com/nuritk/data/refs/heads/main/uh-enr-demographics.csv\",\n {proxy: true}\n)).text();\nconst rawData = d3.csvParse(rawText, d3.autoType);","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"// Quick look at a sample of the raw data before wrangling\ndisplay(Inputs.table(rawData.slice(0, 20)));","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"// filter to our two chosen institutions, then sum enrollment per year.\nconst nameMap = new Map([\n [\"Maui College\", \"University of Hawai`i Maui College\"]\n]);\n\nconst chosenCampuses = [\n \"University of Hawai`i at Manoa\",\n \"University of Hawai`i - West O`ahu\"\n];\n\nconst cleaned = rawData\n .map(d => ({\n ...d,\n CAMPUS: nameMap.get(d.CAMPUS) ?? d.CAMPUS,\n YEAR: +d.SEMESTER.split(\" \")[1]\n }))\n .filter(d => chosenCampuses.includes(d.CAMPUS));\n\nconst enrollmentByYear = Array.from(\n d3.rollup(\n cleaned,\n v => d3.sum(v, d => d[\"COUNT(1)\"]),\n d => d.CAMPUS,\n d => d.YEAR\n ),\n ([campus, byYear]) =>\n Array.from(byYear, ([year, total]) => ({campus, year, total}))\n).flat()\n .sort((a, b) => a.year - b.year || d3.ascending(a.campus, b.campus));\n\ndisplay(Inputs.table(enrollmentByYear));","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"const semesters = [...new Set(rawData.map(d => d.SEMESTER))].sort();\ndisplay(semesters);\nconst ageGroups = [...new Set(rawData.map(d => d.AGE_GROUP))].sort();\ndisplay(ageGroups);","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"const campuses = [...new Set(rawData.map(d => d.CAMPUS))].sort();\ndisplay(campuses);","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"## 3. Data Wrangling Approach\n\nThe raw dataset has one row per (semester, campus, age group) combination with a COUNT(1) of enrolled students. To get \"overall enrollment\" per institution per semester regardless of age, we need to sum the counts across all age groups for a given semester + campus pair. A few cleanup steps were necessary to accomplish this:\n1. Filter to our two chosen institutions: University of Hawaiʻi at Mānoa and University of Hawaiʻi – West Oʻahu.\n2. Group by (semester, campus) and sum COUNT(1) to get total enrollment per institution per Fall semester, 2010-2024.\n3. Extract the year from the semester string (e.g. \"Fall 2019\" → 2019) for use as a numeric x-axis.\n\nThis gives us a clean, tidy table with one row per institution per year (15 years × 2 institutions = 30 rows), ready for plotting a continuous trend line.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"## 4. Visualization Showing Enrollment Trends","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"$30","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"## 5. Design Choices\n\n- Since we now have 15 consecutive years for each institution, a line chart makes more sense here, as it directly conveys the shape and direction of the trend rather than requiring readers to mentally connect bar heights.\n- Small dots mark each actual observed year so it's clear these are real data points , and they also serve as hover targets for the tooltip (`tip: true`), which shows the exact institution/year/enrollment on hover.\n- A light gray rectangle spans 2020–2021 with a text annotation, giving context for the dip/disruption during the pandemic without requiring readers to already know the historical timeline.\n- The Y-axis starts at zero with gridlines, so the visual magnitude of change is not exaggerated and is comparable across the two series.\n- The title states the key comparison the chart makes rather than a generic \"Enrollment by Year\" label, so the reader has a hypothesis to check as they read the chart.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"const manoa = enrollmentByYear.filter(d => d.campus === \"University of Hawai`i at Manoa\");\nconst westOahu = enrollmentByYear.filter(d => d.campus === \"University of Hawai`i - West O`ahu\");\nconst manoaMin = d3.least(manoa, d => d.total);\nconst manoa2010 = manoa.find(d => d.year === 2010).total;\nconst manoa2024 = manoa.find(d => d.year === 2024).total;\nconst westOahu2010 = westOahu.find(d => d.year === 2010).total;\nconst westOahu2024 = westOahu.find(d => d.year === 2024).total;\ndisplay({manoaMin, manoa2010, manoa2024, westOahu2010, westOahu2024});","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"# Enrollment of Older Students","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"## 1. Data Wrangling","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"const ageCampuses = [\"University of Hawai`i at Manoa\", \"University of Hawai`i - West O`ahu\"];\n\nconst olderGroups = new Set([\"45-59 yrs\", \"60+ yrs\"]);\n\nconst ageProportion = d3.rollups(\n rawData.filter(d => ageCampuses.includes(d.CAMPUS) && d.AGE_GROUP !== \"No Data\"),\n v => d3.sum(v, d => d[\"COUNT(1)\"]),\n d => d.CAMPUS,\n d => olderGroups.has(d.AGE_GROUP) ? \"45+ (older)\" : \"Under 45 (younger)\"\n).flatMap(([campus, groups]) =>\n groups.map(([ageGroup, count]) => ({campus, ageGroup, count}))\n);\n\ndisplay(ageProportion);","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"## 2. Data Wrangling Approach\nThe dataset is one row per (semester × campus × age bucket), so no year-by-year collapsing is needed beyond summing across all 15 Fall terms at once. I filter to the same two campuses used in the enrollment-trend question, drop the handful of \"No Data\" rows (they're header-column errors, at most a few dozen headcount each, not students without a recorded age), then bucket the six age categories into a binary 45+ (older) vs. <45 (younger) label and roll up counts with d3.rollups. This collapses 2010–2024 into one static total per campus per bucket, which is what the question asks for (proportion over the whole period, not by year).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"## 3. Two chart types","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"const barPlot = Plot.plot({\n title: \"Share of enrollment 45+ vs. under 45, Fall 2010–2024 (all years combined)\",\n width: 640,\n height: 320,\n\n x: {\n label: \"Institution\"\n },\n\n y: {\n label: \"Share of total enrollment\",\n domain: [0, 1],\n tickFormat: d => `${d * 100}%`\n },\n\n color: {\n legend: true,\n domain: [\"Under 45 (younger)\", \"45+ (older)\"],\n range: [\"#4c78a8\", \"#e45756\"]\n },\n\n marks: [\n Plot.barY(\n ageProportion,\n Plot.stackY({\n x: d => d.campus.replace(\"University of Hawai`i\", \"UH\"),\n y: \"count\",\n fill: \"ageGroup\",\n order: [\"Under 45 (younger)\", \"45+ (older)\"],\n offset: \"normalize\",\n tip: true\n })\n ),\n\n Plot.ruleY([0])\n ]\n});\n\ndisplay(barPlot);","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"display(ageProportion);\ndisplay(ageProportion.map(d => d.campus));\ndisplay(ageProportion.map(d => d.ageGroup));","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"$32","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"## 4. Design Choices\nI kept both charts to the same two-color palette (blue = under 45, red = 45+) so a reader can move between them very easily. The stacked bar is also normalized to 100% rather than raw counts, since Mānoa's enrollment (~286k cumulative) dwarfs West Oʻahu's (~40k), where a raw-count bar would make West Oʻahu's older-student segment nearly invisible even though its share is actually higher. The donut intentionally omits axes and shows the older-share percentage as a center label, since for a binary proportion the exact number matters more than a scale.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"## 5. Results\nOlder students (45+) are a small minority everywhere: 3.99% of cumulative Mānoa enrollment and 7.64% of West Oʻahu enrollment over 2010–2024, 4.43% combined. This isn't very surprising, as Mānoa is a traditional 4-year research campus with a strong 18–24 undergraduate core (that age band alone is ~75% of its enrollment), while West Oʻahu, a newer commuter-oriented upper-division/transfer campus, skews slightly older but is still dominated by students under 35. What is mildly notable is that West Oʻahu's older-student share is almost double Mānoa's, which is consistent with it serving more working adults and transfer/returning students.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"## 6. Which chart fits better?\nThe stacked bar is the better choice for this question. Since the ask is specifically \"proportion of older vs. younger,\" a single-category (one-slice) donut per campus works, but comparing two donuts side by side forces the eye to compare two separate circles' angles — a notoriously hard perceptual task. The 100%-stacked bar puts both campuses on a shared, aligned y-axis, so the height difference between the red segments (3.99% vs. 7.64%) is immediately and precisely comparable. The donut is more visually engaging and fine for a single \"here's the split at Mānoa\" headline number, but for comparing the proportion across institutions, the bar chart communicates the result faster and more accurately.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"2","titling":"auto"}} 2e:"$2d:body"