31:T1621,chart = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); // Plot all data points svg.append("g") .attr("stroke-width", 1.5) .attr("font-family", "sans-serif") .attr("font-size", 10) .selectAll("g") .data(data) .join("g") .attr("transform", d => `translate(${x(d.date)},${y(d.ct)})`) .call(g => g.append("circle") .attr("stroke", "steelblue") .attr("fill", "none") .attr("r", 3)); // Add 50% percentile line and value svg.append("line") .attr("stroke", "currentColor") .attr("stroke-opacity", 0.5) .attr("stroke-dasharray", "2,2") .attr("x1", x.range()[0]) .attr("x2", x.range()[1]) .attr("y1", y(d3.quantile(data.map(function(d) {return d.ct}).sort(d3.ascending), 0.5))) .attr("y2", y(d3.quantile(data.map(function(d) {return d.ct}).sort(d3.ascending), 0.5))); svg.append("text") .text("50%") .attr("stroke", "currentColor") .attr("stroke-opacity", 0.3) .attr("dy", y(d3.quantile(data.map(function(d) {return d.ct}).sort(d3.ascending), 0.5))+4) .attr("dx", x.range()[1] + 2) .style("font-family", "monospace") .style("font-size", "14"); svg.append("text") .text(Math.round(d3.quantile(data.map(function(d) {return d.ct}).sort(d3.ascending), 0.5))) .attr("stroke", "currentColor") .attr("stroke-opacity", 0.3) .attr("dy", y(d3.quantile(data.map(function(d) {return d.ct}).sort(d3.ascending), 0.5))-6) .attr("dx", x.range()[1] - 12) .style("font-family", "monospace") .style("font-size", "8"); // Add 75% percentile line and value svg.append("line") .attr("stroke", "currentColor") .attr("stroke-opacity", 0.5) .attr("stroke-dasharray", "2,2") .attr("x1", x.range()[0]) .attr("x2", x.range()[1]) .attr("y1", y(d3.quantile(data.map(function(d) {return d.ct}).sort(d3.ascending), 0.7))) .attr("y2", y(d3.quantile(data.map(function(d) {return d.ct}).sort(d3.ascending), 0.7))); svg.append("text") .text("70%") .attr("stroke", "currentColor") .attr("stroke-opacity", 0.3) .attr("dy", y(d3.quantile(data.map(function(d) {return d.ct}).sort(d3.ascending), 0.7))+4) .attr("dx", x.range()[1] + 2) .style("font-family", "monospace") .style("font-size", "14"); svg.append("text") .text(Math.round(d3.quantile(data.map(function(d) {return d.ct}).sort(d3.ascending), 0.7))) .attr("stroke", "currentColor") .attr("stroke-opacity", 0.3) .attr("dy", y(d3.quantile(data.map(function(d) {return d.ct}).sort(d3.ascending), 0.7))-6) .attr("dx", x.range()[1] - 12) .style("font-family", "monospace") .style("font-size", "8"); // Add 85% percentile line and value svg.append("line") .attr("stroke", "currentColor") .attr("stroke-opacity", 0.5) .attr("stroke-dasharray", "2,2") .attr("x1", x.range()[0]) .attr("x2", x.range()[1]) .attr("y1", y(d3.quantile(data.map(function(d) {return d.ct}).sort(d3.ascending), 0.85))) .attr("y2", y(d3.quantile(data.map(function(d) {return d.ct}).sort(d3.ascending), 0.85))); svg.append("text") .text("85%") .attr("stroke", "currentColor") .attr("stroke-opacity", 0.3) .attr("dy", y(d3.quantile(data.map(function(d) {return d.ct}).sort(d3.ascending), 0.85))+4) .attr("dx", x.range()[1] + 2) .style("font-family", "monospace") .style("font-size", "14"); svg.append("text") .text(Math.round(d3.quantile(data.map(function(d) {return d.ct}).sort(d3.ascending), 0.85))) .attr("stroke", "currentColor") .attr("stroke-opacity", 0.3) .attr("dy", y(d3.quantile(data.map(function(d) {return d.ct}).sort(d3.ascending), 0.85))-6) .attr("dx", x.range()[1] - 12) .style("font-family", "monospace") .style("font-size", "8"); // Add 95% percentile line and value svg.append("line") .attr("stroke", "currentColor") .attr("stroke-opacity", 0.5) .attr("stroke-dasharray", "2,2") .attr("x1", x.range()[0]) .attr("x2", x.range()[1]) .attr("y1", y(d3.quantile(data.map(function(d) {return d.ct}).sort(d3.ascending), 0.95))) .attr("y2", y(d3.quantile(data.map(function(d) {return d.ct}).sort(d3.ascending), 0.95))); svg.append("text") .text("95%") .attr("stroke", "currentColor") .attr("stroke-opacity", 0.3) .attr("dy", y(d3.quantile(data.map(function(d) {return d.ct}).sort(d3.ascending), 0.95))+4) .attr("dx", x.range()[1] + 2) .style("font-family", "monospace") .style("font-size", "14"); svg.append("text") .text(Math.round(d3.quantile(data.map(function(d) {return d.ct}).sort(d3.ascending), 0.95))) .attr("stroke", "currentColor") .attr("stroke-opacity", 0.3) .attr("dy", y(d3.quantile(data.map(function(d) {return d.ct}).sort(d3.ascending), 0.95))-6) .attr("dx", x.range()[1] - 12) .style("font-family", "monospace") .style("font-size", "8"); // Add the moving average line svg.append("path") .datum(ma_data) .attr("fill", "none") .attr("stroke", "orange") .attr("stroke-width", 1) .attr("d", lineMA); //x grid lines svg.append("g") .attr("class", "grid") .attr("transform", "translate(0," + (height - margin.bottom) + ")") .attr("stroke-opacity", 0.1) .call(make_x_gridlines() .tickSize(-height+margin.top+margin.bottom) .tickFormat("") ); return svg.node(); }32:T4bb,md` ***The Triangle***

The Triangle is a pattern which indicates that the cycle time is increasing over time - see the red shape in the image above. You should use this alert from the system to collectively discuss and understand what's happening within your workflow. There are some situations where is perfectly ok to have this pattern, such as when a new team has started working together or when you have a substantial change within a team. In these two cases, their workflow can take a while to fill in and start showing some stability. However, in other cases, this shape can represent some potential issues. For example, if the rate of work entering your system (arrival rate) is bigger than the rate of work exiting (departure rate), you'll have an increasing WIP within your system over time, resulting into longer cycle time. For the cases where the Triangle pattern may be an issue, the adoption of some specific actions and/or policies are required to give more stability and predictability to the system. `33:[] 2f:{"title":"How to use a Cycle Time Scatterplot?","cells":[{"id":0,"value":"md`# How to use a Cycle Time Scatterplot?\n\nThis notebook explores some ways to use the information contained in a Cycle Time Scatterplot to support the improvement process of a specific system.\n\n***What is Cycle Time?***\nCycle time is the total elapsed time to complete a specific task.\n\n***What is a scatterplot?***\nA scatterplot is a type of graph that uses Cartesian coordinates to display values for typically two variables for a set of data.\n\nSo, let's start!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":327,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":291,"value":"md`Firstly, we are going to load a dataset which contains a set of completed tasks from a specific team. The existing attributes in this dataset are:\n\n***date*** - Date of completion\n\n***ct*** - Cycle Time`","pinned":false,"hidden":false,"mode":"ojs"},{"id":589,"value":"data = await d3.csv(\n \"https://gist.githubusercontent.com/gabovailati/257061e4840fafb13a860e8b5f857545/raw/6ac63fe383d3d24115117dcad49a944e6f1ce066/cycletime.csv\",\n function(d) {\n return {\n date: d3.timeParse(\"%d/%m/%Y\")(\n new Date(d.date).toLocaleDateString(\"en-GB\", {\n timeZone: \"Australia/Sydney\"\n })\n ),\n ct: +d.ct\n };\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":375,"value":"md`Then, we are going to build the Cycle Time Scatterplot. Each circle represents one task which was completed on a specific date and took a precise number of days to get done.\n\nWe are plotting all the necessary visual information for supporting a comprehensive analysis of the available data.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":713,"value":"md`Below the chart we are going to analyse some aspects of this scatterplot in a simple and actionable way.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":677,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":505,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":472,"value":"\n\nmd`## 1) Outliers\n\nOutliers are the data points situated away or detached from the main concentration of data. In the context of this study, the outliers are the top few data points over the 95% percentile line.\n\nThe way I like to approach these items is to select the top 3 to 5 outliers, identify what was each piece of work and have a conversation with the team to understand why took so long to get these items done. Any dependencies, blockers, waiting time, lack of capacity or capability? It can be anything. The point is to discuss with the team, try to identify one or more root causes and come up with a couple of actions aiming to improve the cycle time of similar tasks in the future.\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":753,"value":"html`
`","pinned":false,"hidden":false,"mode":"ojs"},{"id":503,"value":"md`## 2) Percentiles\n\nIt's simple to interpret the percentiles information. Let's use the 85% percentile as an example. Notice that we have the number 16 above the 85% percentile line. It means that during this period of analysis, 85% of the work completed took 16 days or less to get done. If you want to use this information to help you to forecast any piece of work, you could say that with 85% of confidence level, your team will deliver a specific task in 16 days or less.\n\nThe same approach can be used for all the other percentiles. In case you need a high confidence level, you should use the 95% percentile. This approach can help you to have a different conversation with the stakeholders, focusing on the historical performance of the team to forecast future performance given the confidence level you are comfortable to accept.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":751,"value":"html`
`","pinned":false,"hidden":false,"mode":"ojs"},{"id":686,"value":"md`## 3) Moving Average\n\nThe scatterplot above is showing the cycle time moving average for the last 14 days window - orange line. You can use any number of days that make sense for your situation, for example, the last 3 sprints or 42 days. For the purpose of this study, I'll stick with 14 days moving average.\n\nThe moving average is a good way to visually identify trends. We can see that the team was having a stable average cycle time from mid-May until July 21, where we can spot a clear decreasing trend. We could explore with the team what facts contributed for this trend and how can we foster the good behaviours associated with these facts, such as clearer communication, more collaboration cross-teams, clearer definition of ready to pull a new work to the system, etc.\n\nIn the last few days of the chart, it's possible to see that there is a trend of increasing the cycle time. Again, it's a good moment to start a conversation with the team.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":750,"value":"html`
`","pinned":false,"hidden":false,"mode":"ojs"},{"id":730,"value":"md`## 4) Visual Patterns\n\n\nWe can also identify some unconventional visual patterns in the scatterplot that may communicate a specific behaviour in your system.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":759,"value":"html`
`","pinned":false,"hidden":false,"mode":"ojs"},{"id":740,"value":"md`\n***The Gap***\n

\nThe Gap is a clear space in the chart where there is not any plot. We can understand this situation as a period where the team did not deliver any piece of work. The key point is to understand why this circumstance occurred and how to avoid it in the future.\n\nPossible reasons are blockers, dependencies or work being delivered in batches. And maybe, all together!\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":747,"value":"html`
`","pinned":false,"hidden":false,"mode":"ojs"},{"id":744,"value":"md`\n***The Cluster***\n

\nThe Cluster visual pattern is a concentration of circles in a small area of the chart. It indicates a large number of work items delivered close to each other. We can have different reasons for this situation, such as a big blocker that was removed, a great number of dependencies among these work items, etc.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":762,"value":"html`
`","pinned":false,"hidden":false,"mode":"ojs"},{"id":765,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":320,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":723,"value":"md`I'm pretty sure there are many other interesting outcomes we can capture when analysing a cycle time scatterplot\nfurthermore. I'd love to see some other points of view to keep evolving this material. Feel free to share your thoughts about this blog.\n\nCheers!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":719,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":318,"value":"functionsAndVariables = md`### Here we have all the necessary variables and functions to build the scatterplot above`","pinned":false,"hidden":false,"mode":"ojs"},{"id":633,"value":"ma_data = movingAverage(data.map(function(d) {return d}), 14)","pinned":false,"hidden":false,"mode":"ojs"},{"id":636,"value":"ma_data_date = ma_data.map(function(d) {return d.date})","pinned":false,"hidden":false,"mode":"ojs"},{"id":638,"value":"ma_data_ct = ma_data.map(function(d) {return d.ct})","pinned":false,"hidden":false,"mode":"ojs"},{"id":641,"value":"function movingAverage(values, N) {\n var i = 0;\n var n = 0;\n var i_ma = 0;\n var sumct = 0;\n var maArray = [];\n \n var minDate = d3.min(values.map(function(d) {return d.date}))\n var maxDate = d3.max(values.map(function(d) {return d.date}))\n \n var dateArray = d3.timeDays(minDate, maxDate)\n \n for (i = N-1, n = dateArray.length; i < n; ++i) {\n \n var ctArray = values.filter(d => d.date >= dateArray[i-N+1] & d.date <= dateArray[i])\n var ctMa = sum(ctArray.map(function(d) {return d.ct}))/ctArray.length\n \n maArray[i_ma] = {\n date: dateArray[i],\n ct: ctMa\n }\n ++i_ma\n\n }\n \n return maArray;\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":643,"value":"function sum(values) {\n let sum = 0;\n for (let i = 0, n = values.length; i < n; ++i) {\n const v = +values[i];\n if (v) sum += v;\n }\n return sum;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":647,"value":"lineMA = d3.line()\n .defined(d => d)\n .x((d, i) => x(ma_data_date[i]))\n .y((d, i) => y(ma_data_ct[i]))\n .curve(d3.curveMonotoneX);","pinned":false,"hidden":false,"mode":"ojs"},{"id":650,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs"},{"id":651,"value":"margin = ({top: 20, right: 30, bottom: 30, left: 40})","pinned":false,"hidden":false,"mode":"ojs"},{"id":653,"value":"x = d3.scaleTime()\n .domain(d3.extent(data, d => d.date)).nice()\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":658,"value":"y = d3.scaleLinear()\n .domain(d3.extent(data, d => d.ct)).nice()\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":663,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.append(\"text\")\n .attr(\"x\", width - margin.right)\n .attr(\"y\", -4)\n .attr(\"fill\", \"#000\")\n .attr(\"font-weight\", \"bold\")\n .attr(\"text-anchor\", \"end\")\n .text(data.date))","pinned":false,"hidden":false,"mode":"ojs"},{"id":665,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.select(\".tick:last-of-type text\").clone()\n .attr(\"x\", 4)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(data.ct))","pinned":false,"hidden":false,"mode":"ojs"},{"id":670,"value":"function make_x_gridlines() {\t\t\n return d3.axisBottom(x)\n //.ticks(5)\n};","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":815,"value":"id = 'UA-147646415-2'","pinned":false,"hidden":false,"mode":"ojs"},{"id":818,"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":"$W33","stdlib":"1","titling":"auto"}