29:null 2a:["$","title",null,{"children":"Study Time Template - Sept 21 | Joe | Observable"}] 2f:T435,function appendCircles(sel, args) { // create tooltip for "g" in this sel // sel.call(ttip, args.tt); sel .append('line') .attr('class', 'connect') .attr('x1', d => x(d.due)) .attr('y1', d => y(d.cumSum)) .attr('x2', d => x(d.newDeadLine)) .attr('y2', d => y(d.cumSum)) // .attr('stroke', 'red 1px dotted #999') .attr('stroke', 'blue') .style('stroke-dasharray', [1, 5]); sel .append('line') .attr('class', 'due') .style('line', args.color) .style('fill', args.fill) .attr('x1', d => x(d.due)) .attr('y1', d => y(d.cumSum)) .attr('x2', d => x(d.due)) .attr('y2', d => y(d.cumSum - d.val * (1 - d.done / 100))) //d => y(d.val * (1 - d.done / 100))) .attr('stroke', 'red'); sel .append('rect') .attr('class', 'NDL') // .on('mouseover', d => ttG.text(d.desc)) .style('stroke', args.color) .style('fill', args.fill) .attr('x', d => x(d.newDeadLine)) .attr('y', d => y(d.cumSum)) .attr('width', 10) .attr('height', d => y(0) - y(d.val * (1 - d.done / 100))); }30:Te6f,// .json important to keep local times from being made UTC dataYml = yaml.json` semester: - course: Therapeutic Rec val: 5 due: 2021-09-16T22:00:00 desc: Certification - course: Therapeutic Rec val: 5 due: 2021-09-21T22:00:00 desc: Quiz on AODA - course: Therapeutic Rec val: 10 due: 2021-10-05T22:00:00 desc: Book Club - course: Therapeutic Rec val: 15 due: 2021-10-19T22:00:00 desc: Literature Review - course: Therapeutic Rec val: 20 due: 2021-10-20T22:00:00 desc: Seminar - date to be chesoe - course: Therapeutic Rec val: 5 due: 2021-10-21T22:00:00 desc: Proof of Position - course: Therapeutic Rec val: 10 due: 2021-10-28T22:00:00 desc: IDeA competition Letter of Intent - course: Therapeutic Rec val: 10 due: 2021-10-28T22:00:00 desc: Inclusive Rec Plan 1st draft - course: Therapeutic Rec val: 20 due: 2021-11-25T22:00:00 desc: Community Service Learning or Inclusive Rec Plan or IDeA competition write-up - course: Therapeutic Rec val: 10 due: 2021-12-02T22:00:00 desc: Participation - course: Therapeutic Rec val: 15 due: 2021-12-07T22:00:00 desc: Final Reflection - course: Evaluation and Assessment val: 2 due: 2021-09-20T22:00:00 desc: Research Proposal - course: Evaluation and Assessment val: 5 due: 2021-10-02T22:00:00 desc: Chapters 1,2 Submission - course: Evaluation and Assessment val: 3 due: 2021-10-09T22:00:00 desc: Ethics Submission without Research Instrument - course: Evaluation and Assessment val: 8 due: 2021-10-25T22:00:00 desc: Research Instruments - course: Evaluation and Assessment val: 5 due: 2021-10-27T22:00:00 desc: Blind Peer Review of Res. Des. (ch 1+2+3) - course: Evaluation and Assessment val: 10 due: 2021-10-29T22:00:00 desc: Chapters 1,2,3 Submission ~ peer-reviewed copy to instuctor (date depends on Lab group) - course: Evaluation and Assessment val: 15 due: 2021-12-03T22:00:00 desc: Public Presentation (date depends on Lab group) - course: Evaluation and Assessment val: 20 due: 2021-12-11T22:00:00 desc: Final Project - course: Entrepreneurship val: 0 due: 2021-09-18T22:00:00 desc: Partnership formation - course: Entrepreneurship val: 6 due: 2021-09-25T22:00:00 desc: Business Idea Proposal - course: Entrepreneurship val: 2 due: 2021-10-02T22:00:00 desc: Field Visit 1, - Local Small Bus. Centre report - course: Entrepreneurship val: 5 due: 2021-10-09T22:00:00 desc: Prototyping - course: Entrepreneurship val: 15 due: 2021-10-23T22:00:00 desc: Mid-term Exam - course: Entrepreneurship val: 10 due: 2021-10-30T22:00:00 desc: Feasability Study - course: Entrepreneurship val: 3 due: 2021-10-06T22:00:00 desc: Field Visit 2 - Competition Assessment Report - course: Entrepreneurship val: 20 due: 2021-11-20T22:00:00 desc: Financial Plan - course: Entrepreneurship val: 10 due: 2021-12-04T22:00:00 desc: Business Plan Defense - course: Entrepreneurship val: 15 due: 2021-12-11T22:00:00 desc: Final Written Business Plan - course: Entrepreneurship val: 15 due: 2021-12-20T22:00:00 desc: Final Exam (Guessing Final Exam date) - course: Risk Assessment val: 30 due: 2021-12-20T22:00:00 desc: Weekly Cases and Quizzes - course: Risk Assessment val: 30 due: 2021-12-07T22:00:00 desc: Final Assessment - course: Risk Assessment val: 30 due: 2021-11-18T22:00:00 desc: Risk Management and Emergency Plan - course: Risk Assessment val: 10 due: 2021-12-06T22:00:00 desc: Crisis Management Plan `31:T4a0,deadline_data_ = { let data = filteredWDT; //.slice().sort((a, b) => a.date - b.date); // remainingExams let pts = data.map(d => [d.date, d.cvals]); // convHull is a list of pairs let convHull = chPoints; //convUHull(pts); // console.log(pts); // console.log(convHull); let deadline_data = []; for (let i = 0; i < convHull.length - 1; i++) { // filtered_data is the exams having cumulative value between two convex points. let filtered_data = data.filter( d => (d.cumSum >= convHull[i][1]) & (d.cumSum <= convHull[i + 1][1]) ); filtered_data; // ??? let m = // eg slope (convHull[i + 1][1] - convHull[i][1]) / Math.max(1, convHull[i + 1][0] - convHull[i][0]); // avoid div by zero for (let t of filtered_data) { t.newDeadLine = new Date( (t.cumSum - convHull[i][1]) / m + convHull[i][0].getTime() ); t.cv1 = convHull[i]; t.cv2 = convHull[i + 1]; t.hullN = i; t.m = m; } deadline_data = deadline_data.concat(filtered_data); // console.log("fite"); // console.log(deadline_data); } deadline_data = Array.from(new Set(deadline_data)); return deadline_data; }32:T4d8,{ // to create a dependency // chart; // const tooltip = d3 // .select("body") // svg#dog // .append("div") // .attr("class", "svg-tooltip") // .style("position", "absolute") // .style("visibility", "hidden"); // tooltip.style("top", 120 + "px").style("left", 70 + "px"); // // .text("I'm a circle!"); const tt_node = tooltip.select("div#tooltip"); tt_node.text("mom?"); tooltip .selectAll("rect") //.select('svg') .style("fill", "blue") .on("mouseover", function(d) { // tooltip.text(`${d.course} ${d.desc} ${formatTime(d.due)}`); console.log("hello George"); tt_node.html( `

${d.course}

${d.desc}

${formatTime(d.due)}

${d.val}%

` ); return tooltip.style("visibility", "visible"); }) // .on("mousemove", function() { // return tooltip.style("top", 120 + "px").style("left", 70 + "px"); // .style("top", d3.event.pageY - 10 + "px") // .style("left", d3.event.pageX + 10 + "px"); // }) .on("mouseout", function() { return tooltip.style("visibility", "hidden"); }); }33:[] 2d:{"id":"bd60d7425b55abbe","slug":null,"title":"Study Time Template - Sept 21","thumbnail":"2f98fa76de0ed594839df45d60d1460a9211592a799477ce4406b1a87090c379","access_level":"public","create_time":"$D2020-09-21T20:17:01.149Z","update_time":"$D2022-12-06T17:40:21.487Z","view_time":null,"first_public_time":"$D2022-12-06T17:40:19.887Z","fork":{"id":"8d436464ce5d4e1c","slug":"study-time-template","title":"Study Time Template","owner":{"id":"d4bde6b3ee650269","login":"josephsmann","name":"Joe"}},"stars":0,"starred":false,"owner":{"type":"team","id":"d4bde6b3ee650269","login":"josephsmann","name":"Joe","avatar_url":"https://avatars-next.observableusercontent.com/8089eca3d0d1bfc18ba5f7492ea1574d05db45eebbc8e0f3af1c72105b236d4c","tier":"starter_2024"},"version":2163,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"fc88ff3942f7785e","login":"josephsmann","name":"Joe","avatar_url":"https://avatars-next.observableusercontent.com/8089eca3d0d1bfc18ba5f7492ea1574d05db45eebbc8e0f3af1c72105b236d4c","tier":null}],"members":[{"type":"individual","id":"fc88ff3942f7785e","login":"josephsmann","name":"Joe","avatar_url":"https://avatars-next.observableusercontent.com/8089eca3d0d1bfc18ba5f7492ea1574d05db45eebbc8e0f3af1c72105b236d4c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Study Time Template - Sept 21","cells":[{"id":1643,"value":"md`# Study Time Template - Sept 21`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"intro = md`\n\nWhat this chart is for: to suggest deadlines to avoid work \"crunches\". The goal is to get your workload as low as possible.\n\n- Each rectangle represents a task.\n- its size represents its value\n- its colour varies by subject\n- current configuration has completion of one task before starting another. This is not intended to be realistic. \n- There are sliders below to enter how much work has already been completed.\n- _Theoretically_ ideal deadlines are given by the coloured rectangles.\n- Hard deadlines are given by the vertical red lines.\n- The **Current Workload** is the number of marks earned per day if the schedule is followed.\n\n\nBy moving the cursor over the rectangles more information will be given.\n- Course name\n- Task description\n- Value of task\n- Ideal completion time \n- Days until next task with ideal schedule\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1892,"value":"md`## current problem:\ngetting time and workdone updates working properly\n- trying to use \\`\\`\\`mutable x \\`\\`\\` \n- how to get the date update from resetting the scale \n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1719,"value":"svg = {\n // introduce redraw dependency on workDoneTable and timeSlider\n workDoneTable;\n timeSlider;\n\n // timeSlider; // keep dependency on time slider\n // deadline_data;\n return d3\n .create('svg')\n .attr('class', 'dog')\n .attr('viewBox', [0, 0, width, height])\n .style('border', '1px dotted #999');\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2001,"value":"// bigG\n// .selectAll('g')\n// .style('stroke', 'blue')\n// .style('stroke-size', 4)\n// // .on('mouseover', function(e) {\n// // e.currentTarget.style('opacity', 0.3);\n// // })\n// // .on('mouseover', e => console.log(e.currentTarget))\n// .on('mouseover', (e, d) => console.log(`where? ${d.course}`))\n// .on('mouseover', e => {\n// bigG.selectAll('text').style('stroke', 'green');\n// console.log(\"where?\");\n// // new from D3 v. 6 use e.currentTarget (not \"this\")\n// console.log(e.currentTarget);\n// })\n// .on('mouseout', e => bigG.selectAll('text').style('stroke', 'blue'))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2077,"value":"// d3\n// .select('#ttg')\n// .style('stroke', 'red')\n// .text('wassup?')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2053,"value":"// bigG\n// .selectAll('rect')\n// .data()\n// .call(ttip, d3.select('#ttg'))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"chart = {\n workDoneTable;\n timeSlider;\n\n d3.selectAll(\"rect.NDL\").call(ttip, tooltip);\n svg.call(zoom);\n\n const yAxisNode = svg\n .append(\"g\")\n .attr(\"class\", \"y-axis\")\n .call(yAxis);\n\n bigG\n .append(\"text\")\n .attr(\"x\", 80)\n .attr(\"y\", 70)\n .text(\n deadline_data.length > 0\n ? `Days until next ideal completion: ${(\n (deadline_data[0].newDeadLine - Date.now()) /\n (1000 * 60 * 60 * 24)\n ).toFixed(1)}`\n : ''\n );\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2144,"value":"tooltip = bigG.append('g')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1182,"value":"viewof timeSlider = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1186,"value":"sliderDate = md`${formatTime(new Date(timeSlider))}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1125,"value":"nowButton = {\n const form = html``;\n form.now.onclick = () => {\n viewof timeSlider.value = Date.now();\n viewof timeSlider.dispatchEvent(new CustomEvent(\"input\"));\n };\n\n return form;\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":513,"value":"// how do I get this to call a function when changed ?\n// viewof is a combination of expicitView and explicitVariable\nviewof workDoneTable = {\n const table = makeTable(data.sort((a, b) => a.due - b.due), [\n \"Course Name\",\n \"Description\",\n \"Value\",\n \"Due Date\",\n \"Percent done\"\n ]);\n\n table.onmousemove = () => {\n // this is the value that will be returned to listeners\n table.value = jParseTable(table);\n // tell listeners to update\n table.dispatchEvent(new CustomEvent(\"input\"));\n };\n\n table.onmousemove();\n\n return table;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1900,"value":"md`From [here](https://observablehq.com/@observablehq/introduction-to-mutable-state ): *Mutable values can be referenced either reactively, or non-reactively, as appropriate.* To use the current value of a mutable without creating a dependency, use \\`mutable x\\`; to depend on it for re-evaluation, just use \\`x\\`.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1716,"value":"zoom = d3.zoom().on('zoom', event => {\n // const rescaleX = d3.event.transform.rescaleX(x);\n const rescaleX = event.transform.rescaleX(x);\n xAxisG.call(axis.scale(rescaleX));\n chPath.call(hullPoints, rescaleX);\n gRects\n .selectAll('rect.NDL')\n .attr('x', d => rescaleX(d.newDeadLine))\n .call(ttip, tooltip);\n gRects\n .selectAll('line.due')\n .attr('x2', d => rescaleX(d.due))\n .attr('x1', d => rescaleX(d.due));\n gRects\n .selectAll('line.connect')\n .attr('x2', d => rescaleX(d.newDeadLine))\n .attr('x1', d => rescaleX(d.due));\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1986,"value":"callout = (g, value) => {\n if (!value) return g.style(\"display\", \"none\");\n\n g\n .style(\"display\", null)\n .style(\"pointer-events\", \"none\")\n .style(\"font\", \"10px sans-serif\");\n\n const path = g.selectAll(\"path\")\n .data([null])\n .join(\"path\")\n .attr(\"fill\", \"white\")\n .attr(\"stroke\", \"black\");\n\n const text = g.selectAll(\"text\")\n .data([null])\n .join(\"text\")\n .call(text => text\n .selectAll(\"tspan\")\n .data((value + \"\").split(/\\n/))\n .join(\"tspan\")\n .attr(\"x\", 0)\n .attr(\"y\", (d, i) => `${i * 1.1}em`)\n .style(\"font-weight\", (_, i) => i ? null : \"bold\")\n .text(d => d));\n\n const {x, y, width: w, height: h} = text.node().getBBox();\n\n text.attr(\"transform\", `translate(${-w / 2},${15 - y})`);\n path.attr(\"d\", `M${-w / 2 - 10},5H-5l5,-5l5,5H${w / 2 + 10}v${h + 20}h-${w + 20}z`);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1810,"value":"gSel = bigG\n // a group for all the points so I can assign common attributes and styles\n .selectAll('g')\n .style('stroke', 'black')\n // .data needs a selection\n .data(deadline_data)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1813,"value":"gRects = gSel\n // a group for each data point - so I can add text and orbiting moons\n .join('g')\n .attr('class', 'gRects')\n\n // this is cool...\n .call(\n appendCircles,\n {\n color: d => \"black\", // color(d.course),\n fill: d => color(d.course), //d3.rgb(100, 150, 200),\n size: d => d.val * (1 - d.done / 100),\n tt: d => d.desc\n },\n x\n )\n ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2133,"value":"// this depends on ttip and d3 ?\nd3.selectAll(\"rect.NDL\").call(ttip, d3.select('#ttg'))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1803,"value":"// how about instead of making more paths we\nhullPoints = (path, xScale) =>\n path\n // .attr('class', 'hullPoints')\n // .append(\"path\")\n .attr(\"d\", jline(chPoints.map(([xa, ya]) => [xScale(xa), y(ya)])))\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"black\")\n .attr(\"stroke-width\", 1.5)\n .attr(\"stroke-miterlimit\", 1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1807,"value":"jline = d3\n .line()\n .x(d => d[0])\n .y(d => d[1])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1794,"value":"bigG = svg.append('g').attr('id', \"bigG\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1730,"value":"xAxisG = svg\n .append(\"g\")\n .attr('transform', `translate(0 ${height - margin.bottom})`)\n // .attr(\"class\", \"x-axis\")\n .call(axis)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1798,"value":"chPath = bigG.append(\"path\").call(hullPoints, x)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1726,"value":"axis = d3.axisBottom(x)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1779,"value":"axis(xAxisG)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"mutable x = {\n return (\n d3\n .scaleTime()\n // .domain(d3.extent(orderedTasks.map(d => d.due)))\n // .domain(d3.extent(data, d => d.due))\n .domain(timeExtent)\n .range([margin.left, width - margin.right])\n );\n}\n// .range([0, width])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1301,"value":"// this makes everything work (it was the step parameter in the slider that was confusing us)\n{\n // const t = Date.now();\n viewof timeSlider.value = t; //.getTime()),\n viewof timeSlider.dispatchEvent(new CustomEvent(\"input\"));\n return new Date(t);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1267,"value":"t = {\n // 1593735360002\n while (true) {\n yield Promises.tick(1 * 60 * 1000, Date.now());\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1089,"value":"new parseDate(\"2020-04-07 03:00\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1502,"value":"function ttip(sel, tt_node) {\n sel\n .on(\"mouseover\", function(e, d) {\n console.log(`in ttip > mouseover ${sel}`);\n console.log(sel);\n tt_node\n // bigG\n .selectAll('text')\n .data([\n { k: \"course\", v: d.course },\n { k: \"desc\", v: d.desc },\n { k: \"value\", v: d.val },\n { k: \"ideal completion\", v: formatTime(d.newDeadLine) },\n { k: \"days to next task\", v: d.d2d.toFixed(1) }\n // { k: \"what is\", v: \"this here\" }\n ])\n .join(\"text\") // make a text element for \"course\", \"desc\" etc.\n // .attr(\"x\", 80)\n // .attr(\"y\", 100)\n .attr(\"x\", 70)\n .attr(\"y\", (d, i) => 100 + 20 * i)\n .style(\"font-size\", 12)\n .text(t => `${t.k}: ${t.v}`);\n\n return tt_node.style(\"visibility\", \"visible\");\n })\n\n .on(\"mouseout\", function() {\n return tt_node.style(\"visibility\", \"hidden\");\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":640,"value":"chPoints = {\n const chPoints = convUHull(\n [[new Date(timeSlider), 0.0]].concat(\n filteredWDT.map(d => [d.due, d.cumSum])\n )\n );\n return chPoints;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":767,"value":"workDoneTable","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":617,"value":"filteredWDT = {\n const filteredWDT = workDoneTable\n // .map(d => ({\n // course: d['Course Name'],\n // desc: d.Description,\n // val: +d.Value * (1 - +d['Percent done'] / 100),\n // due: new Date(d['Due Date']),\n // done: +d['Percent done']\n // }))\n .filter(d => (d.due >= timeSlider) & (d.done < 100));\n\n const cumSum = d3.cumsum(filteredWDT, d => d.val * (1 - d.done / 100));\n return filteredWDT.map((d, i) => ({ ...d, cumSum: cumSum[i] }));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":440,"value":"md`## The Work Done problem`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":331,"value":"md`## Data Manipulation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":344,"value":"orderedTasks = {\n const s = remainingTasks.sort((a, b) => a.due - b.due);\n const cumVals = d3.cumsum(s, d => d.val);\n return s.map((d, i) => ({ ...d, cumVals: cumVals[i] }));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":336,"value":"remainingTasks = {\n return data.filter(d => d.due >= timeSlider);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1570,"value":"deadline_data = deadline_data_.map((d, i) => ({\n ...d,\n d2d: deadline_data_[i + 1]\n ? (deadline_data_[i + 1].newDeadLine - d.newDeadLine) /\n (1000 * 60 * 60 * 24)\n : 0\n}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1045,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":702,"value":"function makeTable(data_, headerList) {\n const data = data_.sort((a, b) => a.due - b.due);\n\n const table = d3.create(\"table\");\n table\n .append('tr')\n .selectAll('th')\n .data(headerList)\n .join('th')\n .text(d => d);\n\n const tr_sel = table\n .attr(\"contentEditable\", 'true')\n .attr(\"id\", 'data-table')\n .append(\"tbody\")\n .selectAll(\"tr\")\n .data(data)\n .join(\"tr\");\n\n tr_sel\n .append(\"td\")\n // .style(\"background-color\", color(d => d.course))\n .text(d => `${d.course}`)\n .style(\"background-color\", d => color(d.course));\n\n tr_sel.append(\"td\").html(d => d.desc);\n tr_sel.append(\"td\").html(d => d.val);\n tr_sel.append(\"td\").html(d => formatTime(d.due));\n tr_sel\n .append(\"td\")\n .html(\n (d, i) =>\n ` `\n );\n\n return table.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":279,"value":"md`## Graphics stuff`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":978,"value":"margin = ({ top: 10, right: 10, bottom: 45, left: 30 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1746,"value":"axxis = d3.axisBottom(x)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":973,"value":"__xAxis = g =>\n g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(axxis) //.ticks(d3.timeDay.every(1)))\n .selectAll(\"text\")\n .attr(\"transform\", \"translate(-10,10)rotate(-45)\")\n .style(\"text-anchor\", \"end\")\n .style(\"font-size\", 10)\n .style(\"fill\", \"#69a3b2\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":953,"value":"color = d3.scaleOrdinal(d3.schemeTableau10).domain(data.map(d => d.course))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":752,"value":"md`The code below updates the table html dynamically using the slider. Worth thinking about...`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":738,"value":"d3\n .selectAll('table#data-table tr')\n // .style('visibility', 'collapse')\n // .style('visibility', (d, i) => (d.due <= timeSlider ? `visible` : 'collapse'))\n .style('visibility', (d, i) =>\n (d && d.due > timeSlider) | !d ? `visible` : 'collapse'\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":648,"value":"line = d3\n .line()\n .x(d => x(d[0]))\n .y(d => y(d[1]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1433,"value":"ttooltip = {\n // to create a dependency\n // chart;\n\n // const tooltip = d3\n // .select(\"body\") // svg#dog\n // .append(\"div\")\n // .attr(\"class\", \"svg-tooltip\")\n // .style(\"position\", \"absolute\")\n // .style(\"visibility\", \"hidden\");\n // tooltip.style(\"top\", 220 + \"px\").style(\"left\", 80 + \"px\");\n\n const tooltip = d3.select(\"svg.dog\"); // svg#dog\n\n tooltip\n .append(\"div\")\n .attr(\"id\", \"tooltip\")\n .attr(\"class\", \"svg-tooltip\")\n // .style(\"position\", \"absolute\")\n // .style(\"visibility\", \"hidden\");\n .attr(\"x\", 80)\n .attr(\"y\", 200);\n // tooltip\n // .style(\"top\", 220 + \"px\")\n // .style(\"left\", 80 + \"px\")\n // .text(\"I'm a circle!\");\n return tooltip;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1466,"value":"tooltip.selectAll(\"rect\").style(\"fill\", 'blue')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":365,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":316,"value":"formatTime = d3.timeFormat(\"%Y-%m-%d %H:%M\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1621,"value":"timeExtent = [\n new Date(Date.now() - 1000 * 60 * 60 * 24),\n d3.max(data, d => d.due)\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"y = d3\n .scaleLinear()\n // .domain(d3.extent(orderedTasks.map(d => d.cumVals)))\n .domain([0, d3.max(orderedTasks.map(d => d.cumVals))])\n .range([height - margin.bottom, margin.top])\n// .range([height - ypadding, ypadding])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1010,"value":"yAxis = g =>\n g.attr(\"transform\", `translate(${margin.left},0)`).call(d3.axisLeft(y))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"height = 400","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"md`## play with YAML first`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"data = dataYml.semester.map(d => ({\n course: d.course,\n val: d.val,\n due: new Date(d.due),\n desc: d.desc\n}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"md`# Appendix\n-----`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1092,"value":"// parse a date in yyyy-mm-dd format\n\nfunction parseDate(string) {\n if (typeof string == \"undefined\") return \"undefined\";\n let [\n _,\n year,\n month,\n day,\n hour,\n minute\n ] = /(\\d{4})-(\\d{1,2})-(\\d{1,2})[ -T](\\d{1,2}):(\\d{1,2})/.exec(string);\n return new Date(year, +month - 1, +day, +hour, +minute); //, +hour, +minute);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":864,"value":"function jParseTable(table) {\n let tableData = [];\n // d3.select('table#data-table')\n table\n // .node()\n .querySelectorAll(\"tr\")\n .forEach((row, i) => {\n let rowData = [];\n row.querySelectorAll(\"td\").forEach((td, i) => {\n if (td.childElementCount == 1) rowData.push(td.children[0].value);\n else {\n rowData.push(td.textContent);\n }\n });\n tableData.push(rowData);\n });\n return tableData.map(d => ({\n course: d[0],\n desc: d[1],\n val: +d[2],\n due: parseDate(d[3]),\n done: +d[4]\n }));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":429,"value":"function convUHull(p) {\n const p_ = p.slice();\n const sorted = p_.sort((a, b) => sortByX(a, b));\n const lower = lowerHull(sorted);\n return lower;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":427,"value":"function lowerHull(p) {\n const n = p.length;\n const b = p.slice().reverse();\n const l = [];\n for (let i = 0; i < b.length; ++i) {\n while (l.length >= 2 && det3(l[l.length - 2], l[l.length - 1], b[i]) <= 0) {\n l.pop();\n }\n l.push(b[i]);\n }\n // l.shift();\n return l.reverse();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"require('d3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"import { yaml } from \"@71/yaml\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"import { cstParse, editor } from \"@mbostock/comma-separated-tree\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"d3 = require('d3', \"d3-array@^2.4\", \"d3-interpolate@^1.4\", \"d3-dsv@1\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":227,"value":"import { style, cellShortcuts } from \"@observablehq/keyboard-shortcuts\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":296,"value":"import { slider } from '@bartok32/diy-inputs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":425,"value":"import {\n convexHull2D,\n upperHull,\n // lowerHull,\n sortByX,\n det3\n} from \"@timhau/convex-hull\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 2e:"$2d:body"