32:Tc14,chart = { tick_time; const svg = d3.create("svg") .attr("viewBox", [0, 0, 800, 600]); const rect = svg .append("rect") .attr("width", 180) .attr("height", 60) .attr("stroke", "#666") .attr("fill", "#FFFFFF") .attr("stroke-width",3) .attr("x",80) .attr("y",40) const text_infct = svg.append("text") .text("Infected number: "+ (count_infct_balls(balls))) .attr("x",90).attr("y",63) .attr("fill",infectColor) .style("font-weight", 700) .style("font-family", "Raleway, Arial, Helvetica, sans-serif") const text_healthy = svg.append("text"). text("Healthy number: "+ (count_healthy_balls(balls))) .attr("x",90).attr("y",83) .attr("fill","#003262") .style("font-weight", 700) .style("font-family", "Raleway, Arial, Helvetica, sans-serif") ; const current_stimu_data = current_data[current_data.length - 1] svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); //The constant part const path_3 = svg.append("path") .datum(current_stimu_data.slice(0,current_stimu_data.length - 2)) .attr("fill", "none") .attr("stroke", infectColor) .attr("stroke-width", 5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", line); //The Animation part const path_1 = svg.append("path") .datum(current_stimu_data.slice(current_stimu_data.length - 3,current_stimu_data.length - 1)) .attr("fill", "none") .attr("stroke", infectColor) .attr("stroke-width", 5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", line); // Last stimulation const path_2 = svg.append("path") .datum(previous_data[previous_data.length - 1]) .attr("fill", "none") .attr("stroke", "#666") .attr("stroke-width", 5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", line); //x- axis svg.append("text") .attr("transform",`translate(400,580)`) .style("text-anchor", "middle") .text("Time Step") .style("font-family", "Raleway, Arial, Helvetica, sans-serif"); //x- axis svg.append("text") .attr("transform",`translate(20,300) rotate(-90)`) .style("text-anchor", "middle") .text("Number of Infected") .style("font-family", "Raleway, Arial, Helvetica, sans-serif"); // // Animation path_1 .attr("stroke-dasharray", function () {return this.getTotalLength()}) .attr("stroke-dashoffset", function () {return this.getTotalLength()}) // reveal the arcs .transition().duration(1800) .attr("stroke-dashoffset", 0) // to create legend svg.append("g") .attr("class", "legend legend--ordinal") .attr("transform", "translate(90,150)") .style("font-size",14) .style("font-family","Raleway, Arial, Helvetica, sans-serif"); svg.select(".legend") .call(legend); return svg.node(); }33:T5b6,// A loop cell to update state info // This is the main function that runs the stimulation... stimuloop = { let i = 0; const one_stimu = [] // Capture Data for one stimulation previous_data.push(current_data[current_data.length - 1]) current_data.push([({step : 0, value: 0})]) // A timer for the stimulus // delay_count_sec = how many i++ counts per second // stimus_secs = seconds of stimulation if delay_count_sec set up as 60 while (i < (stimu_secs * delay_count_sec)){ //Bounce off the wall and rectangle container // Loop through each ball eachBall(balls,(ball,i) => { ball.x += ball.dx; // move the ball ball.y += ball.dy; // move the ball ball = bounce_wall(ball); // another fuction to check against wall ball = bounce_rect(ball, con_rect); // another fuction to check against rectangle }); // Bounce off other balls. nested_balls(balls); // Update rectangle positions update_rect(con_rect); //show current i yield Promises.delay(delay_count_sec, ++i); // count the number of infected balls if (i % delay_count_sec == 0){ current_data[current_data.length - 1].push({step: i/delay_count_sec, value: count_infct_balls(balls)}); } } // Update cells named series and time_line to capture data for graph... // chart_data_v2.push(one_stimu); }34:T815,// draw cell // This cell basically update the canvas and draw the most updated objects... draw = { stimuloop // makes draw cell depend on loop (AKA the main function // Draw the background c.fillStyle = "white"; c.fillRect(0,0, w, h + top_bar_height); // give margin some color c.fillStyle = "#666"; // colors #f32853, #323037, #666 // that dividing bar c.fillRect(scale, top_bar_height - scale , w, scale); // top left x,y and width & length // give wall some color c.fillStyle = "#666"; c.fillRect(0, 0, w, scale); //top bar c.fillRect(0, 0, scale, top_bar_height + h); //left side bar c.fillRect(w - scale, 0 , scale, h + top_bar_height); //right side bar c.fillRect(0, top_bar_height + h - scale, w, h + top_bar_height); //bottom bar // Draw the balls eachBall(balls, (ball) => { c.beginPath(); c.fillStyle = ball.color; c.arc(ball.x,ball.y, ball.r, 0, 2 * Math.PI); c.fill() }); // To draw the interactive circles // array helps for the drag animation for (const {x, y, r, color, dx, dy, active} of interactive_circles_2) { c.beginPath(); c.moveTo(x + r, y); c.arc(x, y, r, 0, 2 * Math.PI); c.fillStyle = color; c.fill(); // selected effect on the dragable circle if (active) { c.lineWidth = 2; c.stroke(); } } // redraw canvas once ball is moved c.canvas.dispatchEvent(new CustomEvent("input")); // Draw the rectangele c.strokeStyle = "#666" c.lineWidth = scale * 0.4 c.strokeRect(con_rect.x,con_rect.y,con_rect.wid, con_rect.height); // Fisrt text c.font = "bold 14px Raleway, Arial, Helvetica, sans-serif"; c.fillStyle = "#484848"; c.textAlign = "left"; c.fillText("Drag to Introduce Infected Ball", infect_ball_start_cor[0] + 20, top_bar_height/2 + 5); // Second text c.font = "bold 14px Raleway, Arial, Helvetica, sans-serif"; c.fillStyle = "#484848"; c.textAlign = "left"; c.fillText("Try a Box to slow down the Spread", infect_ball_start_cor[0] + 450, top_bar_height/2 + 5); }35:T860,// Function to bounce balls against rectangle function bounce_rect(ball, rect) { let half_scale = scale * 0.5 let ul_corner = [rect.x, rect.y] let lr_corner = [rect.x + rect.wid, rect.y + rect.height] // if ball inside of rectangle if ( (ball.x - ball.r) > ul_corner[0] && (ball.y - ball.r) > ul_corner[1] && (ball.x + ball.r) < lr_corner[0] && (ball.y + ball.r) < lr_corner[1]) { // if a hit from right side --> move right if (ball.x - ball.r < rect.x + half_scale){ ball.dx = Math.abs(ball.dx) } // if a hit from left side --> move left if (ball.x + ball.r > lr_corner[0] - half_scale){ ball.dx = - Math.abs(ball.dx) } // if a hit from bottom side --> move down if (ball.y - ball.r < rect.y + half_scale){ ball.dy = speed } // if a hit from top side --> move up if (ball.y + ball.r > lr_corner[1] - half_scale){ ball.dy = -speed } } // When outside and hitting from top or bottom else if ((ball.x - ball.r > rect.x - half_scale && ball.x + ball.r < lr_corner[0] + half_scale)){ // move up if (ball.y + ball.r > rect.y - half_scale && ball.y < rect.y - half_scale){ ball.dy = -speed } // move down if (ball.y - ball.r < lr_corner[1] + half_scale && ball.y > lr_corner[1] + half_scale){ ball.dy = speed } } // when it's outside of the rectangle and on the same horizontal level else if (ball.y + ball.r < lr_corner[1] && ball.y - ball.r > rect.y) { // if a hit from right side --> move right if (ball.x - ball.r < lr_corner[0] + half_scale && ball.x > lr_corner[1]){ ball.dx = Math.abs(ball.dx) } // if a hit from left side --> move left if (ball.x + ball.r > rect.x - half_scale && ball.x < rect.x) { ball.dx = - Math.abs(ball.dx) } } return ball }36:T5a1,// Nested ball funtion for colludsion and infection... function nested_balls(balls){ // Double loop to go through all balls for (let i = 0; i < balls.length ; i++){ let ball1 = balls[i] // here is the second loop for (let j = 0; j < balls.length ; j++){ // if second ball is same as the first ball next let ball2 = balls[j]; if (ball1 == ball2) continue; // check collision if ball2 hits ball1 if (CheckCollision(ball2, ball1) ) { if (ball1.color == infectColor && Math.random() < infect_prob){ ball2.color = infectColor;} if (ball2.color == infectColor && Math.random() < infect_prob){ ball1.color = infectColor;} } // check collision if ball1 hits ball2 if (CheckCollision(ball1, ball2) ) { if (ball2.color == infectColor && Math.random() < infect_prob ){ ball1.color = infectColor;} if (ball1.color == infectColor && Math.random() < infect_prob ){ ball2.color = infectColor;} //set velocities for both balls ball1.dx = -ball1.dx; ball1.dy = -ball1.dy; ball2.dx = -ball2.dx; ball2.dy = -ball2.dy; //ensure one ball is not inside others. distant apart till not colliding while (CheckCollision(ball1, ball2)) { ball1.x += ball1.dx; ball1.y += ball1.dy; ball2.x += ball2.dx; ball2.y += ball2.dy; } } } } return balls }37:T589,// for drag animation... // borrowed directly from https://observablehq.com/@d3/hello-d3-drag drag_circles = subjects => { // Choose the circle that is closest to the pointer for dragging. function dragsubject() { let subject = null; let distance = maxDistance; for (const c of subjects) { let d = Math.hypot(d3.event.x - c.x, d3.event.y - c.y); if (d < distance) { distance = d; subject = c; } } return subject; } // When starting a drag gesture, move the subject to the top and mark it as active. function dragstarted() { subjects.push(d3.event.subject); d3.event.subject.active = true; } // When dragging, update the subject’s position. function dragged() { d3.event.subject.x = Math.max(0, Math.min(w, d3.event.x)); d3.event.subject.y = Math.max(0, Math.min(h + top_bar_height, d3.event.y)); } // When ending a drag gesture, mark the subject as inactive again. function dragended() { d3.event.subject.active = false; if (d3.event.subject.color == infectColor){ d3.event.subject.dx = speed * Math.random() - speed * Math.random(); d3.event.subject.dy = speed * Math.random() - speed * Math.random(); balls.push(d3.event.subject); } } return d3.drag() .subject(dragsubject) .on("start", dragstarted) .on("drag", dragged) .on("end", dragended); }38:[] 30:{"title":"InfoVis Final Project - Social Distance Simulation _ v2","cells":[{"id":0,"value":"md`# InfoVis Final Project - Social Distance Simulation _ v2`","pinned":false,"hidden":false,"mode":"ojs"},{"id":108,"value":"viewof numofballs = slider({min: 2, max: 500, value: 50, step: 1, title: \"Number of Balls\"}) ","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"// Canvas width\nviewof w = slider({min: 500, max: width, value: 600, step: 1, title: \"Canvas width\"}) ","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"// Speed of ball\nviewof speed = slider({min: 0.1, max: 10, value: 5, step: 0.1, title: \"Speed of Ball\"}) ","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"// Scale of balls\nviewof scale = slider({min: 2, max: 20, value: 12, step: 1, title: \"Scale of balls\"}) ","pinned":false,"hidden":false,"mode":"ojs"},{"id":461,"value":"// Scale of balls\nviewof infect_prob = slider({min: 0.1, max: 1, value: 0.25, step: 0.05, title: \"infection probability\"}) ","pinned":false,"hidden":false,"mode":"ojs"},{"id":760,"value":"viewof stop_prob = slider({min: 0.1, max: 1, value: 0.25, step: 0.05, title: \"Stop Ball probability\"}) ","pinned":false,"hidden":false,"mode":"ojs"},{"id":464,"value":"viewof infectColor = color({\n 'title': 'infected color',\n 'value': '#f32853',\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"viewof newsti = button(\"New Stimuluation\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1134,"value":"tick_time = {\n newsti;\n let i = 0;\n while (i < 24) {\n yield Promises.tick(3600, ++i);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"viewof c = {\n var content = DOM.context2d(w, top_bar_height + h); // content that contains canvas\n var canvas = content.canvas;\n content.canvas.value = content;\n\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":810,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":649,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":248,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":103,"value":"// define the main balls object as an Array\nballs = {\n newsti; // this should depend on newsti button on top\n let balls = new Array(numofballs).fill(0)\n \n // loop through all ball to assign some random starting point\n eachBall(balls,(ball,i) => {\n const random_binary = random_zero(stop_prob)\n balls[i] = {\n r: scale * 0.7,\n x: x_start2[i],\n y: y_start2[i],\n dx: (speed * Math.random() - speed * Math.random())* random_binary,\n dy: (speed * Math.random() - speed * Math.random())* random_binary,\n color: \"#003262\"\n };\n });\n return balls\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":751,"value":"function random_zero(prob) {\n var random_binary = 0\n if (Math.random() > prob) {\n random_binary = 1\n }\n return random_binary\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":259,"value":"// Collision checking function\nfunction CheckCollision(ball1, ball2) {\n var absx = Math.abs(ball2.x - ball1.x);\n var absy = Math.abs(ball2.y - ball1.y);\n\n // find distance between two balls.\n var distance = (absx * absx) + (absy * absy);\n distance = Math.sqrt(distance);\n // check if distance is less than sum of two radius - if yes, collision\n if (distance < (ball1.r + ball2.r)) {\n return true;\n }\n return false;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":639,"value":"// Function to check ball against wall...\nfunction bounce_wall(ball) {\n // if position is less than radius move right\n if (ball.x < ball.r + scale)\n {ball.dx = Math.abs(ball.dx)}; \n // if position + radius is beyond width of screen move left\n if (ball.x + ball.r > w - scale)\n {ball.dx = - Math.abs(ball.dx)}; \n // if ball position is less than radius (aka hitting the ceiling) move down\n if (ball.y < ball.r + top_bar_height) \n {ball.dy = speed} ; \n // if ball hits bottom move up\n if (ball.y + ball.r > h + top_bar_height - scale) \n {ball.dy = -speed}; \n \n return ball\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":417,"value":"// d3 function that combines the user input into action\n// drag_circles is a seperate function\nd3_action = {d3.select(c.canvas).call(drag_circles(interactive_circles_2).on(\"start.render drag.render end.render\", draw));}","pinned":false,"hidden":false,"mode":"ojs"},{"id":419,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":604,"value":"// these are the interactive circles that we can move around for interactive features\n\ninteractive_circles_2 = new Array(\n ({ r: scale * 0.7, x: infect_ball_start_cor[0], y: infect_ball_start_cor[1], dx: 0, dy: 0, color: infectColor}), // that infected ball\n ({ r: scale * 0.4, x: infect_ball_start_cor[0] + scale * 25, y: infect_ball_start_cor[1] - scale, dx: 0, dy: 0, color: \"#666\"}), // top left corner of rectangle container \n ({ r: scale * 0.4, x: infect_ball_start_cor[0] + scale * 35, y: infect_ball_start_cor[1] + scale, dx: 0, dy: 0, color: \"#666\"}) // bottom right corner of rectangle container \n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":614,"value":"// rectangle container object\ncon_rect = ({x: Math.min(interactive_circles_2[1].x, interactive_circles_2[2].x),\n y: Math.min(interactive_circles_2[1].y, interactive_circles_2[2].y),\n wid: Math.abs(interactive_circles_2[1].x - interactive_circles_2[2].x),\n height: Math.abs(interactive_circles_2[1].y - interactive_circles_2[2].y)\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":627,"value":"// function to update rectangle positions\nfunction update_rect(con_rect){\n con_rect.x = Math.min(interactive_circles_2[1].x, interactive_circles_2[2].x)\n con_rect.y = Math.min(interactive_circles_2[1].y, interactive_circles_2[2].y)\n con_rect.wid = Math.abs(interactive_circles_2[1].x - interactive_circles_2[2].x)\n con_rect.height = Math.abs(interactive_circles_2[1].y - interactive_circles_2[2].y)\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":802,"value":"y_chart = d3.scaleLinear()\n .domain([0,numofballs])\n .range([540, 40])","pinned":false,"hidden":false,"mode":"ojs"},{"id":888,"value":"x_chart = d3.scaleLinear()\n .domain([0,20])\n .range([60, 780])","pinned":false,"hidden":false,"mode":"ojs"},{"id":804,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,540)`)\n .style(\"font-size\", \"14px\")\n .style(\"font-family\", \"Raleway, Arial, Helvetica, sans-serif\")\n .call(d3.axisBottom(x_chart).ticks(20).tickSizeOuter(0))","pinned":false,"hidden":false,"mode":"ojs"},{"id":806,"value":"yAxis = g => g\n .attr(\"transform\",`translate(60,0)`)\n .style(\"font-size\", \"14px\")\n .style(\"font-family\", \"Raleway, Arial, Helvetica, sans-serif\")\n .call(d3.axisLeft(y_chart).ticks(10).tickSizeOuter(0))\n // .call(g => g.select(\".domain\").remove())","pinned":false,"hidden":false,"mode":"ojs"},{"id":830,"value":"line = d3.line()\n .x(d => x_chart(d.step))\n .y(d => y_chart(d.value))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1096,"value":"// To create legend\n// credit to post https://observablehq.com/@git-ashish/using-d3-svg-legend-d3-svg-legend\nlegend = d3Legend.legendColor()\n .shape(\"path\", d3.symbol().type(d3.symbolSquare).size(120)())\n // Try commenting shapePadding() to see the difference\n .shapePadding(25) // cell padding\n .labelOffset(20) // label offset from the shape\n .scale(legendscale)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1093,"value":"// For legend Color display (Scale)\nlegendscale = d3.scaleOrdinal()\n .domain([\"Current Stimulus\", \"Last Stimulus\"])\n .range([infectColor, \"#666\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":125,"value":"// function to loop through the Balls ( For a single loop)\n\nfunction eachBall(balls, cb){//call back function\n for (let i = 0 ; i < balls.length; i++){\n let ball = balls[i];\n if (cb(ball,i)) return;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1112,"value":"current_data = [ \n [({step : 0, value: 0}),\n ({step : 1, value: 1}),\n ({step : 2, value: 1}),\n ({step : 3, value: 5}),\n ({step : 4, value: 12}),\n ({step : 5, value: 18}),\n ({step : 6, value: 22}),\n ({step : 7, value: 28}),\n ({step : 8, value: 33}),\n ({step : 9, value: 39}),\n ({step : 10, value: 42}),\n ({step : 11, value: 46}),\n ({step : 12, value: 47}),\n ({step : 13, value: 49}),\n ({step : 14, value: 50}),\n ({step : 15, value: 50}),\n ({step : 16, value: 50}),\n ({step : 17, value: 50}),\n ({step : 18, value: 50}),\n ({step : 19, value: 50}),\n ({step : 20, value: 50}), \n] \n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1109,"value":"previous_data = [ \n [({step : 0, value: 1}),\n ({step : 1, value: 1}),\n ({step : 2, value: 1}),\n ({step : 3, value: 5}),\n ({step : 4, value: 12}),\n ({step : 5, value: 18}),\n ({step : 6, value: 22}),\n ({step : 7, value: 28}),\n ({step : 8, value: 33}),\n ({step : 9, value: 39}),\n ({step : 10, value: 42}),\n ({step : 11, value: 46}),\n ({step : 12, value: 47}),\n ({step : 13, value: 49}),\n ({step : 14, value: 50}),\n ({step : 15, value: 50}),\n ({step : 16, value: 50}),\n ({step : 17, value: 50}),\n ({step : 18, value: 50}),\n ({step : 19, value: 50}),\n ({step : 20, value: 50}), \n]\n \n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":528,"value":"// Small function to count number of infected balls in array of balls\nfunction count_infct_balls(balls){\n var count = 0;\n for(var i = 0; i < balls.length; ++i){\n if(balls[i].color == infectColor)\n count++;}\n return count\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":795,"value":"function count_healthy_balls(balls){\n var count = 0;\n for(var i = 0; i < balls.length; ++i){\n if(balls[i].color != infectColor)\n count++;}\n return count\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":446,"value":"// infected ball starting position\ninfect_ball_start_cor = { \n newsti; \n let infect_ball_cor = [ 60, top_bar_height/2];\n return infect_ball_cor}\n ","pinned":false,"hidden":false,"mode":"ojs"},{"id":414,"value":"// we may not need this any more\ninteractive_circles = \n // Initiated an infected ball (It's an array with only one element in case we need more\n d3.range(1).map(i => ({\n r: scale * 0.7, x: infect_ball_start_cor[0], y: infect_ball_start_cor[1], \n dx: 0, dy: 0, color: infectColor}));\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":221,"value":"y_start2 = { \n newsti; \n let y_start2 = new Array(numofballs);\n \n for (let i = 0; i < y_start2.length; i++) {\n y_start2[i] = scale * 2 + top_bar_height + Math.random() * ( h + top_bar_height - 4 * scale)\n }\n return y_start2;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":113,"value":"x_start2 = { \n newsti; \n let x_start2 = new Array(numofballs);\n \n for (let i = 0; i < x_start2.length; i++) {\n x_start2[i] = scale * 2 + Math.random() *(w - 4 * scale)\n }\n return x_start2;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":424,"value":"maxDistance = Infinity","pinned":false,"hidden":false,"mode":"ojs"},{"id":523,"value":"// how long the stimulation lasts...in seconds\nstimu_secs = 20","pinned":false,"hidden":false,"mode":"ojs"},{"id":521,"value":"delay_count_sec = 60","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"h = 400","pinned":false,"hidden":false,"mode":"ojs"},{"id":357,"value":"top_bar_height = 100","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"import {color, slider, button} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1098,"value":"d3Legend = require(\"d3-svg-legend\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":227,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W38","stdlib":"1","titling":"auto"}