25:["$","title",null,{"children":"Submission Analysis | TzuWei | Observable"}] 4b:T166d,// Modified by me for customization // Copyright 2021 Observable, Inc. // Released under the ISC license. // https://observablehq.com/@d3/line-with-tooltip function DailySubmissionLineChart( data, { x = ([x]) => x, // given d in data, returns the (temporal) x-value y = ([, y]) => y, // given d in data, returns the (quantitative) y-value title, // given d in data, returns the title text defined, // for gaps in data curve = d3.curveLinear, // method of interpolation between points marginTop = 20, // top margin, in pixels marginRight = 30, // right margin, in pixels marginBottom = 30, // bottom margin, in pixels marginLeft = 40, // left margin, in pixels width = 640, // outer width, in pixels height = 400, // outer height, in pixels xType = d3.scaleUtc, // type of x-scale xDomain, // [xmin, xmax] xRange = [marginLeft, width - marginRight], // [left, right] yType = d3.scaleLinear, // type of y-scale yDomain, // [ymin, ymax] yRange = [height - marginBottom, marginTop], // [bottom, top] color = "currentColor", // stroke color of line strokeWidth = 1.5, // stroke width of line, in pixels strokeLinejoin = "round", // stroke line join of line strokeLinecap = "round", // stroke line cap of line yFormat, // a format specifier string for the y-axis yLabel // a label for the y-axis } = {} ) { // Compute values. const X = d3.map(data, x); const Y = d3.map(data, y); const O = d3.map(data, (d) => d); const I = d3.map(data, (_, i) => i); // Compute which data points are considered defined. if (defined === undefined) defined = (d, i) => !isNaN(X[i]) && !isNaN(Y[i]); const D = d3.map(data, defined); // Compute default domains. if (xDomain === undefined) xDomain = d3.extent(X); if (yDomain === undefined) yDomain = [0, d3.max(Y)]; // Construct scales and axes. const xScale = xType(xDomain, xRange); const yScale = yType(yDomain, yRange); const xAxis = d3 .axisBottom(xScale) .ticks(width / 80) .tickSizeOuter(0); const yAxis = d3.axisLeft(yScale).ticks(height / 40, yFormat); // Compute titles. if (title === undefined) { const formatDate = xScale.tickFormat(null, "%b %-d, %Y"); const formatValue = yScale.tickFormat(100, yFormat); title = (i) => `${formatDate(X[i])}\n${formatValue(Y[i])} submissions`; } else { const O = d3.map(data, (d) => d); const T = title; title = (i) => T(O[i], i, data); } // Construct a line generator. const line = d3 .line() .defined((i) => D[i]) .curve(curve) .x((i) => xScale(X[i])) .y((i) => yScale(Y[i])); const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;") .attr("font-family", "sans-serif") .attr("font-size", 10) .style("-webkit-tap-highlight-color", "transparent") .style("overflow", "visible") .on("pointerenter pointermove", pointermoved) .on("pointerleave", pointerleft) .on("touchstart", (event) => event.preventDefault()); svg .append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(xAxis); svg .append("g") .attr("transform", `translate(${marginLeft},0)`) .call(yAxis) .call((g) => g.select(".domain").remove()) .call((g) => g .selectAll(".tick line") .clone() .attr("x2", width - marginLeft - marginRight) .attr("stroke-opacity", 0.1) ) .call((g) => g .append("text") .attr("x", -marginLeft) .attr("y", 10) .attr("fill", "currentColor") .attr("text-anchor", "start") .text(yLabel) ); svg .append("path") .attr("fill", "none") .attr("stroke", color) .attr("stroke-width", strokeWidth) .attr("stroke-linejoin", strokeLinejoin) .attr("stroke-linecap", strokeLinecap) .attr("d", line(I)); deadlines.forEach((d) => { svg .append("line") .attr("x1", xScale(d.date)) .attr("y1", yScale(data.find((od) => od.date >= d.date).count)) .attr("x2", xScale(d.date)) .attr("y2", yRange[1] - 10) .attr("stroke", "red"); svg .append("text") .attr("x", xScale(d.date) + 4) .attr("y", yRange[1]) .text(d.label); }); const tooltip = svg.append("g").style("pointer-events", "none"); function pointermoved(event) { const i = d3.bisectCenter(X, xScale.invert(d3.pointer(event)[0])); tooltip.style("display", null); tooltip.attr("transform", `translate(${xScale(X[i])},${yScale(Y[i])})`); const path = tooltip .selectAll("path") .data([,]) .join("path") .attr("fill", "white") .attr("stroke", "black"); const text = tooltip .selectAll("text") .data([,]) .join("text") .call((text) => text .selectAll("tspan") .data(`${title(i)}`.split(/\n/)) .join("tspan") .attr("x", 0) .attr("y", (_, i) => `${i * 1.1}em`) .attr("font-weight", (_, i) => (i ? null : "bold")) .text((d) => d) ); const { x, y, width: w, height: h } = text.node().getBBox(); text.attr("transform", `translate(${-w / 2},${15 - y})`); path.attr( "d", `M${-w / 2 - 10},5H-5l5,-5l5,5H${w / 2 + 10}v${h + 20}h-${w + 20}z` ); svg.property("value", O[i]).dispatch("input", { bubbles: true }); } function pointerleft() { tooltip.style("display", "none"); svg.node().value = null; svg.dispatch("input", { bubbles: true }); } return Object.assign(svg.node(), { value: null }); }4c:T1701,// Modified by me for customization // Copyright 2021 Observable, Inc. // Released under the ISC license. // https://observablehq.com/@d3/grouped-bar-chart function HWProblemGroupedBarChart( data, { x = (d, i) => i, // given d in data, returns the (ordinal) x-value y = (d) => d, // given d in data, returns the (quantitative) y-value z = () => 1, // given d in data, returns the (categorical) z-value title, // given d in data, returns the title text marginTop = 30, // top margin, in pixels marginRight = 0, // right margin, in pixels marginBottom = 30, // bottom margin, in pixels marginLeft = 40, // left margin, in pixels width = 640, // outer width, in pixels height = 400, // outer height, in pixels xDomain, // array of x-values xRange = [marginLeft, width - marginRight], // [xmin, xmax] xPadding = 0.1, // amount of x-range to reserve to separate groups yType = d3.scaleLinear, // type of y-scale yDomain, // [ymin, ymax] yRange = [height - marginBottom, marginTop], // [ymin, ymax] zDomain, // array of z-values zPadding = 0.05, // amount of x-range to reserve to separate bars yFormat, // a format specifier string for the y-axis yLabel, // a label for the y-axis colors = d3.schemeTableau10 // array of colors } = {} ) { // Compute values. const X = d3.map(data, x); const Y = d3.map(data, y); const Z = d3.map(data, z); // Compute default domains, and unique the x- and z-domains. if (xDomain === undefined) xDomain = X; if (yDomain === undefined) yDomain = [0, d3.max(Y)]; if (zDomain === undefined) zDomain = Z; xDomain = new d3.InternSet(xDomain); zDomain = new d3.InternSet(zDomain); // Omit any data not present in both the x- and z-domain. const O = d3.map(data, (d) => d); const I = d3 .range(X.length) .filter((i) => xDomain.has(X[i]) && zDomain.has(Z[i])); // Construct scales, axes, and formats. const xScale = d3.scaleBand(xDomain, xRange).paddingInner(xPadding); const xzScale = d3 .scaleBand(zDomain, [0, xScale.bandwidth()]) .padding(zPadding); const yScale = yType(yDomain, yRange); const zScale = d3.scaleOrdinal(zDomain, colors); const xAxis = d3.axisBottom(xScale).tickSizeOuter(0); const yAxis = d3.axisLeft(yScale).ticks(height / 60, yFormat); // Compute titles. if (title === undefined) { const formatValue = yScale.tickFormat(100, yFormat); title = (i) => `${X[i]}\n${Z[i]}\n${formatValue(Y[i])}`; } else { const O = d3.map(data, (d) => d); const T = title; title = (i) => T(O[i], i, data); } const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;"); svg .append("g") .attr("transform", `translate(${marginLeft},0)`) .call(yAxis) .call((g) => g.select(".domain").remove()) .call((g) => g .selectAll(".tick line") .clone() .attr("x2", width - marginLeft - marginRight) .attr("stroke-opacity", 0.1) ) .call((g) => g .append("text") .attr("x", -marginLeft) .attr("y", 10) .attr("fill", "currentColor") .attr("text-anchor", "start") .text(yLabel) ); const bar = svg .append("g") .selectAll("rect") .data(I) .join("rect") .attr("x", (i) => xScale(X[i]) + xzScale(Z[i])) .attr("y", (i) => yScale(Y[i])) .attr("width", xzScale.bandwidth()) .attr("height", (i) => yScale(0) - yScale(Y[i])) .attr("fill", (i) => zScale(Z[i])) .attr("stroke", (i) => `${X[i]} ${Z[i]}` === selectedProblemLabel ? "black" : "none" ) .attr("stroke-width", 1.5) .on("pointerenter pointermove", pointermoved) .on("pointerleave", pointerleft) .on("touchstart", (event) => event.preventDefault()) .on("click", (_, i) => { mutable selectedProblemLabel = sortedProblemLabels[i]; }); svg .append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(xAxis); const tooltip = svg.append("g").style("pointer-events", "none"); function pointermoved(event) { function scaleBandInvert(scaler, pointerX) { const index = Math.floor(pointerX / scaler.step()); return scaler.domain()[index]; } const pointerX = d3.pointer(event)[0] - marginLeft; const i = d3.bisectLeft(xScale.domain(), scaleBandInvert(xScale, pointerX)) * 4; const j = i + d3.bisectLeft( xzScale.domain(), scaleBandInvert(xzScale, pointerX % xScale.step()) ); tooltip.style("display", null); const path = tooltip .selectAll("path") .data([,]) .join("path") .attr("fill", "white") .attr("stroke", "black"); const text = tooltip .selectAll("text") .data([,]) .join("text") .call((text) => text .selectAll("tspan") .data(`${title(j)}`.split(/\n/)) .join("tspan") .attr("x", 0) .attr("y", (_, i) => `${i * 1.1}em`) .attr("font-weight", (_, i) => (i ? null : "bold")) .style("font-size", 12) .text((d) => d) ); const { x, y, width: w, height: h } = text.node().getBBox(); tooltip.attr( "transform", `translate(${d3.pointer(event)[0] - w},${d3.pointer(event)[1] - h})` ); text.attr("transform", `translate(${-w / 2},${15 - y})`); path.attr("d", `M${-w / 2 - 10},5H-5H${w / 2 + 10}v${h + 20}h-${w + 20}z`); svg.property("value", O[j]).dispatch("input", { bubbles: true }); } function pointerleft() { tooltip.style("display", "none"); svg.node().value = null; svg.dispatch("input", { bubbles: true }); } return Object.assign(svg.node(), { scales: { color: zScale } }); }4d:T1854,// Modified by me for customization // Copyright 2021 Observable, Inc. // Released under the ISC license. // https://observablehq.com/@d3/stacked-bar-chart function ProblemScoreBarChart( data, { x = (d, i) => i, // given d in data, returns the (ordinal) x-value y = (d) => d, // given d in data, returns the (quantitative) y-value z = () => 1, // given d in data, returns the (categorical) z-value title, // given d in data, returns the title text marginTop = 30, // top margin, in pixels marginRight = 0, // right margin, in pixels marginBottom = 30, // bottom margin, in pixels marginLeft = 40, // left margin, in pixels width = 640, // outer width, in pixels height = 400, // outer height, in pixels xDomain, // array of x-values xRange = [marginLeft, width - marginRight], // [left, right] xPadding = 0.1, // amount of x-range to reserve to separate bars yType = d3.scaleLinear, // type of y-scale yDomain, // [ymin, ymax] yRange = [height - marginBottom, marginTop], // [bottom, top] zDomain, // array of z-values offset = d3.stackOffsetDiverging, // stack offset method order = d3.stackOrderNone, // stack order method yFormat, // a format specifier string for the y-axis yLabel, // a label for the y-axis colors = d3.schemeTableau10 // array of colors } = {} ) { // Compute values. const X = d3.map(data, x); const Y = d3.map(data, y); const Z = d3.map(data, z); const O = d3.map(data, (d) => d); // Compute default x- and z-domains, and unique them. if (xDomain === undefined) xDomain = X; if (zDomain === undefined) zDomain = Z; xDomain = new d3.InternSet(xDomain); zDomain = new d3.InternSet(zDomain); // Omit any data not present in the x- and z-domains. const I = d3 .range(X.length) .filter((i) => xDomain.has(X[i]) && zDomain.has(Z[i])); // Compute a nested array of series where each series is [[y1, y2], [y1, y2], // [y1, y2], …] representing the y-extent of each stacked rect. In addition, // each tuple has an i (index) property so that we can refer back to the // original data point (data[i]). This code assumes that there is only one // data point for a given unique x- and z-value. const series = d3 .stack() .keys(zDomain) .value(([x, I], z) => Y[I.get(z)]) .order(order) .offset(offset)( d3.rollup( I, ([i]) => i, (i) => X[i], (i) => Z[i] ) ) .map((s) => s.map((d) => Object.assign(d, { i: d.data[1].get(s.key) }))); // Compute the default y-domain. Note: diverging stacks can be negative. if (yDomain === undefined) yDomain = d3.extent(series.flat(2)); // Construct scales, axes, and formats. const xScale = d3.scaleBand(xDomain, xRange).paddingInner(xPadding); const yScale = yType(yDomain, yRange); const color = d3.scaleOrdinal(zDomain, colors); const xAxis = d3.axisBottom(xScale).tickSizeOuter(0); const yAxis = d3.axisLeft(yScale).ticks(height / 60, yFormat); // Compute titles. if (title === undefined) { const formatValue = yScale.tickFormat(100, yFormat); title = (i) => `${X[i]}\n${Z[i]}\n${formatValue(Y[i])}`; } else { const O = d3.map(data, (d) => d); const T = title; title = (i) => T(O[i], i, data); } const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;"); svg .append("text") .attr("x", width / 2) .attr("y", 10) .attr("text-anchor", "middle") .style("font-size", 12) .text(selectedProblemLabel); svg .append("g") .attr("transform", `translate(${marginLeft},0)`) .call(yAxis) .call((g) => g.select(".domain").remove()) .call((g) => g .selectAll(".tick line") .clone() .attr("x2", width - marginLeft - marginRight) .attr("stroke-opacity", 0.1) ) .call((g) => g .append("text") .attr("x", -marginLeft) .attr("y", 10) .attr("fill", "currentColor") .attr("text-anchor", "start") .text(yLabel) ); const bar = svg .append("g") .selectAll("g") .data(series) .join("g") .attr("fill", ([{ i }]) => color(Z[i])) .selectAll("rect") .data((d) => d) .join("rect") .attr("x", ({ i }) => xScale(X[i])) .attr("y", ([y1, y2]) => Math.min(yScale(y1), yScale(y2))) .attr("height", ([y1, y2]) => Math.abs(yScale(y1) - yScale(y2))) .attr("width", xScale.bandwidth()) .on("pointerenter pointermove", pointermoved) .on("pointerleave", pointerleft) .on("touchstart", (event) => event.preventDefault()); if (title) bar.append("title").text(({ i }) => title(i)); svg .append("g") .attr("transform", `translate(0,${yScale(0)})`) .call(xAxis); const tooltip = svg.append("g").style("pointer-events", "none"); const xDomainList = Array.from(xDomain); function pointermoved(event) { const targetTitle = event.target.querySelector("title"); if (!targetTitle) return; tooltip.style("display", null); const path = tooltip .selectAll("path") .data([,]) .join("path") .attr("fill", "white") .attr("stroke", "black"); const text = tooltip .selectAll("text") .data([,]) .join("text") .call((text) => text .selectAll("tspan") .data(`${targetTitle.innerHTML}`.split(/\n/)) .join("tspan") .attr("x", 0) .attr("y", (_, i) => `${i * 1.1}em`) .attr("font-weight", (_, i) => (i ? null : "bold")) .style("font-size", 12) .text((d) => d) ); const { x, y, width: w, height: h } = text.node().getBBox(); tooltip.attr( "transform", `translate(${d3.pointer(event)[0] - w},${d3.pointer(event)[1] - h})` ); text.attr("transform", `translate(${-w / 2},${15 - y})`); path.attr("d", `M${-w / 2 - 10},5H-5H${w / 2 + 10}v${h + 20}h-${w + 20}z`); } function pointerleft() { tooltip.style("display", "none"); } return Object.assign(svg.node(), { scales: { color } }); }4e:[{"id":"2ca9e8a48ac582159538c73ed40adb862833a92a281beaaabbfed1cfa11739fac943c41feadae528bb42fa2de6df6476028d1b990e3a5ee03db2192a2513a9cc","href":"https://static.observableusercontent.com/files/2ca9e8a48ac582159538c73ed40adb862833a92a281beaaabbfed1cfa11739fac943c41feadae528bb42fa2de6df6476028d1b990e3a5ee03db2192a2513a9cc","name":"algo2021@1.csv","type":"text/csv","lastModified":1664800514232.975,"size":560879},{"id":"c3335147a95d8252a3fa17aeab477686939e5fa4540863c848e87c4e4246fca6a3bfe3f58b15aa1f6ebb5a5da5a3d59e0b3945af5576dd35e992700956ec4a51","href":"https://static.observableusercontent.com/files/c3335147a95d8252a3fa17aeab477686939e5fa4540863c848e87c4e4246fca6a3bfe3f58b15aa1f6ebb5a5da5a3d59e0b3945af5576dd35e992700956ec4a51","name":"algo2022@1.csv","type":"text/csv","lastModified":1664800587564.849,"size":1137557}] 47:{"id":"5f69f18dc86f08ed","slug":"submission-analysis","title":"Submission Analysis","thumbnail":"51e51b683fe97f864198bb130889a72415291c973df6f36d0d2fe652baf1aeed","access_level":"public","create_time":"$D2022-09-29T00:58:08.068Z","update_time":"$D2023-10-27T12:27:02.194Z","view_time":null,"first_public_time":"$D2022-10-11T02:44:58.938Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"38add88142bcab6b","login":"uier","name":"TzuWei","avatar_url":"https://avatars-next.observableusercontent.com/e9804c75339c06872188c18615de542bff60b897d65b15c5519fd906c8be761a","tier":"starter_2024","bio":"Hi 👋, I'm TzuWei (uier).\n\na computer science student from Taiwan 🇹🇼","followed_by_you":false,"follows_you":false},"version":984,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"0f57052923586bf5","login":"uier","name":"TzuWei","avatar_url":"https://avatars-next.observableusercontent.com/e9804c75339c06872188c18615de542bff60b897d65b15c5519fd906c8be761a","tier":null,"bio":"Hi 👋, I'm TzuWei (uier).\n\na computer science student from Taiwan 🇹🇼","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"0f57052923586bf5","login":"uier","name":"TzuWei","avatar_url":"https://avatars-next.observableusercontent.com/e9804c75339c06872188c18615de542bff60b897d65b15c5519fd906c8be761a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Submission Analysis","cells":[{"id":0,"value":"# Submission Analysis\n\nNTNU CSIE - Computer Algorithm - 2021 & 2022 Spring","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":17,"value":"viewof selectedYear = Inputs.select([\"2022\", \"2021\"], { label: \"Select year\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"

\n ${DailySubmissionLineChart(dataByDate, {\n x: (d) => d.date,\n y: (d) => d.count,\n width,\n height: 200,\n yLabel: \"↑ Submission Count\",\n color: \"steelblue\"\n })}\n

\n${dailySubmissionLineChartFootnote}","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":288,"value":"

\n ${HWProblemGroupedBarChart(dataByHWProblem, {\n x: (d) => d.hw,\n y: (d) => d.count,\n z: (d) => d.problem,\n yLabel: \"↑ Submission Count\",\n width: width * 0.6,\n height: 200\n })}\n ${ProblemScoreBarChart(dataByProblemScoreStatus, {\n x: (d) => d.score,\n y: (d) => d.count,\n z: (d) => d.statusLabel,\n xDomain: [\n ...new Set(dataByProblemScoreStatus.map((d) => d.score))\n ].sort((a, b) => a - b),\n yLabel: \"↑ Submission Count\",\n width: width * 0.4,\n height: 200,\n zDomain: SUBMISSION_STATUS_LABELS,\n colors: SUBMISSION_STATUS_COLORS\n })}\n

\ntips: you can click the bar on the left chart to change problem, then the right chart will update","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":840,"value":"

\n AC% (by user)\n

\n ${dataByHWProblem.map(({ hw, problem }) => {\n const problemData = data.filter((d) => d.problemLabel === `${hw} ${problem}`);\n const acUserCount = [\n ...new Set(problemData.filter((d) => d.status === \"0\").map((d) => d.user))\n ].length;\n return StatCard(Math.round(acUserCount / totalUser[selectedYear] * 100), `${hw} ${problem}`);\n })} \n

\n The Ratio of submitted users\n

\n ${dataByHWProblem.map(({ hw, problem }) => {\n const problemData = data.filter((d) => d.problemLabel === `${hw} ${problem}`);\n const triedUserCount = [\n ...new Set(problemData.map((d) => d.user))\n ].length;\n return StatCard(Math.round(triedUserCount / totalUser[selectedYear] * 100), `${hw} ${problem}`);\n })} \n

\n AC% (by submission count)\n

\n ${dataByHWProblem.map(({ hw, problem }) => {\n const problemData = data.filter((d) => d.problemLabel === `${hw} ${problem}`);\n const acSubmissionCount = problemData.filter((d) => d.status === \"0\").length;\n return StatCard(Math.round(acSubmissionCount / problemData.length * 100), `${hw} ${problem}`);\n })} \n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":968,"value":"Plot.plot({\n marks: [\n Plot.barY(dataByHour, {\n x: \"hour\",\n y: \"count\",\n fill: \"steelblue\"\n }),\n Plot.ruleY([0])\n ],\n width,\n height: 200,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":722,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":194,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":807,"value":"dailySubmissionLineChartFootnote = ({\n \"2022\": \"note: the deadline of HW1 was changed from 3/25 to 3/26\",\n \"2021\":\n \"note: the deadline of HW1 was changed from 3/26 to 4/3, HW2 was changed from 4/25 to 5/2\"\n}[selectedYear])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":284,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":426,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":891,"value":"divergeColorMap = d3.scaleDiverging(d3.interpolateRdBu).domain([-0.8, 1])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":826,"value":"StatCard = (value, desc, id = null) => {\n return html`

\n ${value}%\n ${desc}\n

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":830,"value":"styles = ({\n card: {\n display: \"flex\",\n \"flex-direction\": \"column\",\n \"align-items\": \"center\",\n \"text-align\": \"center\",\n padding: \"2px\",\n outline: \"1px solid #777\",\n width: \"220px\"\n },\n cardValue: {\n \"font-size\": \"24px\",\n \"font-weight\": \"bold\"\n },\n cardDesc: {\n \"font-size\": \"14px\"\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":828,"value":"styleStringify = (styleObj) =>\n Object.entries(styleObj)\n .map(([k, v]) => `${k}: ${v}`)\n .join(\"; \")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"dataByDate = d3\n .rollups(\n data,\n (D) => d3.sum(D, (d) => 1),\n (d) => new Date(d.timestamp.slice(0, 10))\n )\n .map(([date, count]) => ({ date, count }))\n .sort((a, b) => a.date - b.date)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":943,"value":"dataByHour = d3\n .rollups(\n data,\n (D) => d3.sum(D, (d) => 1),\n (d) => parseInt(d.timestamp.slice(11, 13), 10)\n )\n .map(([hour, count]) => ({ hour, count }))\n .sort((a, b) => a.hour - b.hour)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"dataByHWProblem = d3\n .rollups(\n data,\n (D) => d3.sum(D, (d) => 1),\n (d) => d.problemLabel\n )\n .map(([hwProblem, count]) => ({\n hw: hwProblem.split(\" \")[0],\n problem: hwProblem.split(\" \")[1],\n count\n }))\n .sort((a, b) =>\n a.hw === b.hw ? (a.problem < b.problem ? -1 : 1) : a.hw < b.hw ? -1 : 1\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":429,"value":"dataByProblemScoreStatus = {\n const problemData = data.filter(\n (d) => d.problemLabel === selectedProblemLabel\n );\n const D = d3\n .flatRollup(\n problemData,\n (D) => d3.sum(D, () => 1),\n (d) => d.score,\n (d) => d.statusLabel\n )\n .map(([score, statusLabel, count]) => ({\n score,\n statusLabel,\n count\n }));\n const problemScores = [...new Set(problemData.map((d) => d.score))];\n problemScores.forEach((score) => {\n SUBMISSION_STATUS_LABELS.forEach((statusLabel) => {\n if (!D.find((d) => d.score === score && d.statusLabel === statusLabel)) {\n D.push({ score, statusLabel, count: 0 });\n }\n });\n });\n return D;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":712,"value":"mutable selectedProblemLabel = \"HW2 pA\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":697,"value":"sortedProblemLabels = [...new Set(data.map((d) => d.problemLabel))].sort()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":781,"value":"deadlines = ({\n \"2022\": [\n { date: new Date(\"2022-03-26\"), label: \"HW1 Due\" },\n { date: new Date(\"2022-04-22\"), label: \"HW2 Due\" },\n { date: new Date(\"2022-05-20\"), label: \"HW3 Due\" },\n { date: new Date(\"2022-06-17\"), label: \"HW4 Due\" }\n ],\n \"2021\": [\n { date: new Date(\"2021-04-03\"), label: \"HW1 Due\" },\n { date: new Date(\"2021-05-02\"), label: \"HW2 Due\" },\n { date: new Date(\"2021-05-27\"), label: \"HW3 Due\" },\n { date: new Date(\"2021-06-23\"), label: \"HW4 Due\" }\n ]\n}[selectedYear])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":852,"value":"totalUser = ({ \"2021\": 78, \"2022\": 102 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"data = importedDataByYear[selectedYear].filter(\n (d) => new Date(d.timestamp) <= new Date(`${selectedYear}-08-01`)\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":761,"value":"importedDataByYear = ({\n \"2022\": await FileAttachment(\"algo2022@1.csv\").csv(),\n \"2021\": await FileAttachment(\"algo2021@1.csv\").csv()\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":467,"value":"SUBMISSION_STATUS_LABELS = [\"PE\", \"AC\", \"WA\", \"CE\", \"TLE\", \"MLE\", \"RE\", \"JE\", \"OLE\"];\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":469,"value":"SUBMISSION_STATUS_COLORS = [\n \"#9e675a\",\n \"#00C853\",\n \"#F44336\",\n \"#DD2C00\",\n \"#9c56a8\",\n \"#FF9800\",\n \"#2196F3\",\n \"#a65a5c\",\n \"#BF360C\"\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":816,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":819,"value":"# Workspace","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":386,"value":"// ## Ideas\n// - 每個 user 每次作業的最後作答時間","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":491,"value":"html`${SUBMISSION_STATUS_COLORS.map(\n (color, i) =>\n `${SUBMISSION_STATUS_LABELS[i]}`\n).join(\"\")}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"import { SummaryTable } from \"@observable/summary-table\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"SummaryTable(data)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4e","stdlib":"1"}} 24:null