45:["$","title",null,{"children":"How to use a Cycle Time Scatterplot? | Gabriel Vailati | Observable"}] 4d: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(); }4e: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. `4f:[] 49:{"id":"5f088a9c3c6ce37b","slug":"cycle-time-scatterplot","title":"How to use a Cycle Time Scatterplot?","thumbnail":"fd005c7189a1cd3354c779fb4fa65ccc7dcf2895c0e1d263f1daa9a554614ca7","access_level":"public","create_time":"$D2019-08-21T09:25:59.453Z","update_time":"$D2020-06-27T09:18:01.682Z","view_time":null,"first_public_time":"$D2019-08-21T10:33:28.706Z","has_unpublished_edits":null,"fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"5d164e5450b5c05c","login":"gabrielvailati","name":"Gabriel Vailati","avatar_url":"https://avatars-next.observableusercontent.com/df4088d0f83e832bcafa3ef283cabe79ba2a63882717b2c5462ddb2a318756f5","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":821,"publish_version":821,"role":null,"authored":false,"authors":[{"type":"individual","id":"7f260b30e9537c1e","login":"gabrielvailati","name":"Gabriel Vailati","avatar_url":"https://avatars-next.observableusercontent.com/df4088d0f83e832bcafa3ef283cabe79ba2a63882717b2c5462ddb2a318756f5","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"7f260b30e9537c1e","login":"gabrielvailati","name":"Gabriel Vailati","avatar_url":"https://avatars-next.observableusercontent.com/df4088d0f83e832bcafa3ef283cabe79ba2a63882717b2c5462ddb2a318756f5","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":5,"collection":{"id":"8ac7cd4ede5e0fc5","slug":"metrics","title":"Metrics","owner":{"id":"5d164e5450b5c05c","login":"gabrielvailati","name":"Gabriel Vailati"}},"type":"notebook","body":{"titling":"auto","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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":327,"value":"html`

\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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":747,"value":"html`
`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":762,"value":"html`
`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":765,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":320,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":633,"value":"ma_data = movingAverage(data.map(function(d) {return d}), 14)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":636,"value":"ma_data_date = ma_data.map(function(d) {return d.date})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":638,"value":"ma_data_ct = ma_data.map(function(d) {return d.ct})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":650,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":651,"value":"margin = ({top: 20, right: 30, bottom: 30, left: 40})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":670,"value":"function make_x_gridlines() {\t\t\n return d3.axisBottom(x)\n //.ticks(5)\n};","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":815,"value":"id = 'UA-147646415-2'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4f","stdlib":"1"}} 44:null