31:Ta20,viewof menaAreaHover = { const width = 900; const height = 720; const margin = { top: 40, right: 20, bottom: 40, left: 40 }; const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); const keys = menaCountries.slice(); const series = d3.stack().keys(keys).order(d3.stackOrderAscending)(mena); const x = d3 .scaleLinear() .domain(d3.extent(mena, (d) => d.Date)) .range([margin.left, width - margin.right]); const y = d3 .scaleLinear() .domain([0, d3.max(series, (s) => d3.max(s, (d) => d[1]))]) .nice() .range([height - margin.bottom, margin.top]); const xAxis = (g) => { g.attr("transform", `translate(0,${height - margin.bottom})`).call( d3.axisBottom(x).tickFormat(d3.format("d")).tickSizeOuter(0) ); }; const yAxis = (g) => { g.attr("transform", `translate(${margin.left},0)`).call( d3.axisLeft(y).ticks(5) ); }; svg.append("g").call(xAxis); svg.append("g").call(yAxis); const area = d3 .area() .x((d) => x(d.data.Date)) .y0((d) => y(d[0])) .y1((d) => y(d[1])); svg .append("g") .selectAll("path") .data(series) .join("path") .attr("class", (d) => "myArea " + d.key) .attr("fill", ({ key }) => menaColorScale(key)) .attr("d", area) .style("cursor", "pointer") .on("pointerenter", (event, d) => highlight(d.key)) .on("pointerleave", noHighlight) .append("title") .text((d) => d.key); const size = 14; const gap = 6; const legend = svg .append("g") .attr("transform", `translate(${margin.left},${margin.top})`); legend .selectAll("rect") .data(keys) .join("rect") .attr("x", 0) .attr("y", (d, i) => i * (size + gap)) .attr("width", size) .attr("height", size) .attr("fill", (d) => menaColorScale(d)) .style("cursor", "pointer") .on("pointerenter", (event, d) => highlight(d)) .on("pointerleave", noHighlight); legend .selectAll("text") .data(keys) .join("text") .attr("x", size + 6) .attr("y", (d, i) => i * (size + gap) + size - 2) .text((d) => d) .style("cursor", "pointer") .on("pointerenter", (event, d) => highlight(d)) .on("pointerleave", noHighlight); function highlight(name) { svg.selectAll(".myArea").style("opacity", 0.08).attr("stroke", null); svg .select("." + name) .style("opacity", 1) .attr("stroke", "#fff") .attr("stroke-width", 0.1); } function noHighlight() { svg.selectAll(".myArea").style("opacity", 1).attr("stroke", null); } return svg.node(); }32:Ta42,viewof menaArea = { const width = 900; const height = 720; const margin = { top: 40, right: 20, bottom: 40, left: 60 }; const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); const keys = menaCountries.slice(); // stable order const series = d3.stack().keys(keys).order(d3.stackOrderAscending)(mena); const x = d3 .scaleLinear() .domain(d3.extent(mena, (d) => d.Date)) .range([margin.left, width - margin.right]); const y = d3 .scaleLinear() .domain([0, d3.max(series, (s) => d3.max(s, (d) => d[1]))]) .nice() .range([height - margin.bottom, margin.top]); const xAxis = (g) => { g.attr("transform", `translate(0,${height - margin.bottom})`).call( d3.axisBottom(x).tickFormat(d3.format("d")).tickSizeOuter(0) ); }; const yAxis = (g) => { g.attr("transform", `translate(${margin.left},0)`).call( d3.axisLeft(y).ticks(5) ); }; svg.append("g").call(xAxis); svg.append("g").call(yAxis); const area = d3 .area() .x((d) => x(d.data.Date)) .y0((d) => y(d[0])) .y1((d) => y(d[1])); // Areas svg .append("g") .selectAll("path") .data(series) .join("path") .attr("class", (d) => "myArea " + d.key) .attr("fill", ({ key }) => menaColorScale(key)) .attr("d", area) .style("cursor", "pointer") .on("pointerenter", (event, d) => highlight(d.key)) .on("pointerleave", noHighlight) .append("title") .text((d) => d.key); // Legend const size = 14; const gap = 6; const legend = svg .append("g") .attr("transform", `translate(${margin.left},${margin.top})`); legend .selectAll("rect") .data(keys) .join("rect") .attr("x", 0) .attr("y", (d, i) => i * (size + gap)) .attr("width", size) .attr("height", size) .attr("fill", (d) => menaColorScale(d)) .style("cursor", "pointer") .on("pointerenter", (event, d) => highlight(d)) .on("pointerleave", noHighlight); legend .selectAll("text") .data(keys) .join("text") .attr("x", size + 6) .attr("y", (d, i) => i * (size + gap) + size - 2) .text((d) => d) .style("cursor", "pointer") .on("pointerenter", (event, d) => highlight(d)) .on("pointerleave", noHighlight); function highlight(name) { svg.selectAll(".myArea").style("opacity", 0.01).attr("stroke", null); svg .select("." + name) .style("opacity", 1) .attr("stroke", "#fff") .attr("stroke-width", 0.2); } function noHighlight() { svg.selectAll(".myArea").style("opacity", 1).attr("stroke", null); } return svg.node(); }33:T4ea,normalizedSAMENA2 = { const xy = { x: "Date", y: "Total", z: "Region", offset: "expand" // normalize to 100% }; return Plot.plot({ width: 860, height: 460, marginLeft: 90, marginBottom: 60, x: { label: "Date", tickFormat: formatYear, tickRotate: 45 }, y: { grid: true, label: "Share of total (SA vs MENA)", percent: true }, color: { domain: ["MENA", "SA"], range: ["#E84A27", "#13294B"], legend: true }, marks: [ Plot.areaY( totalsLong, Plot.stackY({ ...xy, fill: "Region", curve: "monotone-x", title: (d) => `${d.Region} — ${formatYear(d.Date)}` }) ), Plot.lineY( totalsLong, Plot.stackY1({ ...xy, stroke: "white", strokeWidth: 1 }) ), Plot.ruleY([0, 0.25, 0.5, 0.75, 1]), Plot.ruleX([1983], { stroke: "#fff", strokeDash: [4, 3], strokeWidth: 1.5, title: "1983 — CSAMES founded" }), Plot.text([{ Date: 1983, label: "CSAMES founded (1983)" }], { x: "Date", y: 1, text: "label", anchor: "bottom", dy: -6, fill: "currentColor", fontSize: 12 }) ] }); }34:[{"id":"00bb6111740846dcf50334548e819f7ba4fdacd210cd3091f2ccde87612e9f6f8bc8525fa51fa46b923f364680d48ea58f872ff82acf20ec7c6c7c16c6ff1983","href":"https://static.observableusercontent.com/files/00bb6111740846dcf50334548e819f7ba4fdacd210cd3091f2ccde87612e9f6f8bc8525fa51fa46b923f364680d48ea58f872ff82acf20ec7c6c7c16c6ff1983","name":"SouthAsiaUIUC.csv","type":"text/csv","lastModified":1756174043632.081,"size":1607},{"id":"43f3de98edaca470711a98032ea69df2946139f546491f7bef6777897075892a61a3c83c1887a93c9c64cc720673bbffa1216d38ef61cbc4703ec5180b600001","href":"https://static.observableusercontent.com/files/43f3de98edaca470711a98032ea69df2946139f546491f7bef6777897075892a61a3c83c1887a93c9c64cc720673bbffa1216d38ef61cbc4703ec5180b600001","name":"MENASortedUIUC.csv","type":"text/csv","lastModified":1756174043637.686,"size":18311},{"id":"019a395c80b18b98621f084053cf9a7d8c91ee6ba901e36f48e99bbb425edab91758ad76d4fe2b1272efb2527530c5b1e1b4b7d2f90cb1c4a1d67f6e3d987136","href":"https://static.observableusercontent.com/files/019a395c80b18b98621f084053cf9a7d8c91ee6ba901e36f48e99bbb425edab91758ad76d4fe2b1272efb2527530c5b1e1b4b7d2f90cb1c4a1d67f6e3d987136","name":"data_mena.csv","type":"text/csv","lastModified":1756174043638.003,"size":3427}] 2f:{"title":"SA and MENA Student Numbers at Illinois","cells":[{"id":0,"value":"# SA and MENA Student Numbers at Illinois\nA Comparative View of SA and MENA Numbers at Illinois. \nAll data is collected from https://isss.illinois.edu/about/statistics.html\n","pinned":false,"hidden":false,"mode":"md"},{"id":70,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"// Stacked bars by year & country (parallel to your SA Plot code)\nPlot.plot({\n width: 800,\n height: 500,\n marginBottom: 70,\n marginTop: 50,\n marginLeft: 100,\n y: {\n grid: true,\n label: \"Number of students from each MENA country\"\n },\n color: {\n domain: menaCountries,\n range: menaCountries.map(menaColorScale),\n legend: true\n },\n x: {\n domain: [\n 1967, 1970, 1975, 1980, 1985, 1990, 1995, 2000, 2005, 2010, 2015, 2020,\n 2023, 2024\n ],\n tickFormat: formatYear,\n tickRotate: 45,\n label: \"Date\"\n },\n marks: [\n Plot.barY(menaLong, {\n x: \"Date\",\n y: \"Number\",\n fill: \"Country\",\n title: (d) =>\n `${d.Country}\\nYear: ${formatYear(d.Date)}\\nEnrollment: ${fmt(\n d.Number\n )}`\n }),\n Plot.ruleY([0]),\n Plot.ruleX([0])\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":188,"value":"### SA and MENA student population over the years","pinned":false,"hidden":false,"mode":"md"},{"id":113,"value":"Plot.plot({\n width: 860,\n height: 460,\n marginLeft: 90,\n marginBottom: 60,\n y: { grid: true, label: \"Total students\" },\n x: { label: \"Date\", tickFormat: formatYear, tickRotate: 45 },\n color: { domain: regionDomain, range: regionColors, legend: true },\n marks: [\n Plot.lineY(totalsLong, {\n x: \"Date\",\n y: \"Total\",\n stroke: \"Region\",\n strokeWidth: 2,\n curve: \"monotone-x\"\n }),\n Plot.dot(totalsLong, {\n x: \"Date\",\n y: \"Total\",\n fill: \"Region\",\n r: 2,\n title: (d) =>\n `${d.Region}\\nYear: ${formatYear(d.Date)}\\nTotal: ${fmt(d.Total)}`\n }),\n Plot.ruleY([0]),\n Plot.ruleX([1983], {\n stroke: \"#000\",\n strokeDash: [4, 3],\n strokeWidth: 1,\n title: \"1983 — CSAMES founded\"\n }),\n Plot.text([{ Date: 1983, label: \"CSAMES founded (1983)\" }], {\n x: \"Date\",\n y: 1,\n text: \"label\",\n anchor: \"top\",\n dy: -76,\n fill: \"currentColor\",\n fontSize: 12\n })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":116,"value":"Plot.plot({\n width: 860,\n height: 460,\n marginLeft: 90,\n marginBottom: 60,\n y: {\n grid: true,\n label: \"Share of total (SA vs MENA)\",\n percent: true\n },\n x: { label: \"Date\", tickFormat: formatYear, tickRotate: 45 },\n color: { domain: regionDomain, range: regionColors, legend: true },\n marks: [\n Plot.areaY(totalsLong, {\n x: \"Date\",\n y: \"Total\",\n fill: \"Region\",\n stack: \"normalize\",\n order: \"descending\",\n\n // order: \"ascending\",\n curve: \"monotone-x\",\n title: (d) => {\n const yr = d.Date;\n const denom =\n d3.sum(\n totalsLong.filter((r) => r.Date === yr),\n (r) => r.Total\n ) || 1;\n const pct = (d.Total / denom) * 100;\n return `${d.Region}\\nYear: ${formatYear(yr)}\\nShare: ${pct.toFixed(\n 1\n )}%`;\n }\n }),\n Plot.ruleY([0, 0.25, 0.5, 0.75, 1])\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":151,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":119,"value":"Plot.plot({\n width: 860,\n height: 460,\n marginLeft: 90,\n marginBottom: 60,\n y: { grid: true, label: \"Total students\" },\n x: { label: \"Date\", tickFormat: formatYear, tickRotate: 45 },\n color: { domain: regionDomain, range: regionColors, legend: true },\n marks: [\n Plot.barY(totalsLong, {\n x: \"Date\",\n y: \"Total\",\n fill: \"Region\",\n order: \"descending\",\n title: (d) =>\n `${d.Region}\\nYear: ${formatYear(d.Date)}\\nTotal: ${fmt(d.Total)}`\n }),\n Plot.ruleY([0])\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":186,"value":"
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n","pinned":false,"hidden":false,"mode":"html"},{"id":32,"value":"formatYear = d3.format(\"d\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"fmt = d3.format(\",\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"mena = FileAttachment(\"data_mena.csv\").csv({ typed: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"// Load tidy/sorted MENA (we made this file; Number is integer)\nmenaLong = FileAttachment(\"MENASortedUIUC.csv\").csv({ typed: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"// Build a wide table from tidy MENASortedUIUC_Int.csv\nmenaWide = {\n // Unique country list (keeps underscores like Saudi_Arabia)\n const countries = Array.from(new Set(menaTidy.map((d) => d.Country)));\n\n // Group rows by year\n const byYear = d3.group(menaTidy, (d) => +d.Date);\n\n // Build per-year objects with Date and one column per country\n const rows = [];\n for (const [year, rowsForYear] of byYear) {\n const row = { Date: +year };\n for (const c of countries) {\n const rec = rowsForYear.find((r) => r.Country === c);\n row[c] = rec ? +rec.Number : 0; // fill missing with 0\n }\n rows.push(row);\n }\n\n // Sort rows by year\n rows.sort((a, b) => a.Date - b.Date);\n\n // Add .columns metadata like your SA data has\n rows.columns = [\"Date\", ...countries];\n return rows;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"menaTidy = FileAttachment(\"MENASortedUIUC.csv\").csv({ typed: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"// Canonical list of MENA countries (in column order from the wide file)\nmenaCountries = mena.columns.slice(1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"// Long enough palette (more than 20 colors, in case of expansion)\nmenaColors = [\n ...d3.schemeTableau10,\n ...d3.schemeSet3,\n ...d3.schemePaired\n].slice(0, menaCountries.length)","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"// Shared color scale (use this in BOTH charts)\nmenaColorScale = d3.scaleOrdinal().domain(menaCountries).range(menaColors)","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"saWide = FileAttachment(\"SouthAsiaUIUC.csv\").csv({ typed: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"menaWide2 = FileAttachment(\"data_mena.csv\").csv({ typed: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":96,"value":"sumRow = (row) =>\n d3.sum(Object.entries(row), ([k, v]) => (k === \"Date\" ? 0 : +v || 0))","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"saTotals = saWide.map((row) => ({\n Date: +row.Date,\n Region: \"SA\",\n Total: sumRow(row)\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":101,"value":"menaTotals = menaWide2.map((row) => ({\n Date: +row.Date,\n Region: \"MENA\",\n Total: sumRow(row)\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":104,"value":"totalsLong = d3.sort([...saTotals, ...menaTotals], (d) => d.Date)","pinned":false,"hidden":false,"mode":"ojs"},{"id":109,"value":"regionDomain = [\"SA\", \"MENA\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":111,"value":"regionColors = [\"#13294B\", \"#E84A27\"] // Illinois Orange for MENA, Illinois Blue for SA","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}