31:[{"id":"d90377de858319ca4200e99125d5f88b0b04e9aed66d6043103cab98c24d64ad0590f18185e07538f791623e1ca28adbfe78b87a0c1d4d42298c1622c4f53a0c","href":"https://static.observableusercontent.com/files/d90377de858319ca4200e99125d5f88b0b04e9aed66d6043103cab98c24d64ad0590f18185e07538f791623e1ca28adbfe78b87a0c1d4d42298c1622c4f53a0c","name":"throughput@9.csv","type":"text/csv","lastModified":1593413917629.156,"size":1497},{"id":"8f378ac4c3ac4ede9363f8884a69c3268bd54258ca3481dd535aa65e2de6ea405d506f399ceac438539e3f1ae6e7ac8313db0780c9d79c1e85bd22c9d8ea945e","href":"https://static.observableusercontent.com/files/8f378ac4c3ac4ede9363f8884a69c3268bd54258ca3481dd535aa65e2de6ea405d506f399ceac438539e3f1ae6e7ac8313db0780c9d79c1e85bd22c9d8ea945e","name":"throughput@5.csv","type":"text/csv","lastModified":1593058531531.235,"size":1153}] 2f:{"title":"Building a Throughput Run Chart","cells":[{"id":0,"value":"md`# Building a Throughput Run Chart`","pinned":false,"hidden":false,"mode":"ojs"},{"id":257,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":254,"value":"md`### Step 1\nLoad the csv file with the delivery data.\n\nThe layout of the file is:${html`
`}\nissueid,completiondate${html`
`}\n133,31-Mar-2020${html`
`}\n143,31-Mar-2020${html`
`}\n137,1-Apr-2020`","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"dataset_step1 = d3.csvParse(await FileAttachment(\"throughput@9.csv\").text(), d3.autoType)","pinned":true,"hidden":false,"mode":"ojs"},{"id":260,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":266,"value":"md`### Step 2\nCalculate and add the week number for each value in the dataset.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":97,"value":"dataset_step2 = dataset_step1.map(function(d) {\n return {\n issueId: d.issueid,\n completionDate: d.completiondate,\n week: getWoy(d.completiondate)\n };\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":380,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":394,"value":"md`### Step 3\nAggregate the Throughput occurences into weeks, using the week of the year.${html`
`}\nIt's also important guarantee that the dataset is ordered ascending by week number.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":406,"value":"aggregationMap = d3.rollup(dataset_step2, v => d3.count(v, d => d.week), d => d.week)","pinned":true,"hidden":false,"mode":"ojs"},{"id":411,"value":"dataset_step3 = Array.from(aggregationMap).sort((a, b) => d3.ascending(a[0], b[0]))","pinned":true,"hidden":false,"mode":"ojs"},{"id":389,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":383,"value":"md`### Step 4\nCalculate the Throughput Moving Average.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":517,"value":"viewof N = {\n const form = html``;\n form.i.oninput = () => form.value = form.i.valueAsNumber;\n form.i.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":378,"value":"dataset_step4 = movingAverage(dataset_step3.map(d => d[1]), N)","pinned":true,"hidden":false,"mode":"ojs"},{"id":459,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":463,"value":"md`### Step 5\nBuild the final dataset with all fields consolidated.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":454,"value":"length = dataset_step3.length","pinned":false,"hidden":false,"mode":"ojs"},{"id":430,"value":"dataset_step5 = Array.from({length}, (_, i) => ({\n week: dataset_step3.map(d => d[0])[i],\n throughput: dataset_step3.map(d => d[1])[i],\n movingaverage: +d3.format(\".1f\")(dataset_step4[i])\n}))","pinned":true,"hidden":false,"mode":"ojs"},{"id":466,"value":"final_dataset = dataset_step5","pinned":true,"hidden":false,"mode":"ojs"},{"id":263,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":269,"value":"md`### Step 6\nVisualise how the dataset looks like.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":246,"value":"printTable(final_dataset.slice(-10, final_dataset.length))","pinned":false,"hidden":false,"mode":"ojs"},{"id":272,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":275,"value":"md`### Finally\nPlot the historical throughput in the chart below.${html`
`}\n(${N} weeks moving average)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":217,"value":"{\n const line = vl.markLine().data(final_dataset).encode(\n vl.x().fieldQ(\"week\").axis({title: 'Year - Week Number'}),\n vl.y().fieldQ(vl.repeat('layer')).axis({title: 'Throughput: # of items done'}),\n vl.color().datum(vl.repeat('layer'))\n );\n\n// const point = vl.markCircle().data(final_dataset).encode(\n// vl.x().fieldQ(\"week\"),\n// vl.y().fieldQ(\"throughput\"),\n// vl.tooltip().fieldQ(\"throughput\")\n// );\n \n const text = vl.markText().data(final_dataset).encode(\n vl.x().fieldQ(\"week\"),\n vl.y().fieldQ(vl.repeat('layer')),\n vl.text().fieldN(vl.repeat('layer')),\n vl.color(\"black\")\n );\n \n// const ma = vl.markLine().data(final_dataset).encode(\n// vl.x().fieldQ(\"week\"),\n// vl.y().fieldQ(\"movingaverage\"),\n// vl.color(\"red\")\n// );\n \n return vl.layer(\n line\n// ,point\n ,text\n// ,ma\n )\n .title(\"Throughput Run Chart\")\n .width(600)\n .repeat({\n layer: [\"throughput\", \"movingaverage\"]\n })\n .render();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":278,"value":"md`## Import Lybraries`","pinned":false,"hidden":false,"mode":"ojs"},{"id":664,"value":"// Testing getWoy function\ngetWoy(\"30-Mar-2020\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":662,"value":"// Returns the week number of the year (Woy)\nfunction getWoy(date) {\n var doy = getDoy(date);\n var dow = getDow(date);\n var woy = (doy - dow + 10) / 7;\n return woy;\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":655,"value":"// Testing getDow function\ngetDow(\"30-Mar-2020\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":648,"value":"// Returns the day of the week (1-7)\nfunction getDow(date) {\n var d = new Date(date);\n return d.getDay() + 1; // Adding 1 as the first day of the week returns 0\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":645,"value":"// Testing getDoy function\ngetDoy(\"30-Mar-2020\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":642,"value":"// Returns the day of the year (1-365/366)\nfunction getDoy(date) {\n var d = new Date(date);\n var start = new Date(d.getFullYear(), 0, 0);\n var diff = d - start;\n var oneDay = 1000 * 60 * 60 * 24;\n var day = Math.floor(diff / oneDay);\n return day; \n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":375,"value":"// Returns the Moving Average of a set of values using the last N ocurrances\nfunction movingAverage(values, N) {\n let i = 0;\n let sum = 0;\n const means = new Float64Array(values.length).fill(NaN);\n for (let n = Math.min(N - 1, values.length); i < n; ++i) {\n sum += values[i];\n }\n for (let n = values.length; i < n; ++i) {\n sum += values[i];\n means[i] = sum / N;\n sum -= values[i - N + 1];\n }\n return means;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"d3 = require(\"d3@5\", \"d3-array@2\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"import { vl } from \"@vega/vega-lite-api\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":247,"value":"import {printTable} from '@uwdata/data-utilities'","pinned":false,"hidden":false,"mode":"ojs"},{"id":479,"value":"vegalite = require(\"@observablehq/vega-lite\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":600,"value":"id = 'UA-147646415-1'","pinned":false,"hidden":false,"mode":"ojs"},{"id":598,"value":"pageAnalytics = {\n await require(`https://www.googletagmanager.com/gtag/js?id=${id}`).catch(\n () => {}\n );\n const dataLayer = (window.dataLayer = window.dataLayer || []);\n const location = html``;\n gtag('js', new Date());\n gtag('config', id, {\n page_path: location.pathname,\n page_location: location.href\n });\n return md`^{[Google Analytics](https://www.google.com/analytics/terms/).}`;\n function gtag() {\n dataLayer.push(arguments);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}