2e:null 2f:["$","title",null,{"children":"South Asian Enrollment at UIUC | Rini B. Mehta | Observable"}] 34:Tfe2,chart = { const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); const keys = data.columns.slice(1); const color = d3.scaleOrdinal().domain(keys).range(d3.schemeCategory10); const series = d3.stack().order(d3.stackOrderAscending.text).keys(keys)(data); //scales const x = d3 .scaleLinear() .domain(d3.extent(data, (d) => d.Date)) .range([margin.left, width - margin.right]); const xAxis = (g) => g .attr("transform", `translate(0, ${height - margin.bottom})`) .call(d3.axisBottom(x).tickFormat(d3.format("d")).tickSizeOuter(0)); const y = d3 .scaleLinear() .domain([0, d3.max(series, (d) => d3.max(d, (d) => d[1]))]) .nice() .range([height - margin.bottom, margin.top]); 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])); //brushing, clips, and legends const clip = svg .append("defs") .append("svg:clipPath") .attr("id", "clip") .append("svg:rect") .attr("width", width) .attr("height", height) .attr("x", 0) .attr("y", 0); const brush = d3 .brush() .extent([ [0, 0], [width, height] ]) .on("end", updateChart); const areaChart = svg.append("g").attr("clip-path", "url(#clip)"); areaChart .selectAll("mylayers") .data(series) .enter() .append("path") .attr("class", function (d) { return "myArea " + d.key; }) .style("fill", ({ key }) => color(key)) .attr("d", area); //add brushing areaChart.append("g").attr("class", "brush").call(brush); function updateChart() { const extent = d3.event.selection; const idleTimeout = 350; // If no selection, back to initial coordinate. Otherwise, update X axis domain if (!extent) { if (!idleTimeout) return (idleTimeout = setTimeout(350)); // This allows to wait a little bit x.domain( d3.extent(data, function (d) { return d.data.Date; }) ); } else { x.domain([x.invert(extent[0]), x.invert(extent[1])]); areaChart.select(".brush").call(brush.move, null); // This remove the grey brush area as soon as the selection has been done } // Update axis and area position xAxis.transition().duration(1000).call(d3.axisBottom(x).ticks(5)); areaChart.selectAll("path").transition().duration(1000).attr("d", area); } //highlight // What to do when one group is hovered const highlight = function (d) { console.log(d); // reduce opacity of all groups d3.selectAll(".myArea").style("opacity", 0.01); // expect the one that is hovered d3.select("." + d).style("opacity", 1); }; // And when it is not hovered anymore const noHighlight = function (d) { d3.selectAll(".myArea").style("opacity", 1); }; // legend const size = 20; svg .selectAll("myrect") .data(keys) .enter() .append("rect") .attr("x", 150) .attr("y", function (d, i) { return 20 + i * (size + 5); }) // 100 is where the first dot appears. 25 is the distance between dots .attr("width", size) .attr("height", size) .style("fill", function (d) { return color(d); }) .on("mouseover", highlight) .on("mouseleave", noHighlight); // Add one dot in the legend for each name. svg .selectAll("mylabels") .data(keys) .enter() .append("text") .attr("x", 170 + size * 1) .attr("y", function (d, i) { return 25 + i * (size + 5) + size / 2; }) // 100 is where the first dot appears. 25 is the distance between dots .style("fill", function (d) { return color(d); }) .text(function (d) { return d; }) .attr("text-anchor", "left") .style("alignment-baseline", "bottom") .on("mouseover", highlight) .on("mouseleave", noHighlight); return svg.node(); }35:T456,Plot.plot({ marginBottom: 70, marginLeft: 100, width: 800, height: 350, x: { grid: true, tickRotate: 45, label: "Date", tickFormat: formatYear }, color: { domain: [ "India", "Bangladesh", "Pakistan", "SriLanka", "Nepal", "Bhutan", "Afghanistan", "Maldives" ], range: [ "#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f" ], legend: true }, y: { grid: true, label: "Enrollment By Countries" }, marks: [ Plot.areaY( dataLong, Plot.stackY({ offset: "silhouette", x: "Date", y: "Number", fill: "Country" }) ) ] /* marks: [ Plot.areaY(data, { x: "Date", y: "Country", fill: (d) => d.color, title: (d) => d.Number }), Plot.lineY( data, Plot.stackY1({ x: "Date", y: "Country", z: "Number", stroke: "white", strokeWidth: 1 }) ), Plot.ruleY([0]) ] */ })36:[{"id":"09de857f89513aafd233303db50e186bbca4c1ba5695bea359804256e96e61ec1ab9e19d704b5f750f6df3fe27bb4dc8245a4341df5d7fd1efae5541fd19e202","href":"https://static.observableusercontent.com/files/09de857f89513aafd233303db50e186bbca4c1ba5695bea359804256e96e61ec1ab9e19d704b5f750f6df3fe27bb4dc8245a4341df5d7fd1efae5541fd19e202","name":"SouthAsiaUIUC.csv","type":"text/csv","lastModified":1721055492174.386,"size":1577},{"id":"1da859e59cef1be54c8c5a881403d04c23f74dfea974f9180c6581a36657f6008cc97ec52bc647c365821c26e0835bd1c06f6b4ccb0b6bb4b01cb1f06fb1f46a","href":"https://static.observableusercontent.com/files/1da859e59cef1be54c8c5a881403d04c23f74dfea974f9180c6581a36657f6008cc97ec52bc647c365821c26e0835bd1c06f6b4ccb0b6bb4b01cb1f06fb1f46a","name":"SouthAsiaSortedUIUC.csv","type":"text/csv","lastModified":1721062924687.728,"size":7850},{"id":"00bb6111740846dcf50334548e819f7ba4fdacd210cd3091f2ccde87612e9f6f8bc8525fa51fa46b923f364680d48ea58f872ff82acf20ec7c6c7c16c6ff1983","href":"https://static.observableusercontent.com/files/00bb6111740846dcf50334548e819f7ba4fdacd210cd3091f2ccde87612e9f6f8bc8525fa51fa46b923f364680d48ea58f872ff82acf20ec7c6c7c16c6ff1983","name":"SouthAsiaUIUC@1.csv","type":"text/csv","lastModified":1755815848748.869,"size":1607},{"id":"9162dd1b0d9b132b62741e1d48780101d807ce49a32411607c6a86d632dff2328e89c9c3dfda9b8cb15f6f9dc2ebf114158f80b7dcf40ccd47721d3122b13ed9","href":"https://static.observableusercontent.com/files/9162dd1b0d9b132b62741e1d48780101d807ce49a32411607c6a86d632dff2328e89c9c3dfda9b8cb15f6f9dc2ebf114158f80b7dcf40ccd47721d3122b13ed9","name":"SouthAsiaSortedUIUC@1.csv","type":"text/csv","lastModified":1755816059775.604,"size":7984},{"id":"31a822ccd632a4f0f460c63010d264863ade2b542ec31c9c136454cd7d2543b37d05306ec9ddfe5f28776c2b2be3ec41cdb7b265d938efa07ea56ec01f612a31","href":"https://static.observableusercontent.com/files/31a822ccd632a4f0f460c63010d264863ade2b542ec31c9c136454cd7d2543b37d05306ec9ddfe5f28776c2b2be3ec41cdb7b265d938efa07ea56ec01f612a31","name":"SouthAsiaSortedUIUC-1.csv","type":"text/csv","lastModified":1781721851160.282,"size":8134},{"id":"a16d2b232bbfb6a88c90fe9f0135c7385cf636b0823c13a012d4d5c59ecdd5a25c451e63f77bd6e3a4fb48418463566347f18f51e2d948e3b8769bba9836f7be","href":"https://static.observableusercontent.com/files/a16d2b232bbfb6a88c90fe9f0135c7385cf636b0823c13a012d4d5c59ecdd5a25c451e63f77bd6e3a4fb48418463566347f18f51e2d948e3b8769bba9836f7be","name":"SouthAsiaUIUC-1.csv","type":"text/csv","lastModified":1781721861822.477,"size":1639},{"id":"f3ebb508f08f2864de1b255dc44fd3081a2328bcb556c7b76ed3b6eee4e5120889a21f7b7b6db524673eb1e5f0dd90b43247067bf81a6359dbcf436b5bc6a218","href":"https://static.observableusercontent.com/files/f3ebb508f08f2864de1b255dc44fd3081a2328bcb556c7b76ed3b6eee4e5120889a21f7b7b6db524673eb1e5f0dd90b43247067bf81a6359dbcf436b5bc6a218","name":"IndiaUIUC.csv","type":"text/csv","lastModified":1772384788765.765,"size":968}] 32:{"id":"9ae53102e57449e9","slug":"south-asian-enrollment-at-uiuc","title":"South Asian Enrollment at UIUC","thumbnail":"84438325fa9d9c07c9d948f16bcf6ca479d76e4895dbb32d36504eb0ed1edefa","access_level":"public","create_time":"$D2024-07-15T14:58:12.174Z","update_time":"$D2026-06-17T18:44:21.671Z","view_time":null,"first_public_time":"$D2024-10-07T22:32:17.889Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"9e093f781fb276b6","login":"rbhttchr","name":"Rini B. Mehta","avatar_url":"https://avatars-next.observableusercontent.com/f01f45f328c8f9ea2aea4750f27c601cbe23773858fae2a02593e05c4f1796ee","tier":"starter_2024"},"version":285,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"2acec808e73ff66d","login":"rbhttchr","name":"Rini B. Mehta","avatar_url":"https://avatars-next.observableusercontent.com/f01f45f328c8f9ea2aea4750f27c601cbe23773858fae2a02593e05c4f1796ee","tier":null}],"members":[{"type":"individual","id":"2acec808e73ff66d","login":"rbhttchr","name":"Rini B. Mehta","avatar_url":"https://avatars-next.observableusercontent.com/f01f45f328c8f9ea2aea4750f27c601cbe23773858fae2a02593e05c4f1796ee","tier":null,"role":"editor"},{"type":"team","id":"9e093f781fb276b6","login":"rbhttchr","name":"Rini B. Mehta","avatar_url":"https://avatars-next.observableusercontent.com/f01f45f328c8f9ea2aea4750f27c601cbe23773858fae2a02593e05c4f1796ee","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"ae292f8973e3e5d8","slug":"salidlab_data","title":"SALIDlab_data","owner":{"id":"9e093f781fb276b6","login":"rbhttchr","name":"Rini B. Mehta"}},"type":"notebook","body":{"title":"South Asian Enrollment at UIUC","cells":[{"id":0,"value":"# South Asian Enrollment at UIUC\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":244,"value":"The enrollment of students from South Asian countries has grown by 6.5 times since 2000. India alone occupies second place on the list of all countries, next to China. \nA fascinating case is that of Bangladesh. Bangladesh was born in 1971, and the first Bangladeshi student appeared in Illinois in 1974. The number of Bangladeshi students has increased from 1 in 1974 to 126 in 2023. \nAll data is collected from https://isss.illinois.edu/about/statistics.html\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":232,"value":"
\n
","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":230,"value":"### Hover over the legends to select an individual country. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":8,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"
\n
\n
","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":126,"value":"### The data from the above graph, in tabular form.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":109,"value":"Inputs.table(data, {\n format: {\n Date: (d) => `${d}`\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":253,"value":"
\n
\n
","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":255,"value":"### The same data, as a streamgraph.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":103,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":257,"value":"
\n
\n
","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":259,"value":"### Same data as stacked bars\nHover on each block to see the numbers.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":195,"value":"Plot.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 South Asian country\"\n },\n color: {\n domain: [\n \"India\",\n \"Bangladesh\",\n \"Pakistan\",\n \"Sri Lanka\",\n \"Nepal\",\n \"Bhutan\",\n \"Afghanistan\",\n \"Maldives\"\n ],\n range: [\n \"#1f77b4\",\n \"#ff7f0e\",\n \"#2ca02c\",\n \"#d62728\",\n \"#9467bd\",\n \"#8c564b\",\n \"#e377c2\",\n \"#7f7f7f\"\n ],\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(dataLong, {\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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":276,"value":"Plot.plot({\n width: 800,\n height: 600,\n marginBottom: 70,\n marginTop: 50,\n marginLeft: 100,\n y: {\n grid: true,\n label: \"Number of students from India\"\n },\n color: {\n domain: [\"India\"],\n range: [\"#13294B\"]\n // legend: true\n },\n x: {\n domain: [\n 1967, 1970, 1975, 1980, 1985, 1990, 1995, 2000, 2005, 2010, 2015, 2020,\n 2023, 2024, 2025\n ],\n tickFormat: formatYear,\n tickRotate: 45,\n label: \"Date\"\n },\n marks: [\n Plot.barY(dataLongI, {\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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":269,"value":"## India","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":272,"value":"indiauiuc = await FileAttachment(\"IndiaUIUC.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"indiauiuc","database":"$undefined"},{"id":223,"value":"
\n
\n
\n
\n
\n
\n

\n
\n
\n
","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":219,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":6,"value":"data = Object.assign(\n d3.csvParse(await FileAttachment(\"SouthAsiaUIUC-1.csv\").text(), d3.autoType),\n { y: \"films\" }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"dataLong = FileAttachment(\"SouthAsiaSortedUIUC-1.csv\").csv({ typed: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":274,"value":"dataLongI = FileAttachment(\"IndiaUIUC.csv\").csv({ typed: true })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"fmt = (n) => d3.format(\",d\")(n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"formatYear = (year) => `${year}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"width = 900","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"height = 400","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"margin = ({ top: 20, right: 30, bottom: 30, left: 40 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"import { swatches as Swatches } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":128,"value":"/* Plot.plot({\n marginBottom: 50,\n marginLeft: 100,\n width: 800,\n height: 350,\n \n\n x: {\n grid: true,\n tickRotate: 45,\n label: \"Year\",\n tickFormat: formatYear\n },\n color: {\n domain: [\n \"India\",\n \"Bangladesh\",\n \"Pakistan\",\n \"SriLanka\",\n \"Nepal\",\n \"Bhutan\",\n \"Afghanistan\",\n \"Maldives\"\n ],\n range: [\n \"#1f77b4\",\n \"#d62728\",\n \"#2ca02c\",\n \"#ff993e\",\n \"#bfa4d7\",\n \"#b5446e\",\n \"#c6ecae\",\n \"#3a405a\"\n ]\n },\n y: {\n grid: true,\n lable: \"Enrollment through the years\"\n },\n marks: [\n Plot.areaY(dataLong, {\n x: \"Date\",\n y: \"Number\",\n fill: (d) => d.Country,\n title: (d) => d.Country\n }),\n Plot.lineY(\n dataLong,\n Plot.stackY1({\n x: \"Date\",\n y: \"Number\",\n z: \"Country\",\n stroke: \"White\",\n strokeWidth: 1\n })\n ),\n Plot.ruleY([0])\n ]\n}) */","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 33:"$32:body"