31:T445,As users adopt new tools or (programming) languages, earlier adopters have likely honed their skill compared to later entrants. To simulate how in a system of tool users, *fluency* evolves over time, we can utilise the mean of two joint cumulative distributions, namely *tool adoption* (x-axis: adopters over time) and *language acquisition* (y-axis: vocabulary size), as a *skill frontier*. Under **ideal conditions**, these dimensions are fully correlated, meaning that adopting a tool and learning its language or 'technical vocabulary' unfold in a similar fashion: as time goes by, individuals expand their vocabulary at a similar rate that the whole system adopts a tool. By consequence, earlier adopters will have attained their 'maximum vocabulary size' by the time late adopters enter the stage, who have yet to learn the tool's 'language'. In practice however, ideals conditions are rarely met, i.e. tool adoption and language acquisition are *not* fully correlated. The goal of this simulation is to explore what happens to the 'tool/language' frontier under different conditions.32:Tc88,{ let copy = data.map(row=>row.map(v=>1-v)).reverse().flat() // d3.transpose(data.map(d=>d.reverse())).flat() let main = Plot.plot({ aspectRatio: 1.7, //x: {axis: "top",ticks:5}, //y: {axis: "left",ticks:5}, marginTop: 48, marginLeft: 66, //marginRight:276, marginBottom: 48, inset: 0, color: { label: "Disposal Cooling Frontier Warming Void ", legend: true, ticks:0, type: "linear", domain:[0.01,0.99], range: ["#d5a6bd", "#fff0ad"/*"#ffea8c"/*"#fcf9bb"*/,"#0c343d"], interpolate: d3.interpolateHclLong, }, marks: [ Plot.frame({ stroke: "black", strokeWidth: 0 ,fill:"black",opacity:1}), Plot.raster(copy,{width:samples,height:samples}), //Plot.contour(copy,{width:samples,height:samples,value:Plot.identity,fill:"value", interval:1/12,interpolate:"random-walk"}), Plot.axisX(xTicks.map((d) => d * samples),{ label: "Adoption at { t =" + (push * 2).toFixed(2) + " }", labelAnchor: "center", anchor: "top", tickSize: 12, tickFormat: (_, i) => xLabels[i - 1], y: (d, i, f) => (i > 0 && i < 6 ? f.at(-1) : 0), }, ), Plot.axisY(yTicks.map((d) => d * samples),{ label: "Fluency", labelAnchor: "top", labelArrow: "down", anchor: "left", tickSize: 12, tickFormat: (_, i) => yLabels[yLabels.length - i - 1], }, ), Plot.gridX(xTicks.map((d) => d * samples),{ strokeOpacity: 0.25, strokeDasharray: 2, strokeWidth: 1.25, stroke: "black", mixBlendMode: "overlay", }, ), Plot.gridY(yTicks.map((d) => d * samples),{ strokeOpacity: 0.25, strokeDasharray: 2, strokeWidth: 1.25, stroke: "black", mixBlendMode: "overlay", }, ), Plot.frame({ stroke: "black", strokeWidth: 1}), Plot.axisX(xTicks.map((d) => d * samples).slice(0, -1), { label: "Average fluency", labelAnchor: "center", labelOffset: 42, labelArrow: "none", anchor: "bottom", tickSize: 0, tickPadding: 18, tickFormat: (_, i) => pcts[i - 1], y: (d, i, f) => (i > 0 && i < 6 ? xTicks.at(-1) : 0), }), ], }); let grids = [ ...main.querySelectorAll(':where([aria-label="x-grid"] , [aria-label="x-grid"])'), ].map((e) => e.cloneNode(true)); let mask = document.createElementNS("http://www.w3.org/2000/svg", "mask"); mask.setAttribute("id", "gridMask"); mask.innerHTML = ``; grids.forEach((g, i) => { g.setAttribute("stroke-width", slit); g.setAttribute("stroke-opacity", 1); g.setAttribute("stroke","white"); g.firstChild.remove(); g.lastChild.remove(); if (i == 1) g.lastChild.remove(); g.removeAttribute("stroke-dasharray"); mask.appendChild(g); }); main.firstChild.appendChild(mask); main.querySelector(':where([aria-label="raster"],[aria-label="contour"])').setAttribute("mask", "url(#gridMask)"); return main; } 33:T539,The cumulative skill of tool users at any given time is visible as the banding and yellow frontier moving into darker areas. Think of it as *filling the fluency gap/void*. - The blue and red banding are not just for visual effect, pointing to how earlier adopters will likely abandon tools for newer ones. (i.e. the red area expanding in size). - While early adopters won't lose their fluency, knowledge *goes cold* after a while and may need a refresher when picking a tool or language back up (i.e. the increased blue banding). Also note how 'cooling' is never far behind.. - The learning rate tapers off once more as the system runs-out of adopters. - While the tail-group brushes up their skill, the head-group may have already moved onto new ventures. - Also note that not everyone in the headgroup has to become fluent.. That is not say latecomers cannot ever grow to the level of frontrunners, but that it becomes exceedingly rare for them to exert influence on the tool/language system. For reference, an average cycle for a frontier to pass would take between 5 and 10 years.34:Ta3a,function Scrubber(values, { format = value => value, initial = 0, direction = 1, delay = null, autoplay = true, loop = true, loopDelay = null, alternate = false } = {}) { values = Array.from(values); const form = html``; let frame = null; let timer = null; let interval = null; function start() { form.b.textContent = "Pause"; if (delay === null) frame = requestAnimationFrame(tick); else interval = setInterval(tick, delay); } function stop() { form.b.textContent = "Play"; if (frame !== null) cancelAnimationFrame(frame), frame = null; if (timer !== null) clearTimeout(timer), timer = null; if (interval !== null) clearInterval(interval), interval = null; } function running() { return frame !== null || timer !== null || interval !== null; } function tick() { if (form.i.valueAsNumber === (direction > 0 ? values.length - 1 : direction < 0 ? 0 : NaN)) { if (!loop) return stop(); if (alternate) direction = -direction; if (loopDelay !== null) { if (frame !== null) cancelAnimationFrame(frame), frame = null; if (interval !== null) clearInterval(interval), interval = null; timer = setTimeout(() => (step(), start()), loopDelay); return; } } if (delay === null) frame = requestAnimationFrame(tick); step(); } function step() { form.i.valueAsNumber = (form.i.valueAsNumber + direction + values.length) % values.length; form.i.dispatchEvent(new CustomEvent("input", {bubbles: true})); } form.i.oninput = event => { if (event && event.isTrusted && running()) stop(); form.value = values[form.i.valueAsNumber] form.o.value = format(form.value, form.i.valueAsNumber, values); }; form.b.onclick = () => { if (running()) return stop(); direction = alternate && form.i.valueAsNumber === values.length - 1 ? -1 : 1; form.i.valueAsNumber = (form.i.valueAsNumber + direction) % values.length; form.i.dispatchEvent(new CustomEvent("input", {bubbles: true})); start(); }; form.i.oninput(); if (autoplay) start(); else stop(); Inputs.disposal(form).then(stop); return form; }35:[] 2f:{"title":"The tool/language frontier","cells":[{"id":0,"value":"# The tool/language frontier\n## Simulating the fluency of tool users\n\n___","pinned":false,"hidden":false,"mode":"md"},{"id":927,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":2042,"value":"\nIssues: \n- `24-11-14`: inaccurate value labels\n- `24-11-15`: scrubber does not go up to 1","pinned":false,"hidden":false,"mode":"md"},{"id":772,"value":"// does not go all the way to 1\n\nviewof push = Scrubber(\n Array.from({ length: Math.pow(2, 10) }, (_, i) => i / Math.pow(2, 10)).filter(\n (d) => d >= span[0] && d <= span[1]\n ),\n {\n autoplay: true,\n loopDelay: 1500,\n alternate: true,\n format: (v) => v.toPrecision(2)\n }\n)\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":4789,"value":"ease = xNorm.map((_,i,rows)=>rows.map((x,j)=> 1-((x+yNorm[i])/2)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":932,"value":"___","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1176,"value":"viewof wide = Inputs.range([0.01, 1], {value: 0.2, step: 0.001, label: \"Spread of frontier\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1203,"value":"viewof tool = Inputs.range([0, 5], {value: 1, step: 1, label: \"Adoption variation\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1207,"value":"viewof Lang = Inputs.range([0, 5], {value: 5, step: 1, label: \"Language variation\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1911,"value":"viewof slit = Inputs.range([1, 192], {value: 12, step: 1, label: \"Slit aperture\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1921,"value":"viewof back = Inputs.range([0, 1], {value: 0.95, step: 0.01, label: \"Mask opacity\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1165,"value":"viewof span = interval([0, 1], {\n step: .01,\n value: [0, 1],\n label: 'Timeslice',\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2053,"value":"pcts = []","pinned":false,"hidden":false,"mode":"ojs"},{"id":895,"value":"$33","pinned":false,"hidden":false,"mode":"md"},{"id":1028,"value":"viewof random = Inputs.button(\"New frontier\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":829,"value":"___","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"data = {\n \n return xNorm.map((_,i,row)=>\n row.map(x=> \n 1-Math.min(Math.max(0.0001,\n push <= 0.5 ?\n Math.pow(((x + yNorm[i])/2),push*2) :\n 1-Math.pow(1-((x + yNorm[i])/2),2-(push*2))\n ),0.9999)\n \n ))\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"// issue: is inverted\nviewof mass = Inputs.range([0, 1], {value: 0.5, step: 0.01, label: \"Centre of mass\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":599,"value":"xTicks = Array.from({length:7},(_,i)=> parseFloat((i/6).toPrecision(2)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":695,"value":"yTicks = [...xTicks,parseFloat((11/12).toPrecision(2))].sort()","pinned":false,"hidden":false,"mode":"ojs"},{"id":602,"value":"xLabels = [/*\"Instigator\",*/\"Influencer\",\"Supporter\",\"Follower\",\"Slacker\",\"Lurker\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":732,"value":"yLabels = [\"Absent\",/*\"Dormant\",\"Reticent\",*/\"Nascent\",\"Incipient\",\"Recipient\",\"Sufficient\",/*\"Eloquent\"*//*\"Adherent\"*/\"Proficient\",\"Fluent\",\"Excellent\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"samples = 50","pinned":false,"hidden":false,"mode":"ojs"},{"id":175,"value":"xMu = 1-mass","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"xSigma = wide","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"yMu = xMu","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"ySigma = xSigma","pinned":false,"hidden":false,"mode":"ojs"},{"id":882,"value":"xRand = tool","pinned":true,"hidden":false,"mode":"ojs"},{"id":884,"value":"yRand = Lang","pinned":true,"hidden":false,"mode":"ojs"},{"id":63,"value":"xDist = random,Array.from({length:samples},(_,i)=>\n//d3.randomNormal(xMu,xSigma)(i/samples)).sort()\n normal((i)/(samples-1),xMu,xSigma))","pinned":false,"hidden":false,"mode":"ojs"},{"id":203,"value":"xCmds = xDist.reduce((acc, num) => [...acc, acc[acc.length - 1] + (num+Math.random()*xRand)], [0]).slice(1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1515,"value":"xNorm = [...xCmds]\n.map(d=> d/(Math.max(...xCmds)))\n//.map(d=>(d-Math.min(...xCmds))/(Math.max(...xCmds)-Math.min(...xCmds)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":71,"value":"yDist = random,Array.from({length:samples},(_,i)=>\n//d3.randomNormal(yMu,ySigma)(i/samples)).sort()\n normal((i)/(samples-1),yMu,ySigma))","pinned":true,"hidden":false,"mode":"ojs"},{"id":212,"value":"yCmds = yDist.reduce((acc, num) => [...acc, acc[acc.length - 1] + (num+Math.random()*yRand)], [0]).slice(1)//.reverse();","pinned":false,"hidden":false,"mode":"ojs"},{"id":1518,"value":"yNorm = [...yCmds]\n.map(d=> d/(Math.max(...yCmds)))\n//.map(d=>(d-Math.min(...yCmds))/(Math.max(...yCmds)-Math.min(...yCmds)))","pinned":true,"hidden":false,"mode":"ojs"},{"id":119,"value":"normal = (x,mu,sig) => { \n\n x = x + (1-(Math.random()*2))*0\n return Math.exp(-0.5*(Math.pow(((x-mu)/sig),2)))*(1/(Math.sqrt(2*Math.PI)*sig))\n //return d3.randomNormal(mu,sig)(x)\n\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":769,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1160,"value":"import {interval} from '@mootari/range-slider'","pinned":false,"hidden":false,"mode":"ojs"},{"id":1820,"value":"version = ({\n v010: 'v1819'\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":4698,"value":"___","pinned":false,"hidden":false,"mode":"md"}],"files":"$W35","stdlib":"1","titling":"auto"}