30:T5dd,//html to display the line map and metrics html` `31:Tae0,//Create transition between two points, and final exit transition from the scene when the agent has finished its travels. transitionMaster = (transition, pathIndex) => { //Create the transition path between two points transition //Amount of time agent should stay at specific location. pathIndex < d.path.length is used throughout because the length of the path varies from agent to agent .delay(function(d) { return pathIndex < d.path.length ? d.path[pathIndex-1].rest : null; }) //Calculate the interpolated value between point for both the x and y coordinate .attrTween("cx", function(d) { return pathIndex < d.path.length ? d3.interpolateNumber(this.getAttribute("cx"), d.path[pathIndex].x) : null; }) .attrTween("cy", function(d) { return pathIndex < d.path.length ? d3.interpolateNumber(this.getAttribute("cy"), d.path[pathIndex].y) : null; }) //Type of easing between points .ease(d3.easeLinear) //Length of time in millisecond to transition between points .duration(function(d) { //Establish rate of travel. Certain paths involve being moved by a robot on the shop floor, which results in a slower travel rate. const rateLocal = pathIndex < d.path.length ? ( d.path[pathIndex].pathType === "robot" ? 0.1 : 0.2 ) : null; //Distance between points divided by rate = the time of travel return pathIndex < d.path.length ? ( distance(d.path[pathIndex-1].x, d.path[pathIndex-1].y, d.path[pathIndex].x, d.path[pathIndex].y)/rateLocal ) : null; }) //Once the transition between points is completed the pathIndex of the agent is updated in the data .on('end', function(d) { d.pathIndex = pathIndex }) //Fade out and remove agent when final path is complete, going from o.8 to 0 opacity over 500 milliseconds //pathIndex >= d.path.length identifies that the agent's path of travel is completed .transition() .styleTween("opacity", function(d) { return pathIndex >= d.path.length ? d3.interpolate(0.8, 0) : null; }) .duration(500) //Once this transition is completed update the global state to reflect the current count of scraps or completed parts. .on('end', function(d) { return pathIndex >= d.path.length ? ( //The length of scrap path. Probably better way to do this. d.path.length === 4 ? updateScraps() : updatePartsCompleted() ) : null; }) //Remove agent once its path of travel is completed .remove() }32:T1511,gauge = function(container, configuration) { var that = {}; var config = { size : 710, clipWidth : 200, clipHeight : 110, ringInset : 20, ringWidth : 20, pointerWidth : 10, pointerTailLength : 5, pointerHeadLengthPercent : 0.9, minValue : 0, maxValue : 10, minAngle : -90, maxAngle : 90, transitionMs : 750, majorTicks : 5, labelFormat : d3.format('d'), labelInset : 10, arcColorFn : d3.interpolateHsl(d3.rgb('#e8e2ca'), d3.rgb('#3e6c0a')) }; var range = undefined; var r = undefined; var pointerHeadLength = undefined; var value = 0; var svg = undefined; var arc = undefined; var scale = undefined; var ticks = undefined; var tickData = undefined; var pointer = undefined; var donut = d3.pie(); function deg2rad(deg) { return deg * Math.PI / 180; } function newAngle(d) { var ratio = scale(d); var newAngle = config.minAngle + (ratio * range); return newAngle; } function configure(configuration) { var prop = undefined; for ( prop in configuration ) { config[prop] = configuration[prop]; } range = config.maxAngle - config.minAngle; r = config.size / 2; pointerHeadLength = Math.round(r * config.pointerHeadLengthPercent); // a linear scale that maps domain values to a percent from 0..1 scale = d3.scaleLinear() .range([0,1]) .domain([config.minValue, config.maxValue]); ticks = scale.ticks(config.majorTicks); tickData = d3.range(config.majorTicks).map(function() {return 1/config.majorTicks;}); arc = d3.arc() .innerRadius(r - config.ringWidth - config.ringInset) .outerRadius(r - config.ringInset) .startAngle(function(d, i) { var ratio = d * i; return deg2rad(config.minAngle + (ratio * range)); }) .endAngle(function(d, i) { var ratio = d * (i+1); return deg2rad(config.minAngle + (ratio * range)); }); } that.configure = configure; function centerTranslation() { return 'translate('+r +','+ r +')'; } function isRendered() { return (svg !== undefined); } that.isRendered = isRendered; function render(newValue) { /*svg = d3.select(container) .append('svg:svg') .attr('class', 'gauge') .attr('width', config.clipWidth) .attr('height', config.clipHeight);*/ svg = d3.select(container) .attr('class', 'gauge') .attr('width', config.clipWidth) .attr('height', config.clipHeight); var centerTx = centerTranslation(); var arcs = svg.append('g') .attr('class', 'arc') .attr('transform', centerTx); arcs.selectAll('path') .data(tickData) .enter().append('path') .attr('fill', function(d, i) { return config.arcColorFn(d * i); }) .attr('d', arc); var lg = svg.append('g') .attr('class', 'label') .attr('transform', centerTx); lg.selectAll('text') .data(ticks) .enter().append('text') .attr('transform', function(d) { var ratio = scale(d); var newAngle = config.minAngle + (ratio * range); return 'rotate(' +newAngle +') translate(0,' +(config.labelInset - r) +')'; }) .text(config.labelFormat); var lineData = [ [config.pointerWidth / 2, 0], [0, -pointerHeadLength], [-(config.pointerWidth / 2), 0], [0, config.pointerTailLength], [config.pointerWidth / 2, 0] ]; var pointerLine = d3.line().curve(d3.curveLinear) var pg = svg.append('g').data([lineData]) .attr('class', 'pointer') .attr('transform', centerTx); pointer = pg.append('path') .attr('d', pointerLine/*function(d) { return pointerLine(d) +'Z';}*/ ) .attr('transform', 'rotate(' +config.minAngle +')'); update(newValue === undefined ? 0 : newValue); } that.render = render; function update(newValue, newConfiguration) { if ( newConfiguration !== undefined) { configure(newConfiguration); } var ratio = scale(newValue); var newAngle = config.minAngle + (ratio * range); pointer.transition() .duration(config.transitionMs) .ease(d3.easeElastic) .attr('transform', 'rotate(' +newAngle +')'); } that.update = update; configure(configuration); return that; }33:T6b1,// width="960" height="500" createLinePlot = (dataSlice) => { var svg = d3.select("#uptimeLine"), margin = {top: 20, right: 20, bottom: 30, left: 50}, width = +svg.attr("width") - margin.left - margin.right, height = +svg.attr("height") - margin.top - margin.bottom, g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")").attr("id", "uptimeLineG"); var x = d3.scaleLinear() .rangeRound([0, width]) .domain(d3.extent(uptimeData, function(d) { return d.timeStep; })); var y = d3.scaleLinear() .rangeRound([height, 0]) .domain([0, 1]); var line = d3.line() .x(function(d) { return x(d.timeStep); }) .y(function(d) { return y(d.percent); }) .curve(d3.curveCardinal); // x.domain(d3.extent(uptimeData, function(d) { return d.timeStep; })); // y.domain(d3.extent(uptimeData, function(d) { return d.percent; })); //X axis /*g.append("g") .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(x)) .select(".domain") .remove();*/ //Y axis g.append("g") .call(d3.axisLeft(y).ticks(4) .tickFormat(d3.format(".0%")) ) /*.append("text") .attr("fill", "#000") .attr("transform", "rotate(0)") .attr("y", -15) .attr("dy", "0.71em") .attr("text-anchor", "end") .text("Uptime %")*/; //Line return g.append("path") .attr("id", "plotLine") .datum(dataSlice) .attr("fill", "none") .attr("stroke", "#769E17") .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("stroke-width", 1.5) .attr("d", line); }34:[{"id":"22344f92433818e57e520b4b7be8feed6ac512d653d212e2dbc9c6fd7d4e6a0ff590ebac00b735091f41bb544c143aae82adf2822132f5cbb6bd7b5c4338465f","href":"https://static.observableusercontent.com/files/22344f92433818e57e520b4b7be8feed6ac512d653d212e2dbc9c6fd7d4e6a0ff590ebac00b735091f41bb544c143aae82adf2822132f5cbb6bd7b5c4338465f","name":"Line_2_Landmarks.png","type":"image/png","lastModified":1610144048613.508,"size":200284}] 2e:{"title":"FdM Simulation","cells":[{"id":144,"value":"md`# FdM Simulation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1227,"value":"md`## The Simulation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1225,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":1229,"value":"//Create restart button using button library\nviewof restartButton = button({\n \t\t\t\t\tvalue: \"Restart Simulation\"\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":3031,"value":"md `## Import Libraries & Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"//Import D3\nd3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":597,"value":"//Import button \nimport {button} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1905,"value":"//Pull in JSON of agent and path data from Gist\ndata=d3.json(\"https://gist.githubusercontent.com/tripplybrand/eb938c5d20c131869a21f2b309336c49/raw/de925eaa24a41f51a6c64b92c19fda1d9f2b581d/FdM_Animation_Data.json\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":3152,"value":"backgroundImg = FileAttachment(\"Line_2_Landmarks.png\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":181,"value":"md`## Supporting Functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":488,"value":"//Calculate the distance between two points\ndistance = (x1, y1, x2, y2) => { return Math.sqrt(Math.pow((x2 - x1), 2) + Math.pow((y2 - y1), 2))}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1444,"value":"//All global elements are stored in the global state\nglobalState = ({\n \t//The time at which the animation was started\n \tanimationStartTime: 0,\n \t//The difference between the time the page has been loaded and the time the animation was started\n \tanimationCurrentTime: 0,\n \t//How many parts have been completed\n\tcompleted: 0,\n \t//How many parts have been scrapped\n\tscrap: 0,\n \t//An array of all timeouts currently scheduled\n \ttimeouts: [],\n \n \tcurrentLinePoint: 0,\n \n \tplotLineTimer: []\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1654,"value":"//Updates the displayed completed parts number\nupdatePartsCompleted = () => {\n \n //Update global state\n globalState.completed += 1 \n \n //Use global state to update DOM element\n const text = d3.select(\"#completedCount\")\n \n //Set format of text to be three digits at all timed: 001\n const textArray = \n \tglobalState.completed < 10 ? [\"0\", \"0\", globalState.completed].join(\"\")\n \t: globalState.completed < 100 ? [\"0\", globalState.completed].join(\"\")\n \t: globalState.completed\n \n const throughputRate = (globalState.completed*800)/(globalState.animationCurrentTime/1000)\n updateGauge(throughputGauge, throughputRate)\n \n //Transition DOM element to new completed parts number \n return text.transition()\n \t.text(textArray)\n \t\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1740,"value":"//Resets the completed parts number to 000\nresetPartsCompleted = () => {\n \n //Update global state\n globalState.completed = 0 \n \n //Use global state to update DOM element\n const text = d3.select(\"#completedCount\")\n \n //Transition DOM element to completed parts number 000\n return text.transition()\n \t.text(\"000\")\n \t\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2255,"value":"//Updates the displayed scraps gauge\nupdateScraps = () => {\n \n //Update global state\n globalState.scrap += 1 \n \n const throughputRate = (globalState.scrap*800)/(globalState.animationCurrentTime/1000)\n return updateGauge(scrapRateGauge, throughputRate)\n \t\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2261,"value":"//Resets the scraps gauge\nresetScraps = () => {\n \n //Update global state\n return globalState.scrap = 0 \n \t\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":506,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":510,"value":"//Because path length varies between agents find the maximum path length\nmaxPathIndex = Math.max(...data.map(x => x.path.length))","pinned":true,"hidden":false,"mode":"ojs"},{"id":513,"value":"//Create array of path indexes\npathIndexArray = Array.apply(null, Array(maxPathIndex)).map(function (_, i) {return i+1;})","pinned":true,"hidden":false,"mode":"ojs"},{"id":516,"value":"//Call transitionMaster for each path index, creating and attaching all transitions for a single agent\ntransitionMap = (g) => {\n pathIndexArray.forEach((x) => {\n g = g.transition().call(transitionMaster, x)\n }) \n }","pinned":true,"hidden":false,"mode":"ojs"},{"id":3070,"value":"animationTimer = () => {\n //Right now this timer never stops. Is that ok? \n const t = d3.interval(function() {\n globalState.animationCurrentTime = (d3.now() - globalState.animationStartTime);\n }, 500)\n \n return t\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":757,"value":"md`## Action Functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":287,"value":"//Animate an array of agents \nstartSingleAnimation = (data) => {\n \n //Select svg #lineMap\n const svg = d3.select(\"#lineMap\")\n\n //Bind each agent data object to a circle \n const circles = svg.selectAll(\"circle\")\n \t\t\t\t\t//Verify that bound agent does not already exist in the scene\n \t\t\t\t\t.data(data, function(d) { return d ? d.name : this.id; })\n\n //Establish fading into existence \n return circles\n .enter().append(\"circle\")\n \t.attr(\"class\", \"agent\")\n .attr(\"cx\", function(d) { return d.path[0].x; })\n .attr(\"cy\", function(d) { return d.path[0].y; })\n .attr(\"r\", 5)\n \t.attr(\"id\", function(d) { return d.name; })\n \t.style(\"fill\", function(d) { return \"#e85116\"; /*d.color;*/ })\n \t.style(\"opacity\", 0)\n .transition()\n .duration(300)\n .style(\"opacity\", 0.8)\n //Attach all of the agents transitions with transitionMap\n .transition().call(transitionMap);\n \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1144,"value":"//Attach a timeout to trigger the animation when the agent is suppose to enter the scene, based upon the data element \"start\"\nsetStartTime = (data) => {\n var t = d3.timeout(\n function() {\n startSingleAnimation([data]);\n }, data.start)\n return t\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1154,"value":"//Kick off the animation\nstartAnimation = () => {\n \n //Calculate the current time in the world of the animation and update the global state\n animationTimer()\n \n //Update global state with the time the animation began \n globalState.animationStartTime = d3.now();\n \n //Create plot line\n createLinePlot([])\n plotLineTimer()\n \n //Apply setStartTime to every agent in data and update the global state with an array of all timeouts established\n globalState.timeouts = data.map((d) => {\n \t\treturn setStartTime(d)\n\t})\n return globalState.timeouts\n \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1312,"value":"//Reset animation\nrestartAnimation = (data) => {\n \t//Select all agents\n\tconst selection = d3.selectAll(\".agent\")\n //Reset the parts completed ticker to 000 and the global state of count of scraps to 0 \n resetPartsCompleted()\n \tresetScraps()\n //Stop all established timeouts\n globalState.timeouts.forEach((timeout) => timeout.stop())\n \t//Interrupt all transitions attached to .agent\n \tselection.interrupt();\n \t//Remove all .agent\n \tselection.remove();\n \n \t//Reset gauges\n \tupdateGauge(throughputGauge, 0)\n \tupdateGauge(scrapRateGauge, 0)\n \t\n \t//Reset line plot\n \tglobalState.currentLinePoint = 0\n \td3.select(\"#uptimeLineG\").remove()\n \tglobalState.plotLineTimer.forEach((timeout) => timeout.stop())\n \t\n\t//Kick off the animation again \n \treturn startAnimation();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":747,"value":"md`## Button Commands`","pinned":false,"hidden":false,"mode":"ojs"},{"id":677,"value":"//Restart animation button command\n{\n restartButton;\n return restartAnimation(data)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1961,"value":"md`# Gauges`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2153,"value":"updateGauge = (gaugeName, val) => {\n gaugeName.update(val)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2062,"value":"createGauge = (gaugeName) => {\n\treturn gaugeName.render()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2096,"value":"scrapRateGauge = gauge('#scrap-gauge', {\n size: 150,\n clipWidth: 300,\n clipHeight: 300,\n ringWidth: 60,\n maxValue: 550,\n transitionMs: 4000,\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":2092,"value":"throughputGauge = gauge('#throughput-gauge', {\n size: 150,\n clipWidth: 300,\n clipHeight: 300,\n ringWidth: 60,\n maxValue: 550,\n transitionMs: 4000,\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":2239,"value":"//Render gauges\n{\n\tcreateGauge(scrapRateGauge)\n \tcreateGauge(throughputGauge)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1978,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":2323,"value":"md`# Line Plot`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2506,"value":"uptimeData = d3.json(\"https://gist.githubusercontent.com/tripplybrand/b048dfbb5fb72cb424988d9e0fec23b7/raw/32be92f0896d4fc3868a5e39fd9ef806b993c778/uptimeData.json\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2514,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":2686,"value":"updateLinePlot = (dataSlice) => {\n var svg = d3.select(\"#uptimeLine\"),\n margin = {top: 20, right: 20, bottom: 30, left: 50},\n width = +svg.attr(\"width\") - margin.left - margin.right,\n height = +svg.attr(\"height\") - margin.top - margin.bottom;\n \n var x = d3.scaleLinear()\n \t.rangeRound([0, width])\n \t\t.domain(d3.extent(uptimeData.slice(0, plotLineLength), function(d) { return d.timeStep; }));\n\n var y = d3.scaleLinear()\n \t.rangeRound([height, 0])\n \t\t.domain([0, 1]);\n \n var line = d3.line()\n .x(function(d) { return x(d.timeStep); })\n .y(function(d) { return y(d.percent); })\n \t .curve(d3.curveCardinal);\n \n return d3.select(\"#uptimeLineG\").append(\"path\")\n \t .attr(\"class\", \"plotLine\")\n \t .datum(dataSlice)\n \t .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"#769E17\")\n .attr(\"stroke-linejoin\", \"round\")\n .attr(\"stroke-linecap\", \"round\")\n .attr(\"stroke-width\", 1.5)\n .attr(\"d\", line)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3061,"value":"plotLineLength = 25","pinned":false,"hidden":false,"mode":"ojs"},{"id":3053,"value":"plotLineTimer = () => {\n //interval is calculated by animation total time 74133.19999999658 divided by plotLineLength\n const interval = 74133.19999999658/plotLineLength\n const t = d3.interval(function() {plotLineUpdate()}, interval) \n \n return globalState.plotLineTimer = [t]\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3057,"value":"plotLineUpdate = () => {\n \tglobalState.currentLinePoint += 1\n \td3.selectAll(\".plotLine\").remove()\n \tupdateLinePlot(uptimeData.slice(0, globalState.currentLinePoint))\n \n \treturn \t(globalState.currentLinePoint >= plotLineLength) ? globalState.plotLineTimer[0].stop()\n \t\t\t: null\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}