31: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(); }32: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]) ] */ })33:[{"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}] 2f:{"title":"South Asian Enrollment at UIUC","cells":[{"id":0,"value":"# South Asian Enrollment at UIUC\n","pinned":false,"hidden":false,"mode":"md"},{"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"},{"id":232,"value":"
\n
","pinned":false,"hidden":false,"mode":"html"},{"id":230,"value":"### Hover over the legends to select an individual country. ","pinned":false,"hidden":false,"mode":"md"},{"id":8,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":251,"value":"
\n
\n
","pinned":false,"hidden":false,"mode":"html"},{"id":126,"value":"### The data from the above graph, in tabular form.","pinned":false,"hidden":false,"mode":"md"},{"id":109,"value":"Inputs.table(data, {\n format: {\n Date: (d) => `${d}`\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":253,"value":"
\n
\n
","pinned":false,"hidden":false,"mode":"html"},{"id":255,"value":"### The same data, as a streamgraph.","pinned":false,"hidden":false,"mode":"md"},{"id":103,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":257,"value":"
\n
\n
","pinned":false,"hidden":false,"mode":"html"},{"id":259,"value":"### Same data as stacked bars\nHover on each block to see the numbers.","pinned":false,"hidden":false,"mode":"md"},{"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"},{"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"},{"id":269,"value":"## India","pinned":false,"hidden":false,"mode":"md"},{"id":272,"value":"indiauiuc = await FileAttachment(\"IndiaUIUC.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":223,"value":"
\n
\n
\n
\n
\n
\n

\n
\n
\n
","pinned":false,"hidden":false,"mode":"html"},{"id":219,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md"},{"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"},{"id":117,"value":"dataLong = FileAttachment(\"SouthAsiaSortedUIUC-1.csv\").csv({ typed: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":274,"value":"dataLongI = FileAttachment(\"IndiaUIUC.csv\").csv({ typed: true })","pinned":true,"hidden":false,"mode":"ojs"},{"id":201,"value":"fmt = (n) => d3.format(\",d\")(n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":113,"value":"formatYear = (year) => `${year}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":88,"value":"width = 900","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"value":"height = 400","pinned":false,"hidden":false,"mode":"ojs"},{"id":95,"value":"margin = ({ top: 20, right: 30, bottom: 30, left: 40 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":138,"value":"import { swatches as Swatches } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":203,"value":"","pinned":false,"hidden":false,"mode":"html"},{"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"}],"files":"$W33","stdlib":"1","titling":"auto"}