2b:null 2c:["$","title",null,{"children":"Online Assessment Behavior and Performance | docmparker | Observable"}] 31:T444,md`How do students move through the problems (assessment questions) in a course over time? In this notebook, I present an animation of assessment-taking on a day-by-day basis over a course. The motivation for creating this is that, unlike an on-the-ground class where students are sitting in front of a teacher, most, if not all, activity in an online course may be invisible to a course teacher or administrator in the absence of analytics that show students' progress and performance. In personal experience, it is also common for teachers to have an expectation that students taking an online course progress through released material in a relatively timely fashion. But is this the norm or not? And how can we visualize students' actual behavior in terms of progress and performance? As more instruction shifts online, tools to help teachers understand how their students' are engaging with material may prove to be valuable. Course designers and developers may also use this knowledge for continuous improvement and to see the effect of changes in course structure or incentives.`32:T633,md`This course structure means that students have a great deal of flexibility in how they make their way through a course. How many days per week do you think most students engage with assessment questions? It may be helpful to know that each lesson should take a student roughly 3 to 5 hours. How would you pace yourself if you were a student in such a course? Most teachers who have their students in the courses (for example, as part of a medical school curriculum) expect that students generally keep up; that is, that they view videos and take the interspersed assessment questions not long after they're released. How does that belief align with what students actually do? Let's see a couple of representations of student's pacing. **Figure 2** is a heatmap by course day for an idealized student, with darker colors representing days where the student took more assessment questions, and the lightest color showing days where no assessment questions were taken. Lesson release days are shown with dashed lines and annotated just above the graph. **Figure 3** shows the same (idealized) student's question-taking day-by-day, with bars showing the span of questions that the student took on any given day. **Figure 4** and **Figure 5** show the same representations for a real student (data from an actual online course run). What do you notice as you compare the *idealized* and the *real* student? These students shown are relatively paced, taking questions not long after they're released and working at a more or less even pace (moreso for the idealized student). `33:T812,md`Based on the previous graphs, you may still be wondering if most students taking an online course with this type of gated lesson release structure behave like the idealized or real students shown above. Do students generally keep up with material, or are their practices more varied? Play or scrub through the following two interactive diagrams, which show two synchronized representations of 40 students moving through an online course. The first, **Figure 6**, shows students' progress (number of assessment questions taken through each course day) as the course progresses and more assessment questions are released. The course structure is as shown in **Figures 1-5** previously. You should note that the course days are now shown on the vertical axis in the first diagram. The second diagram, **Figure 7**, is synchronized with the first and shows student performance (total score out of 1.0) achieved by each student so far as they take released assessment questions. The horizontal axis is shared between the two diagrams. As you explore the diagrams, you can click on any student dots in the bottom diagram to select or unselect individual students. You may want to pause the animation first. This also highlights their progress trace (line) in the top diagram. Additionally, to highlight a group of students, you can drag a box around their dots in the lower diagram. You can also click on individual lines in the top diagram to select/unselect individual students, and their dots will be highlighted in the lower diagram when selected. Double-click (or double-tap) in an open area in either diagram to unselect all student dots/lines. Interesting questions to explore include: - Do students who start later end up scoring worse in the course? - Do students who are more evenly paced or work through the material over a greater number of days end up scoring better? The N is too small to definitively answer questions like this simply from this example, but the visualization helps us begin to understand the range of student behavior.`34:Td5b,timeTrails2 = { const svg = d3.create("svg") .attr("width", width) .attr("height", height); svg.on("dblclick", clearSelectedStudents); // x-axis svg.append("g") .call(xAxis); // y-axis - days in the course svg.append("g") .attr("transform", `translate(${margin.left}, 0)`) .call(d3.axisLeft(yTime)) .append("text") .attr("text-anchor", "end") .attr("font-size", 12) .attr("font-weight", "bold") .attr("fill", "black") .text("Course day") .attr("transform", `translate(20, ${margin.top}) rotate(-90)`); const timeLine = d3.line() // .curve(d3.curveStepBefore) // curveStepBefore curveBasis .x(d => x(d.farthest_graded_problem)) .y(d => yTime(d.course_day)); const timeArea = d3.area() .x(d => x(d.farthest_graded_problem)) .y0(yTime(0)) .y1(d => yTime(d.course_day)); // out of bounds in problem-time space const outOfBoundsArea = svg.append("path") .datum(problemTimeBounds) .attr("d", timeArea) .attr("fill", "#ccc") .attr("fill-opacity", 0.5); const testPaths = svg.append("g") .selectAll("path") // .data(groupedByStudentArrays.map(d => [d[0], d[0]])) .data(groupedByStudentArrays) .join("path") .attr("d", d => timeLine(d)) .attr("stroke", (d,i) => lineColorScale(i)) //d3.schemeCategory10[i % 10]) .attr("stroke-dasharray", (d, i) => length_arrays[i][length_arrays[i].length - 1]) .attr("stroke-linecap", "round") .attr("stroke-width", (d, i) => 1) .attr("opacity", (d, i) => 0.5) .attr("fill", "none"); const clickPaths = svg.append("g") .selectAll("path") // .data(groupedByStudentArrays.map(d => [d[0], d[0]])) .data(groupedByStudentArrays) .join("path") .attr("d", d => timeLine(d)) .attr("stroke", (d,i) => lineColorScale(i)) //d3.schemeCategory10[i % 10]) .attr("stroke-dasharray", (d, i) => length_arrays[i][length_arrays[i].length - 1]) .attr("stroke-width", 10) .attr("opacity", 0) .attr("fill", "none") .on("click", function(e, d) { const target = d3.select(this); const alreadySelected = target.classed("selected"); modifyStudentSelection([d[0].email], !alreadySelected ? "add" : "subtract"); }); clickPaths.append('title') .text(d => `Student ${d[0].email}`); function updatePath(day) { const t = d3.transition().duration(stepDuration-50); testPaths.transition(t).attr("stroke-dashoffset", (d, i) => length_arrays[i][length_arrays[i].length - 1] - length_arrays[i][day]); clickPaths.transition(t).attr("stroke-dashoffset", (d, i) => length_arrays[i][length_arrays[i].length - 1] - length_arrays[i][day]); } function updateSelectedStudents(emails) { testPaths.attr("stroke-width", (d, i) => emails.includes(d[0].email) ? 3 : 1) .attr("opacity", (d, i) => emails.includes(d[0].email) ? 1 : 0.5); clickPaths.classed("selected", (d, i) => emails.includes(d[0].email)); } return Object.assign(svg.node(), { updatePath, updateSelectedStudents }); }35:T1928,scoreChart = { const svg = d3.create("svg") .attr("width", width) .attr("height", height); // brush code const brush = d3.brush() .extent([[margin.left, margin.top], [width - margin.right, height - margin.bottom]]) .on("end", brushEnded); const gb = svg.append("g").attr("class", "mpbrush") .call(brush); // only use the brush for selecting students and then don't persist function brushEnded({selection}) { if (selection === null) return; let selected_students = []; if (selection && selection.length !== 0) { const [[x0, y0], [x2, y2]] = selection; selected_students = dotsStudents.filter(d => x0 <= x(d.farthest_graded_problem) && x(d.farthest_graded_problem) < x2 && y0 <= y(d.score) && y(d.score) < y2).data().map(d => d.email); } modifyStudentSelection(selected_students, "add"); gb.call(brush.move, null); } svg.on("dblclick", clearSelectedStudents); // axes svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); // day number const dayLabel = svg.append('text') .attr('class', 'dayNumber') .attr('x', margin.left + 60) .attr('y', margin.top) .attr('alignment-baseline', 'hanging') .attr('fill', '#ccc') .attr('font-family', 'Helvetica Neue, Arial') .attr('font-weight', 500) .attr('font-size', 80) .text(`Day 0`); // horizontal dashed line at initial available_score const availableScoreLine = svg.append("g") .selectAll("line") .data(highWaterInitial) .join("line") .attr("x1", x(0)) .attr("y1", d => y(d.available_score)) .attr("x2", d => x(d.total_graded_problems_available)) .attr("y2", d => y(d.available_score)) .style("stroke-dasharray", ("5, 5")) .style("stroke", "gray"); // rgb(150, 150, 150) // vertical dashed line at total_graded_problems_available const totalGradedProblemsLine = svg.append("g") .selectAll("line") .data(highWaterInitial) .join("line") .attr("x1", d => x(d.total_graded_problems_available)) .attr("y1", y(0)) .attr("x2", d => x(d.total_graded_problems_available)) .attr("y2", d => y(d.available_score)) .style("stroke-dasharray", ("5, 5")) .style("stroke", "gray"); // initialize with dots from first day const dotsStudentsHolder = svg.append("g"); // .selectAll("g.a") // .data(scoresInitial); // join this to the data and then separately add dots and text so both get the data. but how to selectAll("g") without getting the wrong "g" included? const dotsStudents = dotsStudentsHolder.selectAll("circle") .data(scoresInitial) .join("circle") .attr("cx", d => x(d.farthest_graded_problem)) .attr("cy", d => y(d.score)) .attr("r", 4) .attr("class", "student") .attr("fill", "rgba(255, 255, 255, 0.5)") .on("click", function(e, d) { const target = d3.select(this); const alreadySelected = target.classed("selected"); modifyStudentSelection([d.email], !alreadySelected ? "add" : "subtract"); // doesn't work to clear this on reset }); dotsStudents .append('title') .text(d => `Student ${d.email}`); // console.log(dotsStudentsHolder.selectAll("circle").data()); // const labels = dotsStudentsHolder.append("text") // .attr("transform", d => `translate(${x(d.farthest_graded_problem)}, // ${y(d.score)})`) // .attr('text-anchor', 'center') // .attr('fill', 'black') // .attr('font-size', '12px') // .text(d => d.email); // draw topo lines // var max_score_line = [{'x': 1, 'y': 0}, {'x': 100, 'y': 1}]; const lineMax = d3.line() .x(d => x(d.problem_num)) .y(d => y(d.max_score_so_far)); const line85 = d3.line() .x(d => x(d.problem_num)) .y(d => y(d.score_85)); const line70 = d3.line() .x(d => x(d.problem_num)) .y(d => y(d.score_70)); const addline = function(myLine, myColor) { svg.append("g").append("path") .attr("d", myLine(score_topo_lines)) .style("stroke-dasharray", ("5, 5")) .style("stroke", myColor) .style("fill", "none") .style("stroke-width", "1.0px"); } addline(lineMax, "rgb(0, 0, 150)"); addline(line85, "rgb(0, 150, 0)"); addline(line70, "rgb(150, 0, 0)"); // update function setDay(day) { const t = d3.transition().duration(stepDuration); dayLabel .text(`Day ${day}`); dotsStudents .data(scores_days[day], d => d.email) .transition(t) .attr("cx", d => x(d.farthest_graded_problem)) .attr("cy", d => y(d.score)); const highWaterData = highWater.slice(day, day+1); availableScoreLine .data(highWaterData) .transition(t) .attr("y1", d => y(d.available_score)) .attr("x2", d => x(d.total_graded_problems_available)) .attr("y2", d => y(d.available_score)); totalGradedProblemsLine .data(highWaterData) .transition(t) .attr("x1", d => x(d.total_graded_problems_available)) .attr("x2", d => x(d.total_graded_problems_available)) .attr("y2", d => y(d.available_score)); } function updateSelectedStudents(emails) { dotsStudents.attr("r", (d, i) => emails.indexOf(d.email) != -1 ? 6 : 4) .attr("fill", (d, i) => emails.indexOf(d.email) != -1 ? lineColorScale(d.email) : "rgba(255, 255, 255, 0.5)") .classed("selected", (d, i) => emails.indexOf(d.email) != -1); } return Object.assign(svg.node(), { setDay, updateSelectedStudents } ); }36:T4a0,length_arrays = { // get all path lengths and intermediate lengths // store in map with structure {0 => [0, len1, len1 + len2, len1 + len2 + len3, ..., total_len], // 1 => [0, etc. ... total_len1], // for each student path, store cumulative intermediate lengths including last one of total length // this is cumulative length on day N of the course //let pathLength; // testPath.attr("stroke-dasharray", function() { return pathLength = this.getTotalLength() }) // .attr("stroke-dashoffset", pathLength); const timeLine = d3.line() // .curve(d3.curveStepBefore) // curveStepBefore curveBasis .x(d => x(d.farthest_graded_problem)) .y(d => yTime(d.course_day)); const testPath = d3.create("svg").append("path"); const length_arrays = []; const reducer = (accumulator, currentValue, i, studentArray) => { let path = timeLine(studentArray.slice(0, i+1)); return accumulator.concat(testPath.attr("d", path).node().getTotalLength()); } groupedByStudentArrays.forEach(d => length_arrays.push(d.reduce(reducer, []))); return length_arrays; }37:[{"id":"3b13777b4f1a797ee9285e2cac9edb36d39ee8009653bcce5861ab58ea15af8776fc0c6c1df515ff02b76c5debb345c13d1abccbad635c56096c8e59af887664","href":"https://static.observableusercontent.com/files/3b13777b4f1a797ee9285e2cac9edb36d39ee8009653bcce5861ab58ea15af8776fc0c6c1df515ff02b76c5debb345c13d1abccbad635c56096c8e59af887664","name":"release_schedule.csv","type":"text/csv","lastModified":1628531439590.67,"size":137}] 2f:{"id":"1f8bcd443c29b22b","slug":null,"title":"Online Assessment Behavior and Performance","thumbnail":"02bb23e0e2070f1849d02c855df8913107da21e89bf3c888eda3319d8b68b356","access_level":"unlisted","create_time":"$D2021-08-09T17:50:39.590Z","update_time":"$D2021-09-25T20:30:22.829Z","view_time":null,"first_public_time":null,"has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"6d25ff1435231022","login":"docmparker","name":"","avatar_url":"https://avatars-next.observableusercontent.com/01e0a530528b822e9c24e7c99f0becabba48082484f8b0451e7db0745bce8039","tier":"starter_2024"},"version":2915,"publish_version":2915,"role":null,"authored":false,"authors":[{"type":"individual","id":"b29ee67ead31c213","login":"docmparker","name":"","avatar_url":"https://avatars-next.observableusercontent.com/9cce2b3ba7882f7de8b481a333a75cee332d826762e8e993d389e71e10aad0c5","tier":null}],"members":[{"type":"individual","id":"b29ee67ead31c213","login":"docmparker","name":"","avatar_url":"https://avatars-next.observableusercontent.com/9cce2b3ba7882f7de8b481a333a75cee332d826762e8e993d389e71e10aad0c5","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Online Assessment Behavior and Performance","cells":[{"id":0,"value":"md`# Online Assessment Behavior and Performance`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2725,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2701,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2449,"value":"// make idealized student heatmap\nidealized_student = {\n const probs_per_day = Array.from({length: 55}, (v, i) => 0);\n probs_per_day.splice(1, 4, 3, 7, 0, 10);\n probs_per_day.splice(7, 6, 8, 7, 0, 10, 0, 10);\n probs_per_day.splice(14, 6, 5, 10, 0, 8, 10, 3);\n probs_per_day.splice(21, 7, 0, 0, 10, 0, 20, 0, 11);\n probs_per_day.splice(28, 7, 0, 14, 6, 0, 10, 9, 0);\n probs_per_day.splice(35, 7, 7, 3, 4, 10, 0, 2, 0);\n probs_per_day.splice(51, 1, 24);\n \n return probs_per_day.map((d, i) => ({course_day: i, problems_taken: d}));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2706,"value":"idealized_student_ranges = idealized_student.map((d, i) => ({course_day: d.course_day, problem_range: [d3.sum(idealized_student.slice(0, i), d => d.problems_taken), d3.sum(idealized_student.slice(0, i+1), d => d.problems_taken)]}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2709,"value":"typical_student = d3.pairs(groupedByStudent.get(typicalStudentNum), (a, b) => ({course_day: a.course_day, problems_taken: b.farthest_graded_problem - a.farthest_graded_problem})) // 37 35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2712,"value":"typical_student_ranges = d3.pairs(groupedByStudent.get(typicalStudentNum), (a, b) => ({course_day: a.course_day, problem_range: [a.farthest_graded_problem, b.farthest_graded_problem]}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2715,"value":"// want stacked rects that go from y = lesson_release_day to top and are the width of the number of problems\nproblem_rollout = {\n let problem_rollout1 = release_schedule.map((d, i) => ({problems_available: d3.sum(release_schedule.slice(0, i+1), d => d.graded_problem_num), lesson_release_day: d.lesson_release_day}));\n return problem_rollout1.concat({problems_available: d3.max(problem_rollout1, d => d.problems_available), lesson_release_day: course_length});\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2779,"value":"modifyStudentSelection([typicalStudentNum], showTypical ? \"add\" : \"subtract\"), \nmd`Highlight typical student`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1260,"value":"scoreChart.setDay(dayNum),\nmd`Students' progress and scores on day ${dayNum}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2085,"value":"scoreChart.updateSelectedStudents(selectedStudents)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1485,"value":"timeTrails2.updatePath(dayNum),\nmd`Students' progress vs. time on day ${dayNum}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1947,"value":"timeTrails2.updateSelectedStudents(selectedStudents),\nmd`Student numbers selected: ${selectedStudents.join(', ')}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2071,"value":"mutable selectedStudents = []","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2074,"value":"function modifyStudentSelection(selected_students, op=\"add\") {\n const already_selected = mutable selectedStudents;\n let action;\n if (op === \"add\") {\n action = d3.union;\n }\n else if (op == \"subtract\") {\n action = d3.difference;\n }\n\n mutable selectedStudents = Array.from(action(already_selected, selected_students));\n \n updateTypicalStudent();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2783,"value":"typicalStudentNum = 35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2782,"value":"function updateTypicalStudent() {\n const typicalStudentSelected = mutable selectedStudents.includes(typicalStudentNum); \n \n viewof showTypical.value = typicalStudentSelected;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2075,"value":"function clearSelectedStudents() {\n const selectedStudents = mutable selectedStudents;\n modifyStudentSelection(selectedStudents, \"subtract\");\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":673,"value":"{\n const nonStarters = scores_days[dayNum].filter(d => d.num_problems_taken == 0).length;\n return md`**${nonStarters}** student${nonStarters === 1 ? ' has' : 's have'} not started`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1651,"value":"function email_selected(email) {\n return mutable selectedStudents.includes(email); \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":349,"value":"{\n const roundedScores = bottom_by_score.slice(0, 5).map(d => ({...d, score: scoreFormat(d.score)}));\n const availableScore = scoreFormat(highWater[dayNum].available_score);\n return md`The lowest students by total score are:\n 1. Student ${bottom_by_score[0].email}: ${roundedScores[0].score} out of ${availableScore}\n 1. Student ${bottom_by_score[1].email}: ${roundedScores[1].score} out of ${availableScore}\n 1. Student ${bottom_by_score[2].email}: ${roundedScores[2].score} out of ${availableScore}\n 1. Student ${bottom_by_score[3].email}: ${roundedScores[3].score} out of ${availableScore}\n 1. Student ${bottom_by_score[4].email}: ${roundedScores[4].score} out of ${availableScore}`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":330,"value":"bottom_by_score = {\n const students = scores_days[dayNum].slice();\n students.sort((a, b) => a.score - b.score);\n return students.slice(0,5);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1416,"value":"stepDuration = 750","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1956,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1618,"value":"// make categorical colors for lines so can follow them and differentiate\nlineColorScale = d3.scaleOrdinal(d3.schemeCategory10) //Dark2 Tableau10\n .domain([0, groupedByStudentArrays.length])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1596,"value":"groupedByStudentArrays = Array.from(groupedByStudent, d => d[1])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1550,"value":"groupedByStudent = {\n // want to get map with email as the key and student's score and progress by course_day (currently the array index)\n // nested map by course_day keys --> by student email key --> score, num_problems_taken, farthest_graded_problem\n // d3.map(scores_days, (d, i) => ({course_day: i, students: d}))\n\n // first flatten to array of objects with course_day, email, score, etc.\n const flattened = scores_days.flatMap((d, i) => (d.map(s => ({course_day: i, ...s}))))\n \n return d3.group(flattened, d => d.email)\n\n //scores_days.map(d => d.filter(s => s.email == 0)).map((d, course_day) => [d[0].farthest_graded_problem, course_day]);\n \n // return flattened;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1565,"value":"groupedByStudent.get(0)[30] // .get(student_num)[dayNum]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1574,"value":"d3.pairs(groupedByStudent.get(0), d => d.farthest_graded_problem)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1568,"value":"scores_days[30][0] // [dayNum][student_num]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":510,"value":"// K\nscores_days = d3.json(\"https://gist.githubusercontent.com/docmparker/fd386f1e723e557e784fc1395aeec094/raw/b2b6fa84173759a59f0781c531829d6905c3ebd8/bd_scores_days_k.json\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1978,"value":"course_length = scores_days.length","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1167,"value":"scoresInitial = scores_days[0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":499,"value":"// high_water = d3.json(\"https://gist.githubusercontent.com/docmparker/37ca6ada9974e716ffe78d606d1eb277/raw/f8a4e46b81110d2a61e334c75e29f9ab89ad09eb/bd_high_water_mar.json\")\n\n// K\nhighWater = d3.json(\"https://gist.githubusercontent.com/docmparker/889476db6548ab66f1b24698f1f983b6/raw/8cf13c1789c37225dab7b98b67a7fdfda735be2b/bd_high_water_k.json\")\n\n// E\n// high_water = d3.json(\"https://gist.githubusercontent.com/docmparker/46068201daee3dba17dbba443dbea32e/raw/cfe2994c1ce09c36b59ce162e2391b5c617faea4/bd_high_water_e.json\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1198,"value":"highWaterInitial = highWater.slice(0,1);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2032,"value":"problemTimeBounds = {\n const stepBounds = highWater.map((d, i) => ({course_day: i+1, farthest_graded_problem: d.total_graded_problems_available}))\n stepBounds.unshift({course_day: 0, farthest_graded_problem: 0});\n return stepBounds;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2358,"value":"totalProblems = d3.max(problemTimeBounds, d => d.farthest_graded_problem)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":650,"value":"// K\nscore_topo_lines = d3.json(\"https://gist.githubusercontent.com/docmparker/833a3b5026e1bb2c83237eb2974ce336/raw/aca575c5cedf14f71606e64d091d233b6aa53007/score_topo_lines_mar.json\")\n\n// E\n// score_topo_lines = d3.json(\"https://gist.githubusercontent.com/docmparker/db60658c73d1f31ac7d34c3174e69b15/raw/f50ffbc4605002d44c152c51f636f20eda0bdfc9/score_topo_lines_e.json\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2130,"value":"release_schedule = (await FileAttachment('release_schedule.csv')).csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2347,"value":"d3.cumsum(Array.from(d3.rollup(release_schedule, v => d3.sum(v, d => d.graded_problem_num), d => d.lesson_release_day)), d => d[1])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2286,"value":"lessons_grouped = Array.from(d3.rollup(release_schedule, v => d3.map(v, d => d.lesson_num - 1).join(\", \"), d => d.lesson_release_day)).map(d => ({lesson_release_day: d[0], lessons: d[1]}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"margin = ({top: 20, right: 20, bottom: 20, left: 40})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2046,"value":"xAxis = g => g.attr(\"transform\", `translate(0, ${height - margin.bottom})`)\n .call(d3.axisBottom(x))\n .append('text')\n .attr('text-anchor', 'end')\n .attr('fill', 'black')\n .attr('font-size', '12px')\n .attr('font-weight', 'bold')\n .attr('x', width - margin.right)\n .attr('y', -10)\n .text('Problem number');","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2048,"value":"yAxis = g => g.attr(\"transform\", `translate(${margin.left}, 0)`)\n .call(d3.axisLeft(y))\n .append('text')\n .attr('transform', `translate(20, ${margin.top}) rotate(-90)`)\n .attr('text-anchor', 'end')\n .attr('fill', 'black')\n .attr('font-size', '12px')\n .attr('font-weight', 'bold')\n .text('Score (of 1.0)');","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"x = d3.scaleLinear()\n .domain([0, numQuestions])\n .range([margin.left, width - margin.right])\n .nice()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"y = d3.scaleLinear()\n .domain([0, 1.00])\n .range([height - margin.bottom, margin.top]) // ?rangeRound?","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1447,"value":"yTime = d3.scaleLinear()\n .domain([0, scores_days.length-1])\n .range([height - margin.bottom, margin.top])\n .nice()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2761,"value":"numQuestions = 221","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"html``\n\n/*.student.selected {\n fill: orange;\n stroke: blue;\n}*/","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1402,"value":"scoreFormat = d3.format(\".2f\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1078,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1307,"value":"import {Button, Range, Select, Toggle} from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2134,"value":"import {Plot} from \"@observablehq/plot\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1"}} 30:"$2f:body"