2d:null 2e:["$","title",null,{"children":"Magic Balls Factory | Martien van Steenbergen | Observable"}] 33:Tcd4,viewof set = { let e = html`

Click here and keep focus. ←, →: loop through games; ‘n’: new game; ‘i’: start item; ‘o’: finish item; ‘⌫’: delete game.

`; // let set = [new Game(toDo, 1)]; let set = sampleGameBag; // set.unshift(new Game(toDo)); e.value = set; e.addEventListener("keyup", evt => { keystroke(set[mutable gameIndex], evt.key); e.dispatchEvent(new CustomEvent("input")); }); return e; function keystroke(game, key) { // console.log(key); switch (key) { case "Escape": case "n": // Append new game and make it current. mutable startTime = tock(); // mutable maxPlayTime = 20; set.push(new Game(toDo, set.length + 1)); mutable gameIndex = set.length - 1; break; case "Backspace": if (set.length > 0) set.splice(mutable gameIndex, 1); if (mutable gameIndex == set.length && set.length > 0) mutable gameIndex = set.length - 1; break; case "i": if (game && game.doing.hello.length == 0) { // first item ever for this game game.startTime = tock(); } advance(game, game.todo, game.doing); break; case "o": // Another ka-ching! Hence another cycle time. // n can be incremented by advance(), so n here is the current number of ka-chings let n = game.kaching.hello.length; if (advance(game, game.doing, game.kaching)) { game.leadtimes.push({ hello: elapsed(game), // strict FIFO, even when balls restart leadtime: game.kaching.hello[n] - game.doing.hello[n] }); let l = game.leadtimes.map(k => k.leadtime); // console.log(l); game.leadtime = +d3.mean(l).toFixed(0); if (l.length > 1) game.deviation = +d3.deviation(l).toFixed(0); game.throughput = game && game.kaching.hello.length / game.playTime; } if ( game.leadtimes.length > 0 && game.leadtimes.slice(-1)[0].leadtime > mutable maxLeadTime ) mutable maxLeadTime = game.leadtimes.slice(-1)[0].leadtime; // bag.maxLeadtime = game.leadtimes.slice(-1)[0].leadtime; break; case "ArrowRight": mutable gameIndex = switchGame(mutable gameIndex, set.length, +1); break; case "ArrowLeft": mutable gameIndex = switchGame(mutable gameIndex, set.length, -1); break; default: break; } function advance(game, from, to) { // Only advance an item when there is something to advance. let validMove = game && from.wip > 0 && game.transactions < 2 * toDo; if (validMove) { from.wip--; to.wip++; game.transactions++; game.playTime = tock() - game.startTime; game.finishTime = tock(); let z = Math.ceil((tock() - mutable startTime) / 1000); if (z > mutable maxPlayTime) mutable maxPlayTime = z; to.hello.push(elapsed(game)); } return validMove; } function switchGame(i, m, d) { return (i + m + d) % m; } } }34:T490,{ const fractionDenominator = Math.ceil(percentile / (1 - percentile)); const p = +(percentile * 100).toFixed(0); const leadtime = Math.ceil(game.quantile) + " " + habitat.units; const numerator = fractionDenominator == Infinity ? "all" : fractionDenominator; const denominator = fractionDenominator == Infinity ? "all" : fractionDenominator + 1; const itemCount = game ? (percentile * game.kaching.hello.length).toFixed(0) : 0; const statement = probabilityStatement(percentile).statement; return md` Given the performance of ${toDo} items, and provided that all other factors stay the same, you can say that: * in ${leadtime} you will probably finish ${itemCount} out of ${toDo} ${ habitat.items }; * the chance that you will finish ${toDo} ${ habitat.items } in about ${leadtime}
is ${statement} (${p}%); or * on average, ${numerator} out of every ${denominator} ${ habitat.items } you pull finish in ${leadtime} or less. Your average throughput is ${(game.throughput * 1000).toFixed(precision)} ${ habitat.items } per ${habitat.unit}. `; } // toFixed(0) hides some rounding errors, e.g. 50.000000001%.35:T8cf,md`# To operate the game Please first read and understand the setup and game rules below. Then come back here. We’ll wait. ## To play around with the game as a whole * Use the arrow keys ← → to loop through the games. **Make sure you click in the text field below the dashboard first and keep the keyboard focus there to operate the game!** * Consider switching to full screen by selecting **⤢ Full Screen** from the **…** menu at the top of the page. Press **Esc** to return to normal. * Change the habitat to resemble your situation; are you managing projects, a portfolio, or stories? * Play around with the percentile slider and discuss its meaning. * Scroll down a bit to view one chart at maximum size. Select the desired chart with the radio buttons below it. * Reload the page to start with a clean slate. **NB This will delete any existing games and reload the sample bunch of games, so you will lose any existing game results.** ## To start a new ${habitat.name} The game comes preloaded with a bunch of sample games, often used to explain the game and get familiar with the charts. ### Before you start your games * Delete the existing games by pressing ⌫ repeatedly until all charts are blank. ### To start a new game * Press ‘n’ to start a new game. ### To process the ${habitat.items} that the team starts and finishes: * Press ‘i’ and ‘o’ each time the client shouts “IN!” and “OUT” respectively. Watch how this updates all charts. ### To reflect on a game Each game processes ${toDo} ${ habitat.items }. A game ends when the last ball finishes—pressing ‘i’ and ‘o’ have no effect anymore. That is the time to reflect on the game just played—using the evidence as shown by the charts—and come up with suggestions to improve the way of work in the next round. It helps to express this as a ‘bet’: “We bet that if we will do _this_, its effect will be _that_ (on the evidence as show by the charts). Prepare accordingly for the next game, and play it. Repeat until the time is up or bored. Remember, the goal is to run a quick series of games (experiments, or bets), each round improving the way of work, in order to finish ${toDo} ${ habitat.items } as quickly as possible. `36:T608,md` # To play the game ## Setup * A team of people. * ${toDo} juggling balls. * Ample space to accomodate twice the number of people. ## Goal * Create 20 Magic Balls as fast as you can. * Creatively improve your way of working (*The Way*): >Build → Measure → Learn ↻. ## Game Rules * Play with the whole team. * One team member plays role of client. * A ball turns into a Magic Ball… * …as soon as everyone has touched the ball; and * …the client has touched the ball as first and last person. * A ball **LOSES** its magic and needs to be restarted when: * *or* passed to someone’s left or right neighbour; * *or* touched by more than one person; * *or* touches something else than a person. * To keep track of basic metrics, client shouts: * “**IN!**” when a ball enters the process; and * “**OUT!**” when a ball has turned into a Magic Ball; and * nothing when a ball is restarted. * Repeat until time is up or nothing new learned: * create 20 Magic Balls as quickly as possible; and * improve your process based on the performance metrics collected. * When in doubt… * …facilitator decides. * Reflect—Thinking versus Doing * Analysis Paralysis. * Debates, arguments, discussion, advocacy, arguments. * Leadership. * Collaboration * Decision-making. * Integrating new insights. * Continuous tuning and tweaking. > **Simple, clear purpose and principles give rise to complex and intelligent behavior. Complex rules and regulations give rise to simple and stupid behavior.** >> —Dee Hock  `37:Tf32,// viewof bag = { // let e = html`

// Click here and keep focus. ‘n’: new game; ‘i’: start item; ‘o’: finish item; ←, →: loop through games; ‘⌫’: delete game. //

`; // let bag = new Bag(sampleGameBag, "ACME, Inc.", 20); // e.value = bag; // e.addEventListener("keyup", evt => { // const game = bag.game[mutable gameIndex]; // Remember, it’s a games bag, so this is an array of games. // keystroke(game, evt.key); // e.dispatchEvent(new CustomEvent("input")); // }); // return e; // function keystroke(game, key) { // console.log(key); // console.log(game); // switch(key) { // case "Escape": // case "n": // Append new game and make it current. // console.log(bag.game); // bag.game.push(new Game(toDo, game.length + 1)); // mutable gameIndex = game.length - 1; // game.startTime = tock(); // console.log(game); // break; // case "Backspace": // Delete the current game and make the next one current. Wrap around if needed. // if (game.length > 0) game.splice(mutable gameIndex, 1); // if (mutable gameIndex == game.length && game.length > 0) mutable gameIndex = game.length - 1; // break; // case "i": // if (game && game.doing.hello.length == 0) { // first item ever for this game // game.startTime = tock(); // } // advance(game, game.todo, game.doing) // break; // case "o": // Another ka-ching! Hence another cycle time. // // n can be incremented by advance(), so n here is the current number of ka-chings // let n = game.kaching.hello.length; // if (advance(game, game.doing, game.kaching)) { // game.leadtimes.push( // { // hello: elapsed(game), // // strict FIFO, even when balls restart // leadtime: game.kaching.hello[n] - game.doing.hello[n] // } // ); // let l = game.leadtimes.map(k => k.leadtime); //. List of all leadtimes in this game. // game.leadtime = +d3.mean(l).toFixed(0); // if (l.length > 1) game.deviation = +d3.deviation(l).toFixed(0); // d3.deviation only meaningful with >1 // game.throughput = game ? game.kaching.hello.length / (game.playTime) : 0; // }; // if (game.leadtimes.length > 0 && game.leadtimes.slice(-1)[0].leadtime > bag.maxLeadTime) // bag.maxLeadTime = game.leadtimes.slice(-1)[0].leadtime; // break; // case "ArrowRight": // mutable gameIndex = switchGame(mutable gameIndex, bag.game.length - 1, +1); // // game = bag.game[mutable gameIndex]; // console.log(game); // break; // case "ArrowLeft": // mutable gameIndex = switchGame(mutable gameIndex, bag.game.length - 1, -1); // break; // default: // break; // } // function advance(game, from, to) { // // Only advance an item when there is something to advance. // let validMove = game && from.wip > 0 && game.transactions < 2 * toDo; // if (validMove) { // from.wip--; // to.wip++; // game.transactions++; // game.playTime = tock() - game.startTime; // game.finishTime = tock(); // let z = Math.ceil((tock() - mutable startTime) / 1000); // if (z > mutable maxPlayTime) mutable maxPlayTime = z; // to.hello.push(elapsed(game)); // } // return validMove; // } // function switchGame(i, m, d) { // let z = i + d; // if (z > m) z = 0; // if (z < 0) z = m; // return z; // } // } // }38:T446,panel1 = { const s = spel + 1; return [ [ { title: `Cumulative Flow ${s}`, explanation: "quantity of work in a given state, showing arrivals, time in queue, quantity in queue, and departure", // renderer: cumulativeFlowDiagram, painter: cfd, color: palette[0] }, { title: `Metrics ${s}`, explanation: "basic characteristics of the process", // renderer: metrics, painter: metriek, color: palette[1] } ], [ { title: `Run ${s}`, explanation: "a scatter plot of leadtimes plotted over time to find trends, patterns, and outliers in the process", // renderer: runChart, painter: run, color: palette[2] }, { title: `Leadtime Distribution ${s}`, explanation: "time between the placement of an order or request and its delivery (someone’s need is met)", // renderer: leadtimeDistributionChart, painter: leadtime, color: palette[3] } ] ]; }39:T5d5,function meters(game) { return [ [ { key: "To Do:", style: "", value: game ? game.todo.wip : 0, unit: habitat.items }, { key: "WIP:", style: "", value: game ? game.doing.wip : 0, unit: habitat.items }, { key: "Finished:", style: "", value: game ? game.kaching.wip : 0, unit: habitat.items }, { key: "Deviation:", style: "", value: game ? game.deviation && (game.deviation / 1000).toFixed(precision) : 0, unit: habitat.units } ], [ { key: "Customer Leadtime:", style: "", value: game ? (game.playTime / 1000).toFixed(0) : 0, unit: habitat.units }, { key: "Throughput:", style: "average", value: game ? (1000 * game.throughput).toFixed(precision + 2) : 0, unit: `${habitat.items} per ${habitat.unit}` }, { key: "Leadtime:", style: "average", value: game && game.leadtime ? (game.leadtime / 1000).toFixed(precision) : 0, unit: habitat.units }, { key: "WIP:", style: "average", // Little’s Law: L = λW: WIP = throughput * leadtime value: game && game.throughput ? (game.throughput * game.leadtime).toFixed(precision) : 0, unit: habitat.items } ] ]; }3a:T6b0,function leadtime(patch, bag, game, panel) { const graph = chartInit(patch, bag, game, panel); const bears = game ? d3.histogram() .domain(bag.leadTimeDomain.domain()) .thresholds(t) (game.leadtimes.map(k => k.leadtime / 1000)) : [] ; const scale = pad.height / bears.length; const z = graph .append("g") .attr("transform", `translate(0,0) scale(${scale})`) ; if (bears.length > 0) { const bar = z .selectAll("whatever") .data(bears) .enter() .append("g") .attr("transform", (d,i) =>`translate(0, ${1 * (bears.length - i - 1)})`) ; // The bar itself (if there are any) if (d3.max(bears.map(k => k.length)) > 0) { const barLengthRatio = 3 / d3.max(bears.map(k => k.length)); // Bar length is max 7u. bar.append("rect") .attr("transform", "translate(0, 0)") .attr("class", "bar") .attr("width", d => d.length * barLengthRatio) .attr("height", 1) // try proportional height: d => (d.x1 - d.x0) / 2) ; // The bin number. // bar // .append("text") // .attr("class", "bin-domain") // .attr("dy", ".8") // .text(d => d.x0 + "–" + d.x1) // ; // The number of items in this bin. // Must use text-anchor = end or start depending on d.length bar .append("text") .attr("class", "bar-length") .attr("x", d => d.length > 2 ? d.length * barLengthRatio - .05 : d.length / 2) .attr("dy", ".8") .text(d => d.length > 0 ? d.length : "") ; } } // patch.append("g").call(yAxis); patch.append("g").call(bag.leadTimeAxis); // patch.append("g").call(bag.itemCountAxis); }3b:Td41,function Bag(game, label, toDo) { this.label = label; this.date = tock(); this.toDo = toDo; this.game = game; // array of games this.maxPlayTime = game.length == 0 ? 20000 : Math.ceil(d3.max(set.map(k => k.playTime)) / 10000) * 10000; // no one understands this. set.leadtimes is an array of objects, each object containing a leadtime. // We need the maximum of the whole set of leadtimes of each game: d3.max(k => k.leadtime). // So .map(z => d3.max(z.map(k => k.leadtime))) gives us an array of maxima across all games. // Taking the d3.max() from that array, gives us the maximum of the maximum of all games’s leadtimes. this.maxLeadTime = Math.ceil( d3.max( set.map(x => x.leadtimes).map(z => d3.max(z.map(k => k.leadtime))) ) / 10000 ) * 10000; // There are three domains: 1) play time; 2) lead time; 3) item count. this.playTimeDomain = d3 .scaleLinear() .domain([0, this.maxPlayTime / 1000]) .nice() .range([0, pad.width]); this.leadTimeDomain = d3 .scaleLinear() .domain([0, this.maxLeadTime / 1000]) .nice() .range([pad.height, 0]); this.itemCountDomain = d3 .scaleLinear() .domain([0, this.toDo]) .range([pad.height, 0]); // There are three axes corresponding with the three domains above: // 1) play time, x-axis shared by Run and Cumulative Flow; // 2) lead time, y-axis, shared by Run and Leadtime // 3) item count, y-axis, used by Cumulative Flow this.playTimeAxis = g => g .attr( "transform", `translate(${pad.origin.x}, ${pad.origin.y + pad.height})` ) .call( d3 .axisBottom(this.playTimeDomain) .tickPadding(µ(1)) .tickSize(5) ) .call(g => g.select(".domain").remove()) .call(g => g .selectAll(".tick line") .clone() .attr("y2", -pad.height) .attr("stroke-opacity", 0.1) ) .call(g => g .append("text") .attr("x", this.playTimeDomain.range()[1] - µ(1)) .attr("y", µ(-2)) .attr("class", "axis-label") .attr("text-anchor", "end") .text(habitat.units) .call(halo) ); this.leadTimeAxis = g => g .attr("transform", `translate(${pad.origin.x}, ${pad.origin.y})`) .attr("class", "grid") .call( d3 .axisLeft(this.leadTimeDomain) .tickPadding(µ(1)) .tickSize(0) ) .call(g => g.select(".domain").remove()) .call(g => g .selectAll(".tick line") .clone() .attr("x2", pad.width) .attr("stroke-opacity", 0.1) ); this.itemCountAxis = g => g .attr("transform", `translate(${pad.origin.x}, ${pad.origin.y})`) .call( d3 .axisLeft(this.itemCountDomain) .tickPadding(µ(1)) .tickSize(0) .ticks(toDo / 4) ) .call(g => g.select(".domain").remove()) .call(g => g .selectAll(".tick line") .clone() .attr("x2", pad.width) .attr("stroke-opacity", 0.1) ); this.area = d3 .area() .curve(d3.curveStepAfter) .x(d => this.playTimeDomain(d / 1000).toFixed(0)) .y1((d, i) => this.itemCountDomain(i + 1).toFixed(0)) .y0(this.itemCountDomain(0)); }3c:T930,styles = html``3d:T40be,sampleGameBag = [ { gameNumber: 1, transactions: 40, startTime: 1535456043764, finishTime: 1535456113253, playTime: 69489, leadtime: 13700, throughput: 0.00028781533767934496, deviation: 638, states: [ { name: "todo", hello: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], wip: 0 }, { name: "doing", hello: [ 2246, 4327, 6882, 9198, 11670, 16951, 19423, 22382, 25311, 28135, 30999, 34295, 37687, 40519, 43823, 46735, 49799, 52951, 55919, 59023 ], wip: 0 }, { name: "kaching", hello: [ 15151, 17998, 20943, 23959, 26807, 29622, 32454, 36087, 39221, 42102, 45255, 48351, 51543, 54559, 57607, 60271, 62879, 66519, 69214, 71735 ], wip: 20 } ], leadtimes: [ { hello: 15151, leadtime: 12905 }, { hello: 17999, leadtime: 13671 }, { hello: 20943, leadtime: 14061 }, { hello: 23959, leadtime: 14761 }, { hello: 26807, leadtime: 15137 }, { hello: 29622, leadtime: 12671 }, { hello: 32454, leadtime: 13031 }, { hello: 36087, leadtime: 13705 }, { hello: 39221, leadtime: 13910 }, { hello: 42102, leadtime: 13967 }, { hello: 45255, leadtime: 14256 }, { hello: 48351, leadtime: 14056 }, { hello: 51543, leadtime: 13856 }, { hello: 54559, leadtime: 14040 }, { hello: 57607, leadtime: 13784 }, { hello: 60271, leadtime: 13536 }, { hello: 62879, leadtime: 13080 }, { hello: 66519, leadtime: 13568 }, { hello: 69214, leadtime: 13295 }, { hello: 71735, leadtime: 12712 } ], todo: { name: "todo", hello: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], wip: 0 }, doing: { name: "doing", hello: [ 2246, 4327, 6882, 9198, 11670, 16951, 19423, 22382, 25311, 28135, 30999, 34295, 37687, 40519, 43823, 46735, 49799, 52951, 55919, 59023 ], wip: 0 }, kaching: { name: "kaching", hello: [ 15151, 17998, 20943, 23959, 26807, 29622, 32454, 36087, 39221, 42102, 45255, 48351, 51543, 54559, 57607, 60271, 62879, 66519, 69214, 71735 ], wip: 20 } }, { gameNumber: 2, transactions: 40, startTime: 1535456512126, finishTime: 1535456595636, playTime: 83510, leadtime: 14566, throughput: 0.00023949227637408692, deviation: 3703, states: [ { name: "todo", hello: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], wip: 0 }, { name: "doing", hello: [ 1377, 4209, 6673, 10049, 24209, 30611, 34219, 37011, 40066, 43979, 47515, 50163, 52811, 55539, 58507, 61227, 63787, 66539, 70299, 72203 ], wip: 0 }, { name: "kaching", hello: [ 15367, 22905, 29963, 34907, 41027, 45052, 48659, 51291, 53706, 56411, 59171, 62019, 64491, 67443, 71107, 73675, 77687, 80119, 82431, 84887 ], wip: 20 } ], leadtimes: [ { hello: 15367, leadtime: 13990 }, { hello: 22905, leadtime: 18696 }, { hello: 29963, leadtime: 23290 }, { hello: 34907, leadtime: 24858 }, { hello: 41027, leadtime: 16818 }, { hello: 45052, leadtime: 14441 }, { hello: 48659, leadtime: 14440 }, { hello: 51291, leadtime: 14280 }, { hello: 53706, leadtime: 13640 }, { hello: 56411, leadtime: 12432 }, { hello: 59171, leadtime: 11656 }, { hello: 62019, leadtime: 11856 }, { hello: 64491, leadtime: 11680 }, { hello: 67443, leadtime: 11904 }, { hello: 71107, leadtime: 12600 }, { hello: 73675, leadtime: 12448 }, { hello: 77687, leadtime: 13900 }, { hello: 80119, leadtime: 13580 }, { hello: 82431, leadtime: 12132 }, { hello: 84887, leadtime: 12684 } ], todo: { name: "todo", hello: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], wip: 0 }, doing: { name: "doing", hello: [ 1377, 4209, 6673, 10049, 24209, 30611, 34219, 37011, 40066, 43979, 47515, 50163, 52811, 55539, 58507, 61227, 63787, 66539, 70299, 72203 ], wip: 0 }, kaching: { name: "kaching", hello: [ 15367, 22905, 29963, 34907, 41027, 45052, 48659, 51291, 53706, 56411, 59171, 62019, 64491, 67443, 71107, 73675, 77687, 80119, 82431, 84887 ], wip: 20 } }, { gameNumber: 3, transactions: 40, startTime: 1535456706552, finishTime: 1535456770122, playTime: 63570, leadtime: 10217, throughput: 0.0003146138115463269, deviation: 2303, states: [ { name: "todo", hello: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], wip: 0 }, { name: "doing", hello: [ 832, 2504, 4944, 7016, 10120, 12784, 15056, 17577, 22737, 28426, 31618, 34546, 37122, 39634, 42130, 45538, 48113, 50553, 53082, 55602 ], wip: 0 }, { name: "kaching", hello: [ 8945, 11529, 13737, 16096, 19297, 27378, 29953, 33274, 35794, 38289, 40794, 43698, 46722, 49330, 51738, 54386, 56954, 59794, 62170, 64402 ], wip: 20 } ], leadtimes: [ { hello: 8945, leadtime: 8113 }, { hello: 11529, leadtime: 9025 }, { hello: 13737, leadtime: 8793 }, { hello: 16096, leadtime: 9080 }, { hello: 19297, leadtime: 9177 }, { hello: 27378, leadtime: 14594 }, { hello: 29953, leadtime: 14897 }, { hello: 33274, leadtime: 15697 }, { hello: 35794, leadtime: 13057 }, { hello: 38289, leadtime: 9863 }, { hello: 40794, leadtime: 9176 }, { hello: 43698, leadtime: 9152 }, { hello: 46722, leadtime: 9600 }, { hello: 49330, leadtime: 9696 }, { hello: 51738, leadtime: 9608 }, { hello: 54386, leadtime: 8848 }, { hello: 56954, leadtime: 8841 }, { hello: 59794, leadtime: 9241 }, { hello: 62170, leadtime: 9088 }, { hello: 64402, leadtime: 8800 } ], todo: { name: "todo", hello: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], wip: 0 }, doing: { name: "doing", hello: [ 832, 2504, 4944, 7016, 10120, 12784, 15056, 17577, 22737, 28426, 31618, 34546, 37122, 39634, 42130, 45538, 48113, 50553, 53082, 55602 ], wip: 0 }, kaching: { name: "kaching", hello: [ 8945, 11529, 13737, 16096, 19297, 27378, 29953, 33274, 35794, 38289, 40794, 43698, 46722, 49330, 51738, 54386, 56954, 59794, 62170, 64402 ], wip: 20 } }, { gameNumber: 4, transactions: 40, startTime: 1535457089757, finishTime: 1535457131986, playTime: 42229, leadtime: 15659, throughput: 0.00047360818394941867, deviation: 3054, states: [ { name: "todo", hello: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], wip: 0 }, { name: "doing", hello: [ 779, 1196, 2148, 2387, 5060, 5267, 7156, 7347, 9348, 9523, 13136, 13339, 16316, 16520, 19692, 19892, 22972, 23524, 25524, 25755 ], wip: 0 }, { name: "kaching", hello: [ 11796, 12628, 14556, 15115, 17564, 18356, 20628, 21163, 24212, 24828, 34305, 34564, 34800, 35056, 37193, 37977, 39729, 40521, 42065, 43008 ], wip: 20 } ], leadtimes: [ { hello: 11796, leadtime: 11017 }, { hello: 12628, leadtime: 11432 }, { hello: 14556, leadtime: 12408 }, { hello: 15115, leadtime: 12728 }, { hello: 17564, leadtime: 12504 }, { hello: 18356, leadtime: 13089 }, { hello: 20628, leadtime: 13472 }, { hello: 21163, leadtime: 13816 }, { hello: 24212, leadtime: 14864 }, { hello: 24828, leadtime: 15305 }, { hello: 34305, leadtime: 21169 }, { hello: 34564, leadtime: 21225 }, { hello: 34800, leadtime: 18484 }, { hello: 35056, leadtime: 18536 }, { hello: 37193, leadtime: 17501 }, { hello: 37977, leadtime: 18085 }, { hello: 39729, leadtime: 16757 }, { hello: 40521, leadtime: 16997 }, { hello: 42065, leadtime: 16541 }, { hello: 43008, leadtime: 17253 } ], todo: { name: "todo", hello: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], wip: 0 }, doing: { name: "doing", hello: [ 779, 1196, 2148, 2387, 5060, 5267, 7156, 7347, 9348, 9523, 13136, 13339, 16316, 16520, 19692, 19892, 22972, 23524, 25524, 25755 ], wip: 0 }, kaching: { name: "kaching", hello: [ 11796, 12628, 14556, 15115, 17564, 18356, 20628, 21163, 24212, 24828, 34305, 34564, 34800, 35056, 37193, 37977, 39729, 40521, 42065, 43008 ], wip: 20 } }, { gameNumber: 5, transactions: 36, startTime: 1535457253759, finishTime: 1535457284847, playTime: 31088, leadtime: 14135, throughput: 0.0005790015440041174, deviation: 1972, states: [ { name: "todo", hello: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], wip: 2 }, { name: "doing", hello: [ 753, 1062, 2301, 2626, 4457, 4680, 6841, 7074, 9145, 9384, 11545, 11784, 15074, 15288, 17385, 17624, 20023, 20200 ], wip: 0 }, { name: "kaching", hello: [ 14074, 15936, 16777, 18889, 19473, 21761, 22239, 23705, 23928, 25577, 25760, 27017, 27180, 28466, 28624, 30114, 30318, 31841 ], wip: 18 } ], leadtimes: [ { hello: 14074, leadtime: 13321 }, { hello: 15936, leadtime: 14874 }, { hello: 16777, leadtime: 14476 }, { hello: 18889, leadtime: 16263 }, { hello: 19473, leadtime: 15016 }, { hello: 21761, leadtime: 17081 }, { hello: 22239, leadtime: 15398 }, { hello: 23705, leadtime: 16631 }, { hello: 23928, leadtime: 14783 }, { hello: 25577, leadtime: 16193 }, { hello: 25760, leadtime: 14215 }, { hello: 27017, leadtime: 15233 }, { hello: 27180, leadtime: 12106 }, { hello: 28466, leadtime: 13178 }, { hello: 28624, leadtime: 11239 }, { hello: 30114, leadtime: 12490 }, { hello: 30319, leadtime: 10295 }, { hello: 31841, leadtime: 11641 } ], todo: { name: "todo", hello: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], wip: 2 }, doing: { name: "doing", hello: [ 753, 1062, 2301, 2626, 4457, 4680, 6841, 7074, 9145, 9384, 11545, 11784, 15074, 15288, 17385, 17624, 20023, 20200 ], wip: 0 }, kaching: { name: "kaching", hello: [ 14074, 15936, 16777, 18889, 19473, 21761, 22239, 23705, 23928, 25577, 25760, 27017, 27180, 28466, 28624, 30114, 30318, 31841 ], wip: 18 } } ]3e:[] 31:{"id":"b1031d60bd780d36","slug":"magic-balls-factory","title":"Magic Balls Factory","thumbnail":"18e313b38e0b8849eb8de6044762c61261dedfa2614ae08914d165189b2f2bb6","access_level":"public","create_time":"$D2018-08-06T07:45:19.059Z","update_time":"$D2021-06-07T09:33:01.406Z","view_time":null,"first_public_time":"$D2018-09-07T10:36:58.342Z","has_unpublished_edits":null,"fork":false,"stars":6,"starred":false,"owner":{"type":"team","id":"6e89ba4444f0cc85","login":"martien","name":"Martien van Steenbergen","avatar_url":"https://avatars-next.observableusercontent.com/40dc8e4f86d0cf89184b173b4d1d88336e5728c175479f33261ced3496adb3c2","tier":"starter_2024"},"version":8109,"publish_version":8109,"role":null,"authored":false,"authors":[{"type":"individual","id":"3c5ecb707ecd20a7","login":"martien","name":"Martien van Steenbergen","avatar_url":"https://avatars-next.observableusercontent.com/40dc8e4f86d0cf89184b173b4d1d88336e5728c175479f33261ced3496adb3c2","tier":null}],"members":[{"type":"individual","id":"3c5ecb707ecd20a7","login":"martien","name":"Martien van Steenbergen","avatar_url":"https://avatars-next.observableusercontent.com/40dc8e4f86d0cf89184b173b4d1d88336e5728c175479f33261ced3496adb3c2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":{"id":"7685cfe65bf858e1","slug":"showroom","title":"Showroom","owner":{"id":"6e89ba4444f0cc85","login":"martien","name":"Martien van Steenbergen"}},"type":"notebook","body":{"title":"Magic Balls Factory","cells":[{"id":0,"value":"md`# Magic Balls Factory`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"viewof habitat = {\n const sel = select(habitats.map(r => r.name));\n sel.oninput = () => {\n // Kudos to Jeremy Ashkenas for this nifty trick.\n sel.value = habitats.find(r => r.name === sel.input.value); // <= hangs since Oct 18!!!\n // sel.value = habitats[sel.input.value]; // <= hangs when tested on Nov 18\n // sel.value = habitats[0];\n };\n sel.oninput();\n return sel;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8079,"value":"fullscreen = {\n const button = html`