3e:null 3f:["$","title",null,{"children":"Assignment 2: Basic Visualizations | Aris Carlos | Observable"}] 45:T98b,Before analyzing the enrollment data, I will review this bar chart showing enrollment at the institutions " University of Hawai'i at Manoa" and "University of Hawai'i - West O'ahu" for the semesters "Fall 2010" and "Fall 2024". The original end goal is to see the overall trends in enrollment numbers (meaning, the sum of all people enrolled for a specific institution for a given semester, regardless of their age) over the years 2010-2024 and perform that comparison for at least two of UH institutions. In this case, we will compare Fall enrollment at UH Manoa and UH West Oahu. At a glance, this isn't the best way to present the data. Sure, it can be inferred that there were changes in the total enrollment for the Fall semesters at UH Manoa and UH West Oahu between 2010 and 2024, since there's a slight difference for the bars representing UH Manoa's Fall enrollment in 2010 versus 2024, and a noticeable difference in the bars representing UH West Oahu's Fall enrollment in 2010 versus 2024. However, while the bars show the difference in enrollment between 2010 and 2024, they do not reveal how enrollment changed during the years in between. The analysis omits the years between 2010 and 2024, so it does not show a complete view of the data or the trends over time. A good example of where the trend might change is around the time the COVID-19 pandemic struck. There could have been a disruption during that time, but this bar chart doesn't show it. We may need to look at each year individually, or at least include that in the analysis and the final visual, to identify that change/disruption. Regarding the chart choice, we shouldn't use a bar chart if our goal is to observe overall trends in enrollment numbers. I think a line chart would be better suited for this task because we can put time on one axis (each year from 2010 to 2024) and enrollment counts on the other. With both axes, we can plot enrollment counts for each year and connect the data points with a line to better visualize the trend over time. Since we are comparing two campuses, we will perform the aforementioned process twice, one time for each campus, while also using one color to distinguish UH Manoa and another to distinguish UH West Oahu. With a clear title, readable year ticks, clean gridlines, and a legend, our final visualization would better showcase overall trends in Fall enrollment for both UH Manoa and UH West Oahu from 2010 to 2024.46:T558,enrollmentChart = { const data = [ { x: annual.map(d => d.year), y: annual.map(d => d.manoa), type: "scatter", mode: "lines+markers", name: "UH Manoa", line: { color: "#024731", width: 3 }, marker: { size: 7, symbol: "circle" } }, { x: annual.map(d => d.year), y: annual.map(d => d.westOahu), type: "scatter", mode: "lines+markers", name: "UH West Oahu", line: { color: "#A71930", width: 3, dash: "dash" }, marker: { size: 7, symbol: "diamond" } } ]; const layout = { title: { text: "Fall enrollment at UH Manoa and UH West Oahu, 2010–2024" }, width: 800, height: 470, font: { family: "Arial, sans-serif", size: 13, color: "#333333" }, paper_bgcolor: "#FFFFFF", plot_bgcolor: "#FFFFFF", xaxis: { title: {text: "Year"}, dtick: 1, tickformat: "d", showgrid: false }, yaxis: { title: {text: "Enrolled students"}, rangemode: "tozero", tickformat: ",", gridcolor: "#EAEAEA" }, legend: {orientation: "h"}, margin: {l: 80, r: 30, t: 80, b: 80} }; const div = DOM.element("div"); await Plotly.newPlot(div, data, layout); return div; }47:T48d,### #5. Design Choices As mentioned in my initial reflection, I think a line chart is better suited for observing the overall enrollment trends. Each point represents a Fall semester’s enrollment, and connecting those points makes it easier to follow how enrollment changes from one year to the next. Both campuses use the same axes, so we can also see the difference in their enrollment sizes. However, because Manoa has substantially more students, West Oahu’s changes appear smaller on this shared scale. For the colors, I chose Manoa’s official green (#024731) and West Oahu’s official red (#A71930). I wanted the visualization to reflect the colors associated with each campus. I also used a solid line with circular markers for Manoa and a dashed line with diamond markers for West Oahu, so color is not the only way to distinguish them. With a white background, light gridlines, readable year ticks, and labeled axes, the visualization keeps the focus on the enrollment trends. Color references: [UH Manoa](https://manoa.hawaii.edu/brand/brand-elements/typography-colors.php) and [UH West Oahu](https://westoahu.hawaii.edu/brand/identity/colors/).48:T468,### #6. Observed Trends and Visual Emphasis Looking at the full time period, we can see why the original comparison between only 2010 and 2024 was incomplete. Manoa’s enrollment decreased from 20,337 in 2010 to a low of 17,490 in 2019, then recovered to 20,028 in 2024. Sure, its starting and ending totals are relatively similar, but those two values alone don't show the decline and recovery in between, compared to what we saw in that first bar chart at the very beginning. West Oahu shows a different pattern. Its enrollment increased from 1,471 in 2010 to a peak of 3,168 in 2020, then decreased to 2,814 in 2024. Despite that later decline, its final enrollment was still substantially higher than its enrollment in 2010. Regarding COVID-19, both campuses recorded enrollment increases between 2019 and 2020. This does not mean the pandemic had no effect, but it does mean we should not assume its occurrence would show up as an immediate enrollment decline. The dataset alone does not establish what caused these changes. **[YOUR INPUT: In one or two sentences, explain which trend stood out to you most and why.]**49:T500,### #2. Data Wrangling Explanation For this question, we are interested in the age composition across the whole time period, so I reused the filtered dataset from the first section rather than calculating a separate result for each year. For each campus, I added the enrollment counts from all Fall semesters between 2010 and 2024. I then filtered for the “45-59 yrs” and “60+ yrs” categories and combined their counts. I labeled this group “45+” because the specified age categories include students who are 45 years old. The dataset also contains records with unknown ages. I calculated those separately, then subtracted both older and unknown-age enrollment from the total to find enrollment under 45. Otherwise, we would be treating students with unknown ages as younger students without knowing whether that is true. I divided each group’s count by the campus’s total enrollment and multiplied by 100 to calculate its percentage. These are combined enrollment counts, not the number of unique people who attended during the entire period. A student enrolled in several Fall semesters contributes to the total several times. The percentages therefore describe the composition of those combined enrollments, rather than an average of the yearly percentages.4a:T6ab,ageSummaryBarChart = { const data = [ { x: ageSummary.map(d => d.olderPercent), y: ageSummary.map(d => d.name), type: "bar", orientation: "h", name: "45+", marker: { color: ["#024731", "#A71930"] }, text: ageSummary.map( d => d.olderPercent.toFixed(2) + "%" ), textposition: "inside", insidetextanchor: "middle", textfont: {color: "#FFFFFF", size: 11}, showlegend: false }, { x: ageSummary.map(d => d.youngerPercent), y: ageSummary.map(d => d.name), type: "bar", orientation: "h", name: "Under 45", marker: {color: "#DEDEDE"} }, { x: ageSummary.map(d => d.unknownPercent), y: ageSummary.map(d => d.name), type: "bar", orientation: "h", name: "Unknown age", marker: {color: "#666666"} } ]; const layout = { title: { text: "Age composition of Fall enrollments, 2010–2024 combined" + "
^{Age 45+: Manoa in green; West Oahu in red}" }, width: 800, height: 370, font: { family: "Arial, sans-serif", size: 13, color: "#333333" }, paper_bgcolor: "#FFFFFF", plot_bgcolor: "#FFFFFF", barmode: "stack", bargap: 0.45, xaxis: { title: {text: "Percentage of campus enrollment"}, range: [0, 100], dtick: 20, ticksuffix: "%", gridcolor: "#EAEAEA" }, yaxis: { autorange: "reversed", automargin: true }, legend: {orientation: "h"}, margin: {l: 130, r: 30, t: 95, b: 80} }; const div = DOM.element("div"); await Plotly.newPlot(div, data, layout); return div; }4b:Tbd3,ageSummaryPieChart = { const data = [ { values: [ ageSummary[0].older, ageSummary[0].younger, ageSummary[0].unknown ], labels: ["45+", "Under 45", "Unknown age"], type: "pie", name: "UH Manoa", domain: { x: [0, 0.46], y: [0, 0.85] }, marker: { colors: ["#024731", "#DEDEDE", "#666666"] }, sort: false, direction: "clockwise", text: [ "45+
" + ageSummary[0].olderPercent.toFixed(2) + "%", "Under 45
" + ageSummary[0].youngerPercent.toFixed(2) + "%", "" ], textinfo: "text", textposition: "inside", insidetextorientation: "horizontal", textfont: { color: ["#FFFFFF", "#333333", "#FFFFFF"], size: 12 }, hovertemplate: "%{label}: %{value:,} (%{percent})%{fullData.name}", showlegend: false }, { values: [ ageSummary[1].older, ageSummary[1].younger, ageSummary[1].unknown ], labels: ["45+", "Under 45", "Unknown age"], type: "pie", name: "UH West Oahu", domain: { x: [0.54, 1], y: [0, 0.85] }, marker: { colors: ["#A71930", "#DEDEDE", "#666666"] }, sort: false, direction: "clockwise", text: [ "45+
" + ageSummary[1].olderPercent.toFixed(2) + "%", "Under 45
" + ageSummary[1].youngerPercent.toFixed(2) + "%", "" ], textinfo: "text", textposition: "inside", insidetextorientation: "horizontal", textfont: { color: ["#FFFFFF", "#333333", "#FFFFFF"], size: 12 }, hovertemplate: "%{label}: %{value:,} (%{percent})%{fullData.name}", showlegend: false } ]; const layout = { title: { text: "Age composition of Fall enrollments, 2010–2024 combined" }, width: 800, height: 500, font: { family: "Arial, sans-serif", size: 12, color: "#333333" }, paper_bgcolor: "#FFFFFF", margin: {t: 80, b: 60, l: 30, r: 30}, annotations: [ { text: "UH Manoa", x: 0.23, y: 0.98, xref: "paper", yref: "paper", xanchor: "center", yanchor: "top", showarrow: false, font: {color: "#024731", size: 18} }, { text: "UH West Oahu", x: 0.77, y: 0.98, xref: "paper", yref: "paper", xanchor: "center", yanchor: "top", showarrow: false, font: {color: "#A71930", size: 18} }, { text: "Dark gray = unknown age; hover over slices for counts.", x: 0.5, y: -0.08, xref: "paper", yref: "paper", xanchor: "center", showarrow: false, font: {size: 12, color: "#666666"} } ] }; const div = DOM.element("div"); await Plotly.newPlot(div, data, layout); return div; }4c:T54b,### #4. Design Choices For this question, we are interested in the proportion of older students rather than which campus has more students overall. Because the campuses have very different enrollment totals, I used percentages to make the comparison more meaningful. I chose a 100% stacked bar chart and two pie charts so we can compare how these chart types present the same information. I carried over the campus colors from the first visualization: Manoa’s older-student group is green, while West Oahu’s is red. Students under 45 are shown in light gray, and unknown ages are shown in dark gray. This makes the group we are interested in stand out while still showing the rest of each campus’s age composition. In the stacked bar chart, both older-student segments start at zero, making their lengths easier to compare. Each complete bar represents 100% of its campus’s combined enrollment. The pie charts show those same proportions as parts of a whole, with one equal-sized pie for each campus. I placed the campus names above the pies and the main category labels inside the slices to prevent the labels from overlapping. Unknown ages remain included in both charts, although their portions are very small. They account for 20 enrollments at Manoa and 35 at West Oahu. Hovering over the pie slices provides their counts and percentages.4d:[{"id":"26354873c53d0a36118caf4122aba1fe8e370020fbc676c7d24a20a1e9034a7c2c40d7f0dacd63dec01f1b21238bdeee780f01966b572520349997249f498ba4","href":"https://static.observableusercontent.com/files/26354873c53d0a36118caf4122aba1fe8e370020fbc676c7d24a20a1e9034a7c2c40d7f0dacd63dec01f1b21238bdeee780f01966b572520349997249f498ba4","name":"image.png","type":"image/png","lastModified":1790319532443,"size":54849}] 43:{"id":"c5880fd1ab011528","slug":"assignment-2-basic-visualizations","title":"Assignment 2: Basic Visualizations","thumbnail":"b856f3153e3951dfe7841ef8d79bc8e97771a32543cb4ff664935ee8a7f8692f","access_level":"public","create_time":"$D2026-09-24T23:53:59.985Z","update_time":"$D2026-10-09T07:06:00.091Z","view_time":null,"first_public_time":"$D2026-09-25T08:49:43.503Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"405cae645c2e1d6b","login":"aris-carlos","name":"Aris Carlos","avatar_url":"https://avatars-next.observableusercontent.com/3be1db797c8aab7d44dc0d6eb3c3611d82fecbae7500e09872659ab1285741f6","tier":"free_2026","bio":""},"version":207,"publish_version":207,"role":null,"authored":false,"authors":[{"type":"individual","id":"b8d286dabeed650d","login":"aris-carlos","name":"Aris Carlos","avatar_url":"https://avatars-next.observableusercontent.com/3be1db797c8aab7d44dc0d6eb3c3611d82fecbae7500e09872659ab1285741f6","tier":null,"bio":""}],"members":[{"type":"team","id":"405cae645c2e1d6b","login":"aris-carlos","name":"Aris Carlos","avatar_url":"https://avatars-next.observableusercontent.com/3be1db797c8aab7d44dc0d6eb3c3611d82fecbae7500e09872659ab1285741f6","tier":"free_2026","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Assignment 2: Basic Visualizations","cells":[{"id":1,"value":"# Assignment 2: Basic Visualizations","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"### Aris Carlos - ICS 684","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"## Enrollment Over The Years - Reflection","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"**#1. Reflection**","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"FileAttachment(\"image.png\").image()","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"$45","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"## Enrollment Over the Years — Analysis\n\n### #2. Data Wrangling","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"import Plotly from \"npm:plotly.js-dist-min\";\nimport * as d3 from \"npm:d3\";","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"const raw = await d3.csv(\n \"https://raw.githubusercontent.com/nuritk/data/refs/heads/main/uh-enr-demographics.csv\"\n);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"let enrollment = raw.map(d => ({\n campus: d.CAMPUS,\n year: Number(d.SEMESTER.replace(\"Fall \", \"\")),\n count: Number(d[\"COUNT(1)\"]),\n age: d.AGE_GROUP\n}))","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"let selected = enrollment.filter(d =>\n (\n d.campus === \"University of Hawai`i at Manoa\" ||\n d.campus === \"University of Hawai`i - West O`ahu\"\n ) &&\n d.year >= 2010 &&\n d.year <= 2024\n)","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"annual = {\n const results = [];\n\n for (let year = 2010; year <= 2024; year++) {\n const yearRows = selected.filter(d => d.year === year);\n\n const manoaTotal = yearRows\n .filter(d => d.campus === \"University of Hawai`i at Manoa\")\n .reduce((total, d) => total + d.count, 0);\n\n const westOahuTotal = yearRows\n .filter(d => d.campus === \"University of Hawai`i - West O`ahu\")\n .reduce((total, d) => total + d.count, 0);\n\n results.push({\n year: year,\n manoa: manoaTotal,\n westOahu: westOahuTotal\n });\n }\n\n return results;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"### #3. Data Wrangling Explanation\n\nBefore creating the visualization, I needed to combine the enrollment counts for each campus in each year. The original dataset separates enrollment by age group, so looking at an individual record would not give us the campus’s total enrollment for that semester.\n\nFirst, I converted the enrollment counts and years to numbers and filtered the data to include UH Manoa and UH West Oahu from 2010 through 2024. Since the dataset contains Fall semesters only, each year represents a Fall enrollment snapshot.\n\nNext, I used a loop to go through each year in order. For each year, I filtered the records by campus and used reduce() to add the enrollment counts across all age groups. I also included records with unknown ages because those students still contribute to total enrollment. The final result contains one object per year, with separate totals for Manoa and West Oahu.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"### #4. Enrollment Trends Visualization","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"$46","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"$47","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"$48","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"## Enrollment of Older Students — Analysis\n\n### #1. Data Wrangling","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"ageSummary = {\n const results = [];\n\n for (const campus of [\n \"University of Hawai`i at Manoa\",\n \"University of Hawai`i - West O`ahu\"\n ]) {\n const rows = selected.filter(d => d.campus === campus);\n\n const total = rows.reduce(\n (sum, d) => sum + d.count,\n 0\n );\n\n const older = rows\n .filter(d => d.age === \"45-59 yrs\" || d.age === \"60+ yrs\")\n .reduce((sum, d) => sum + d.count, 0);\n\n const unknown = rows\n .filter(d => d.age === \"No Data\")\n .reduce((sum, d) => sum + d.count, 0);\n\n const younger = total - older - unknown;\n\n let name = \"UH West Oahu\";\n\n if (campus === \"University of Hawai`i at Manoa\") {\n name = \"UH Manoa\";\n }\n\n results.push({\n name: name,\n total: total,\n older: older,\n younger: younger,\n unknown: unknown,\n olderPercent: older / total * 100,\n youngerPercent: younger / total * 100,\n unknownPercent: unknown / total * 100\n });\n }\n\n return results;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"$49","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"### #3. Age Composition Visualizations\n\n#### 100% Stacked Bar Chart","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"$4a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"#### Pie Charts","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"$4b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"$4c","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"### #5. Results and Reflection\n\nLooking at the percentages, students aged 45 and above account for approximately 3.99% of Manoa’s combined Fall enrollments and 7.63% of West Oahu’s. This means West Oahu’s older-student share is about 1.9 times Manoa’s, a difference of approximately 3.65 percentage points. Students under 45 still make up the large majority of enrollment at both campuses.\n\nHowever, if we look at the actual counts, Manoa has more older-student enrollments: 11,396 compared with 3,039 at West Oahu. This is an example of why the distinction between counts and proportions matters. Manoa has the larger count, but older students make up a larger share of West Oahu’s enrollment.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"### #6. Comparing the Chart Types\n\nAt a glance, both chart types show that older students make up a relatively small proportion of enrollment at each campus. The stacked bars place the older-student segments at the same starting point, allowing us to compare their lengths directly. The pie charts emphasize how each age group contributes to the whole, but comparing slices across two separate circles is less straightforward. The percentage labels help make the difference more precise in both visualizations.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4d","stdlib":"2"}} 44:"$43:body"