28:null 29:["$","title",null,{"children":"Assignment 2 | amkanesh | Observable"}] 2e:T737,---

Enrollment Over the Years

Bar Chart Reflection Questions

**Is this the best way to present this data? Does it show the trends over time?** This is not the best way to present the data, since it only shows two discrete years without any time in between. Enrollment could have fluctuated in the years between 2010-2024, but we can't see them here, nor view any trends; thus, the graph is not very useful on its own. **Is this a complete view of the data? Consider the Covid-19 epidemic, could it have been disruptive? Do we need to look at data for every year individually?** For tracking enrollment over time, it's best to include all years between the oldest and latest dates so we can view fluctuations and trends in the data. Without that knowledge, it seems enrollment at UHM is decreasing slightly, but who knows if that's indicative of a historical trend or just an outlier? Additionally, considering COVID-19, many people returned from the mainland to study at UH campuses instead. Even without looking at the data, I would expect to see an influx of students during the years COVID was most active. **Should we use a bar chart? If not, what other chart? If yes, which variant (grouped, stacked, etc.?)** I'd say a line or area chart is better in this case, since they're often used for tracking values over time. **What aesthetic elements can improve the visualization?** This is just personal preference, but this specific blue/orange combo is very much giving Microsoft Word to me, which can be improved! For example, using a more unified color palette can make something a bit more visually pleasing while still retaining contrast. Or even changing the font.

2f:T76a,const canvas = DOM.element('canvas'); let ctx = canvas.getContext("2d"); let h = canvas.height; // for dynamically changing gradient values // gradient for uhm fill var gradient = ctx.createLinearGradient(0, 0, 0, h*3); gradient.addColorStop(0, 'rgba(167, 206, 120,.75)'); gradient.addColorStop(1, 'rgba(167, 206, 120,0)'); // gradient for kcc fill var gradient2 = ctx.createLinearGradient(0, h*2, 0, h*3.25); gradient2.addColorStop(0, 'rgba(75, 116, 112,.75)'); gradient2.addColorStop(1, 'rgba(75, 116, 112,0)'); // data const data = { labels: uhm.map(item => item.year), datasets: [{ label: 'Kapi`olani CC', data: kcc.map(item => item.total), fill: true, backgroundColor: gradient2, borderColor: 'rgb(75, 116, 112)', pointBackgroundColor: 'white', pointBorderWidth: 3, pointRadius: 5, tension: 0.05 }, { label: 'UH Manoa', data: uhm.map(item => item.total), fill: true, backgroundColor: gradient, borderColor: 'rgb(136, 171, 117)', pointBackgroundColor: 'white', pointBorderWidth: 3, pointRadius: 5, tension: 0.05 }, ] }; const config = { type: 'line', data: data, options: { scales: { x: { title: { display: true, text: 'Semester', font: { size: 14, weight: 'bold' } } }, y: { title: { display: true, text: 'Enrollment', font: { size: 14, weight: 'bold' } } } }, plugins: { title: { display: true, text: 'Per-Semester Enrollment at UH Manoa and Kapi`olani CC (2010-2024)', color: '#333', font: { size: 18, weight: 'bold', family: 'Helvetica' } } } } }; new chart(canvas, config); display(canvas);30:T5cf,

Design Choices and Trends

I chose an area plot to help better visualize the changes in enrollment over time, and I used shades of green with white points to match UH's school colors. To further add contrast within the same color family, one green is warmer/lighter while the other is cooler/darker. I also felt filling in the entire area under the curve with a solid color was too harsh + it makes the lower curve difficult to see, so I added a gradient with lower opacity at the bottom for better visibility. Regarding trends, it seems enrollment for Kapi`olani CC has decreased steadily over time. In comparison, UH Manoa experienced a dip in enrollment until around 2019, and from then on enrollment began increasing. Considering COVID-19 hit the islands around 2020, which corresponds to the start of enrollment increases, it seems likely these things are related---for example, one contributing factor could be that during COVID, many local students returned to Hawai'i from mainland colleges and transferred to UH, thereby increasing enrollment numbers. ---

Enrollment of Older Students

Data Wrangling

Finding the proportion of older to younger students is an easier task, fortunately. First, to get the total number of students, I call two functions per campus: one to filter for all students over 45, and another for everyone under 45. After filtering, I then reduce the list and sum up all students that fit this category. UH Manoa:31:[{"id":"7cca5f1dd7ae09f0c44cd94d40727cb2a62ec6b0e648d1495fdffb8c7cc09b94e39e91545a10f42ae1a4a695412fecb9238bd505693eedb643ac6b185d6e659f","href":"https://static.observableusercontent.com/files/7cca5f1dd7ae09f0c44cd94d40727cb2a62ec6b0e648d1495fdffb8c7cc09b94e39e91545a10f42ae1a4a695412fecb9238bd505693eedb643ac6b185d6e659f","name":"image.png","type":"image/png","lastModified":1790138325033,"size":129642}] 2c:{"id":"4acf7b774b45f301","slug":"assignment-2","title":"Assignment 2","thumbnail":"da88cc37ecfd29a0e615ce37b2d0b3294d7f066350343b65170d1320916e55d9","access_level":"public","create_time":"$D2026-09-22T19:13:13.662Z","update_time":"$D2026-09-24T19:48:43.241Z","view_time":null,"first_public_time":"$D2026-09-24T00:57:59.224Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"46fc9a86c9e9b267","login":"amkanesh","name":"amkanesh","avatar_url":"https://avatars-next.observableusercontent.com/344d8f336045bba38b3aa6cb556aa6630d7dc5114f4be6d90775fee1515e968c","tier":"free_2026"},"version":466,"publish_version":466,"role":null,"authored":false,"authors":[{"type":"individual","id":"01a83e1800b31938","login":"amkanesh","name":"amkanesh","avatar_url":"https://avatars-next.observableusercontent.com/344d8f336045bba38b3aa6cb556aa6630d7dc5114f4be6d90775fee1515e968c","tier":null}],"members":[{"type":"team","id":"46fc9a86c9e9b267","login":"amkanesh","name":"amkanesh","avatar_url":"https://avatars-next.observableusercontent.com/344d8f336045bba38b3aa6cb556aa6630d7dc5114f4be6d90775fee1515e968c","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","cells":[{"id":1,"value":"# Assignment 2","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"$2e","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"

Data Wrangling

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"survey = d3.csv(\"https://raw.githubusercontent.com/nuritk/data/refs/heads/main/uh-enr-demographics.csv\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"The data we're looking for is the **semester enrollment of UH Manoa students** and the **semester enrollment of Kapi`olani CC students**, separately. The approach to both is the same:\n\n1. Filter for the **desired campus**\n2. Group by **semester**\n3. Step 2 returns a nested list of \\[year, Object[]], so we must **sum up the COUNT(1) values of each object per year** (map, reduce)\n4. Sort by **semester date**\n\nAlong the way, I converted all numbers from strings to ints.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"UH Manoa data:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"let uhm = d3.groups(\n survey.filter(x => x.CAMPUS === \"University of Hawai`i at Manoa\"),\n x => x.SEMESTER).map(([year, items]) => {\n const total = items.reduce(\n (accum, item) => accum + parseInt(item[\"COUNT(1)\"]),\n 0\n )\n return { year, total }\n}).sort((a,b) => a.year.localeCompare(b.year));\n\ndisplay(uhm);","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"...and the Kapi`olani CC data:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"let kcc = d3.groups(\n survey.filter(x => x.CAMPUS === \"Kapi`olani Community College\"),\n x => x.SEMESTER).map(([year, items]) => {\n const total = items.reduce(\n (accum, item) => accum + parseInt(item[\"COUNT(1)\"]),\n 0\n )\n return { year, total }\n}).sort((a,b) => a.year.localeCompare(b.year));\n\ndisplay(kcc);","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"

Visualization

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"import chart from \"npm:chart.js/auto\";","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"$2f","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"$30","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"let over45uhm = survey.filter(x => x.CAMPUS == \"University of Hawai`i at Manoa\" && (x.AGE_GROUP == \"45-59 yrs\" || x.AGE_GROUP == \"60+ yrs\"))\n .reduce((accum, item) => {\n return accum + parseInt(item[\"COUNT(1)\"]);\n }, 0);\n\nlet under45uhm = survey.filter(x => x.CAMPUS == \"University of Hawai`i at Manoa\" && (x.AGE_GROUP != \"45-59 yrs\" && x.AGE_GROUP != \"60+ yrs\"))\n .reduce((accum, item) => {\n return accum + parseInt(item[\"COUNT(1)\"]);\n }, 0);\ndisplay(over45uhm);\ndisplay(under45uhm);\n","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"...and Kapi`olani CC:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"let over45kcc = survey.filter(x => x.CAMPUS == \"Kapi`olani Community College\" && (x.AGE_GROUP == \"45-59 yrs\" || x.AGE_GROUP == \"60+ yrs\"))\n .reduce((accum, item) => {\n return accum + parseInt(item[\"COUNT(1)\"]);\n }, 0);\n\nlet under45kcc = survey.filter(x => x.CAMPUS == \"Kapi`olani Community College\" && (x.AGE_GROUP != \"45-59 yrs\" && x.AGE_GROUP != \"60+ yrs\"))\n .reduce((accum, item) => {\n return accum + parseInt(item[\"COUNT(1)\"]);\n }, 0);\n\ndisplay(over45kcc);\ndisplay(under45kcc);","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"Finally, since we're interested in the **proportion** of older to younger students, I will normalize each value to get percentage values.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"let under45 = [under45uhm/(under45uhm + over45uhm), under45kcc/(under45kcc+over45kcc)];\nlet over45 = [over45uhm/(under45uhm + over45uhm), over45kcc/(under45kcc+over45kcc)];\n//display(under45);\n//display(over45);","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"

Visualizations

\n\nFor my first type of chart, I chose a stacked and grouped bar chart, which is usually used for proportions. This is a good way to compare the demographics both within and across campuses, as well as show how much larger one group is than the other.\n\nI picked contrasting colors to make the age groups easily visible, especially since the over 45 population was so small. I also kept the bars slightly transparent so the grid lines would be visible underneath.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"const data1 = {\n labels: ['UH Manoa', 'Kapi`olani CC'], // categorical labels\n datasets: [\n {\n label: 'Under 45',\n data: under45,\n backgroundColor: '#97D9FFaa'\n },\n {\n label: 'Over 45',\n data: over45,\n backgroundColor: '#F08700aa'\n }\n ]\n};\n\nconst config = {\n type: 'bar',\n data: data1,\n options: {\n responsive: true,\n scales: {\n x: {\n stacked: true\n },\n y: {\n stacked: true,\n ticks: {\n callback: function(value, index, ticks) {\n return value * 100 + '%';\n }\n }\n }\n },\n plugins: {\n title: {\n display: true,\n text: 'Age of Students at UH Manoa and Kapi`olani CC from 2010-2024',\n color: '#333',\n font: {\n size: 18,\n weight: 'bold',\n family: 'Helvetica'\n }\n }\n }\n }\n};\n\nlet canvas = DOM.element('canvas');\nnew chart(canvas, config);\ndisplay(canvas);","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"For my second visualization, I chose a grouped/nested pie chart instead. This is also a good way to show proportions, but this instead emphasizes differences between the same categories across campuses. Whereas the bar chart showed how much larger a certain age group was within one campus, this chart compares the age groups with each other.\n\nFor aesthetic choices, I chose to keep campuses within the same color family (UH Manoa has greens, Kapi`olani CC has reds/oranges). The younger age group across both campuses has darker colors, while the older age group has lighter colors. This keeps everything consistent, intuitive, and more readable at a glance, especially since there are no initially visible numbers for this kind of chart (they show up on hover, however).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"const data1 = {\n labels: ['UH Manoa', 'Kapi`olani CC'], // categorical labels\n datasets: [\n {\n label: 'Under 45',\n data: under45,\n backgroundColor: ['rgb(58, 96, 110)','rgb(219, 84, 97)'] // outer ring colors (under 45)\n },\n {\n label: 'Over 45',\n data: over45,\n backgroundColor: ['rgb(104, 176, 171)','rgb(255, 202, 175)'] // inner ring colors (over 45)\n }\n ]\n};\n\nconst config = {\n type: 'pie',\n data: data1,\n options: {\n responsive: true,\n plugins: {\n title: {\n display: true,\n text: 'Age of Students at UH Manoa and Kapi`olani CC from 2010-2024',\n color: '#333',\n font: {\n size: 18,\n weight: 'bold',\n family: 'Helvetica'\n }\n }\n }\n }\n};\n\nlet canvas = DOM.element('canvas');\nnew chart(canvas, config);\ndisplay(canvas);","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"

Results & Discussion

\n\nThe charts show that the students enrolled at UH Manoa and Kapi\\`olani CC from 2010-2024 are predominantly under 45, which is about what is expected for a college campus. Between the two campuses, Kapi\\`olani CC had a slightly larger proportion of older students.\n\nRegarding which is better at showing proportions, I would say it really depends on what you'd like to know. The bar chart is good at visualizing which groups dominate across all campuses, but the nested pie chart is better at comparing the demographics between campuses. Perhaps, then, the bar chart has an advantage in this scenario.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"2","titling":"auto"}} 2d:"$2c:body"