2c:null 2d:["$","title",null,{"children":"Zeyao Zhou Assignment 2 Basic Visualizations | Zeyao Zhou | Observable"}] 32:T568,# **Enrollment over the years** 1. Use a markdown cell to answer the reflection questions above. **Question**: Is this the best way to present this data? Does it show the trends over time?\ **Answer**: This is a good way to present the enrollment data for those 2 semesters only. However, it does not show any trends over time. **Question**: 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?\ **Answer**: This is an incomplete view of the data. Considering the Covid-19 pandemic, it would have been disruptive to the enrollment numbers. Therefore, it is necessary to look at the data for every semester individually to truly see trends over time. **Question**: Should we use a bar chart? If not, what other chart? If yes, which variant (grouped, stacked, etc.?\ **Answer**: A bar chart should be used to show enrollment trends over time. I would use grouped bar charts sorted by semester to both see the continuous trends and also compare enrollment numbers for each institution. **Question**: What aesthetic elements can improve the visualization?\ **Answer**: I would add small gaps between bars and also add generous margins and whitespace so the visualization does not feel cramped. I would also move the labels to the top instead of on the side in order to save space. 33:T49c,chart = { const [firstYear, lastYear] = d3.extent(enrollment, d => d.year); const traces = campuses.map(campus => { const rows = enrollment.filter(d => d.campus === campus); return { type: "bar", name: campus, x: rows.map(d => d.year), y: rows.map(d => d.count), marker: {color: colors.get(campus)} }; }); const layout = { width, height: 480, barmode: "group", bargap: 0.3, bargroupgap: 0.2, title: { text: `Fall enrollment by campus, ${firstYear} \u2013 ${lastYear}`, x: 0, xref: "paper", xanchor: "left" }, xaxis: {type: "category"}, yaxis: { title: "Students enrolled (Fall headcount)", tickformat: ",", ticklabelstandoff: 8, rangemode: "tozero", gridcolor: "#e6e6e6" }, legend: {orientation: "h", x: 0, y: 1.1, xanchor: "left"}, plot_bgcolor: "white", paper_bgcolor: "white", margin: {t: 90, r: 20, b: 50, l: 80}, font: {family: "system-ui, sans-serif", size: 13, color: "#333"} }; const div = document.createElement("div"); await Plotly.newPlot(div, traces, layout, {staticPlot: true}); return div; }34:T70f,ageBar = { const [firstYear, lastYear] = d3.extent(clean, d => d.year); const groups = [...ageColors.keys()]; const pct = d3.format(".1%"); const num = d3.format(","); const get = (campus, group) => ageSplit.find(d => d.campus === campus && d.group === group); const traces = groups.map(group => ({ type: "bar", orientation: "h", name: group, y: campuses, x: campuses.map(campus => get(campus, group).share), marker: {color: ageColors.get(group)} })); const labels = []; for (const campus of campuses) { let start = 0; for (const group of groups) { const d = get(campus, group); const narrow = d.share < 0.2; labels.push({ x: start + d.share, y: campus, xanchor: narrow ? "left" : "right", xshift: narrow ? 6 : -8, text: `${pct(d.share)} (${num(d.count)})`, showarrow: false }); start += d.share; } } const layout = { width, height: 300, barmode: "stack", bargap: 0.45, title: { text: `Share of Fall enrollment aged 45 and older, ${firstYear} \u2013 ${lastYear} combined`, x: 0, xref: "container", xanchor: "left", pad: {l: 10} }, xaxis: { range: [0, 1], tickformat: ".0%", gridcolor: "#e6e6e6" }, yaxis: {autorange: "reversed", automargin: true, ticklabelstandoff: 8}, annotations: labels, legend: {orientation: "h", x: 0, y: 1.2, xanchor: "left", traceorder: "normal"}, plot_bgcolor: "white", paper_bgcolor: "white", margin: {t: 90, r: 20, b: 55, l: 20}, font: {family: "system-ui, sans-serif", size: 13, color: "#333"} }; const div = document.createElement("div"); await Plotly.newPlot(div, traces, layout, {staticPlot: true}); return div; }35:Ta25,agePie = { const [firstYear, lastYear] = d3.extent(clean, d => d.year); const groups = [...ageColors.keys()]; const pct = d3.format(".1%"); const num = d3.format(","); const n = campuses.length; const get = (campus, group) => ageSplit.find(d => d.campus === campus && d.group === group); const isNarrow = d => d.share < 0.2; const figHeight = 450; const margin = {t: 90, r: 20, b: 60, l: 20}; const domainY = [0, 0.88]; const traces = campuses.map((campus, i) => { const rows = groups.map(group => get(campus, group)); return { type: "pie", labels: rows.map(d => d.group), values: rows.map(d => d.count), text: rows.map(d => `${pct(d.share)}
(${num(d.count)})`), textinfo: "text", textposition: rows.map(d => isNarrow(d) ? "none" : "inside"), insidetextfont: {color: "#222"}, sort: false, direction: "clockwise", rotation: 180 - rows[0].share * 180, marker: {colors: rows.map(d => ageColors.get(d.group)), line: {color: "white", width: 2}}, domain: {x: [i / n + 0.02, (i + 1) / n - 0.02], y: domainY}, showlegend: i === 0 }; }); const pieTitles = campuses.map((campus, i) => ({ x: (i + 0.5) / n, y: 0.93, xref: "paper", yref: "paper", xanchor: "center", yanchor: "bottom", text: campus, showarrow: false, font: {size: 14} })); const plotW = width - margin.l - margin.r; const plotH = figHeight - margin.t - margin.b; const radius = Math.min((1 / n - 0.04) * plotW, (domainY[1] - domainY[0]) * plotH) / 2; const pieBottom = ((domainY[0] + domainY[1]) / 2 * plotH - radius) / plotH; const sliceLabels = campuses.flatMap((campus, i) => groups.map(group => get(campus, group)).filter(isNarrow).map(d => ({ x: (i + 0.5) / n, y: pieBottom, yshift: -6, xref: "paper", yref: "paper", xanchor: "center", yanchor: "top", text: `${pct(d.share)}
(${num(d.count)})`, showarrow: false })) ); const layout = { width, height: figHeight, annotations: [...pieTitles, ...sliceLabels], title: { text: `Fall enrollment by age group, ${firstYear}\u2013${lastYear} combined`, x: 0, xref: "paper", xanchor: "left" }, legend: {orientation: "h", x: 0, y: 1.12, xanchor: "left"}, paper_bgcolor: "white", margin, font: {family: "system-ui, sans-serif", size: 13, color: "#333"} }; const div = document.createElement("div"); await Plotly.newPlot(div, traces, layout, {staticPlot: true}); return div; }36:[{"id":"2c6acc2531469b9e23290046d6d3ab76a0dca5447d501fe3db94cf1dac7be3219972392babc6234afa95fcb2557850d071da2d28b8c20d405f1d4644350c9dda","href":"https://static.observableusercontent.com/files/2c6acc2531469b9e23290046d6d3ab76a0dca5447d501fe3db94cf1dac7be3219972392babc6234afa95fcb2557850d071da2d28b8c20d405f1d4644350c9dda","name":"uh-enr-demographics.txt","type":"text/plain","lastModified":1789891622985,"size":77091},{"id":"195cb41eebc2de655cf5aa375287999dedd3ae3b4b921d213924fd47bda8ffafcb6198f63ba6f47b4b7c1de8a7e00e1bae08b8c0bc319b5a25e46faa70470840","href":"https://static.observableusercontent.com/files/195cb41eebc2de655cf5aa375287999dedd3ae3b4b921d213924fd47bda8ffafcb6198f63ba6f47b4b7c1de8a7e00e1bae08b8c0bc319b5a25e46faa70470840","name":"uh-enr-demographics.csv","type":"text/csv","lastModified":1789893265465,"size":76109}] 30:{"id":"5f51dd814c87ab15","slug":"zeyao-zhou-assignment-2-basic-visualizations","title":"Zeyao Zhou Assignment 2 Basic Visualizations","thumbnail":"50d221474b6b52810d0783c2729592386aa020b62caadd5ffe423e24e9bd8af6","access_level":"public","create_time":"$D2026-09-20T08:06:09.218Z","update_time":"$D2026-09-21T05:20:29.133Z","view_time":null,"first_public_time":"$D2026-09-21T05:21:07.432Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"5682b6b777c953fc","login":"zeyao-zhou","name":"Zeyao Zhou","avatar_url":"https://avatars-next.observableusercontent.com/9f20bbb8d358859d5ff0e688bab61b90ba6c6fd6396b9f0cd61400a871a55e5c","tier":"free_2026","bio":""},"version":178,"publish_version":178,"role":null,"authored":false,"authors":[{"type":"individual","id":"3777be497ac13bca","login":"zeyao-zhou","name":"Zeyao Zhou","avatar_url":"https://avatars-next.observableusercontent.com/9f20bbb8d358859d5ff0e688bab61b90ba6c6fd6396b9f0cd61400a871a55e5c","tier":null,"bio":""}],"members":[{"type":"team","id":"5682b6b777c953fc","login":"zeyao-zhou","name":"Zeyao Zhou","avatar_url":"https://avatars-next.observableusercontent.com/9f20bbb8d358859d5ff0e688bab61b90ba6c6fd6396b9f0cd61400a871a55e5c","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":"Zeyao Zhou Assignment 2 Basic Visualizations","cells":[{"id":1,"value":"# Zeyao Zhou Assignment 2 Basic Visualizations","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"2. Wrangle the data so you have enrollment counts for every year between 2010-2024 for\nyour chosen institutions (Manoa and at least one other).\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"raw = FileAttachment(\"uh-enr-demographics.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"campuses = [\n \"University of Hawai`i at Manoa\",\n \"University of Hawai`i - West O`ahu\"\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"clean = raw\n .filter(d => campuses.includes(d.CAMPUS))\n .map(d => ({\n year: +d.SEMESTER.match(/\\d{4}/)[0],\n campus: d.CAMPUS,\n age_group: d.AGE_GROUP,\n count: d[\"COUNT(1)\"]\n }))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"enrollment = d3.flatRollup(\n clean,\n rows => d3.sum(rows, d => d.count),\n d => d.year,\n d => d.campus\n )\n .map(([year, campus, count]) => ({year, campus, count}))\n .sort((a, b) => d3.ascending(a.year, b.year) || d3.ascending(a.campus, b.campus))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"enrollmentWide = Array.from(\n d3.group(enrollment, d => d.year),\n ([year, rows]) => ({year, ...Object.fromEntries(rows.map(r => [r.campus, r.count]))})\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"Inputs.table(enrollmentWide)\n","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"3. Use a markdown cell to explain your approach to wrangling the data.\n\n**Answer**:\\\nFirst, I looked at what the .csv file looked like. There were 4 columns (COUNT(1), SEMESTER, CAMPUS, AGE_GROUP), and each row is a headcount for 1 age band at 1 campus in 1 Fall term.\\\nThen, I loaded the .csv file into an array of objects.\\\nThen, I identified the 2 UH institutions I want to compare enrollment trends for (Manoa and West O'ahu)\\\nThen, I filtered the raw data to only leave the relevant rows for the 2 UH institutions. I then build cleaner records by mapping data and labels into cleaner data and labels.\\\nThen, I aggregated the data to group the enrollment numbers by year and campus, then summed the counts within each group. The data is then sorted by year and campus.\\\nThen, I process the rows by year, and then each year's row are turned into 1 object with 1 column per campus.\\\nFinally, the number chart is displayed.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"4. Create a visualization that shows the enrollment trends for the chosen institutions over the\nyears.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"import Plotly from \"npm:plotly.js-dist-min\";","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"colors = new Map([\n [campuses[0], \"#0072B2\"],\n [campuses[1], \"#E69F00\"]\n])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"5. Use a markdown cell to explain your design choices.\n\n**Answer**:\\\nI decided to use a grouped bar chart sorted by year in order to observe the enrollment trends over time. Since the data only distinguished Fall semesters, the bars could only be grouped by year. In contrast with the original visualization, I added extra margins between bars and moved the chart labels to the top to save space.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"6. Use a markdown cell to describe the trends you see. Is there a “visual” way to draw more attention to the trends you see?\n\n**Answer**:\\\nRegarding the trends in enrollment numbers, there was a decrease in enrollment at UH Manoa lasting from 2012 to 2019, and then an increase in enrollment lasting from 2020 to 2024. The enrollment numbers at UH West O'ahu increased steadily from 2010 to 2017 and then gradually stagnated from that point forward. A more \"visual\" way to draw more attention to the enrollment trends would be to also use a line chart or a trend line, so it is easier to see increases or decreases in enrollment over time.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"# **Enrollment of older students**\n\n1. Wrangle the data so you have enrollment counts of the older students aggregated over the full time period available in the data for the same UH institutions you chose in the previous question. Find the count of enrolled students that are not in that age group.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"olderGroups = [\"45-59 yrs\", \"60+ yrs\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"ageSummary = d3.rollups(\n clean,\n rows => {\n const total = d3.sum(rows, d => d.count);\n const older = d3.sum(rows.filter(d => olderGroups.includes(d.age_group)), d => d.count);\n return {older, notOlder: total - older, total, shareOlder: older / total};\n },\n d => d.campus\n )\n .map(([campus, v]) => ({campus, ...v}))\n .sort((a, b) => campuses.indexOf(a.campus) - campuses.indexOf(b.campus))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"ageSplit = ageSummary.flatMap(d => [\n {campus: d.campus, group: \"45 and older\", count: d.older, share: d.older / d.total},\n {campus: d.campus, group: \"Under 45 or no data\", count: d.notOlder, share: d.notOlder / d.total}\n])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"Inputs.table(ageSummary, {columns: [\"campus\", \"older\", \"notOlder\"]})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"2. Use a markdown cell to explain your approach to wrangling the data.\n\n**Answer**:\\\nFirst, I defined the older enrollment groups from the .csv file into \"olderGroups\".\\\nThen, I collapsed all of the yearly enrollment numbers into 1 row for each institution, making sure to distinguish between older and notOlder.\\\nThen, I flattened all of the data into 2 rows for the 2 institutions, distinguished by age group, and each with a count and percentage share.\\\nFinally, the number chart is displayed.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"3. Create visualizations using **two different chart types** types that show the proportion of older students to younger students in the chosen institution.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"ageColors = new Map([\n [\"45 and older\", \"#009E73\"],\n [\"Under 45 or no data\", \"#CBD0D6\"]\n])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"4. Use a markdown cell to explain your design choices.\n\n**Answer**:\\\nFor the 2 graphs, I made a stacked bar chart and a pie chart.\\\nFor both charts, they have the same colors, percentages, and count labels. The labels are both on the top of the chart.\\\nFor the stacked bar chart, the bars are horizontal to make better use of space, the older group is stacked first to show a cleaner comparison, and the counts and percentages are placed inside of the bars for compactness.\\\nFor the pie charts, there is 1 pie chart per campus, the pies are of equal size, the slice configuration is the same, and the labels are centered on each of the pies.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"5. Use a markdown cell to describe the results. Are they surprising?\n\n**Answer**:\\\nThe results are surprising because it shows that the smaller campus (West O'ahu) has a larger share of 45+ students compared to the larger campus (Manoa) by about a 3.6% difference. I thought the shares would be relatively the same instead.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"6. Which of the two chart types do you think fits better with the purpose of this question? Which is better at showing the results?\n\n**Answer**:\\\nI think the horizontal bar chart fits better with the purpose of this question because there are only 2 groups of people to measure and compare. With the proximity of the 2 bars, it is easier to compare the 2 campuses side by side and see the differences in the ratio of enrollment numbers.\\\nThe horizontal bar chart is also better at showing the results because it is significantly more compact and easier to read than the pie charts.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"2"}} 31:"$30:body"