31:T8e8,chart = { const svgHTML = html `` const svg = d3.select(svgHTML) // Append our donut container group svg.append('g') .attr('class', 'donut-container') // The donut arcs will be centered around this point .attr('transform', `translate(${ width / 2 },${ 400 / 2 })`) .selectAll('path') // Our data is the arcs, rather than the data object // so that we have access to the arc data for rendering the paths .data( pieArcs ) .join('path') .style('stroke', 'white') .style('stroke-width', 2) .style('fill', d => colorScale( d.data.type )) // here we pass the arc generator. Remember, an accessor function // receives the data (d) as the first argument, so rather than doing (d) => arc(d) // we can just pass it like below. In this case, our data is the arc descriptor object // so the d attribute will be set to the arc's path string. Take a minute to let that sink in .attr('d', arc) // The labels container will need the same setup because it uses an arc, as well const text = svg.append('g') .attr('class', 'labels-container') .attr('transform', `translate(${ width / 2 },${ 400 / 2 })`) .selectAll('text') // We use the data arcs so we have access to the label data .data( pieArcs ) .join('text') // We use the label arcs here to get their centroid // a centroid is the center point of a shape (in this case the arc) // remember that our label arc has the same inner and outer radius // so the arc is centered just outside the radius of our donut. // Refer back to the labelArcs setup and think about that for a minute! .attr('transform', d => `translate(${ labelArcs.centroid(d) })`) .attr('text-anchor', 'middle') // This section explained below text.selectAll('tspan') // 1 .data( d => [ d.data.type, d.data.value.toFixed(3) ]) // 2 .join('tspan') .attr('x', 0) .style('font-family', 'sans-serif') .style('font-size', 12) .style('font-weight', (d,i) => i ? undefined : 'bold') .style('fill', '#222') //3 .attr('dy', (d,i) => i ? '1.2em' : 0 ) .text(d => d) return svgHTML }32:T11d5,determine_num ={ switch(drone_num){ case 1: return columns({ a: select(["S1", "S2", "S3", "S4", "S5", "S6", "S7", "S8", "S9", "S10", "S11", "S12", "S13", "S14", "S15", "S16", "S17", "S18", "S19"]) }) break; case 2: return columns({ a: select(["S1", "S2", "S3", "S4", "S5", "S6", "S7", "S8", "S9", "S10", "S11", "S12", "S13", "S14", "S15", "S16", "S17", "S18", "S19"]), b: select(["S1", "S2", "S3", "S4", "S5", "S6", "S7", "S8", "S9", "S10", "S11", "S12", "S13", "S14", "S15", "S16", "S17", "S18", "S19"]) }) break; case 3: return columns({ a: select(["S1", "S2", "S3", "S4", "S5", "S6", "S7", "S8", "S9", "S10", "S11", "S12", "S13", "S14", "S15", "S16", "S17", "S18", "S19"]), b: select(["S1", "S2", "S3", "S4", "S5", "S6", "S7", "S8", "S9", "S10", "S11", "S12", "S13", "S14", "S15", "S16", "S17", "S18", "S19"]), c: select(["S1", "S2", "S3", "S4", "S5", "S6", "S7", "S8", "S9", "S10", "S11", "S12", "S13", "S14", "S15", "S16", "S17", "S18", "S19"]) }) break; case 4: return columns({ a: select(["S1", "S2", "S3", "S4", "S5", "S6", "S7", "S8", "S9", "S10", "S11", "S12", "S13", "S14", "S15", "S16", "S17", "S18", "S19"]), b: select(["S1", "S2", "S3", "S4", "S5", "S6", "S7", "S8", "S9", "S10", "S11", "S12", "S13", "S14", "S15", "S16", "S17", "S18", "S19"]), c: select(["S1", "S2", "S3", "S4", "S5", "S6", "S7", "S8", "S9", "S10", "S11", "S12", "S13", "S14", "S15", "S16", "S17", "S18", "S19"]), d: select(["S1", "S2", "S3", "S4", "S5", "S6", "S7", "S8", "S9", "S10", "S11", "S12", "S13", "S14", "S15", "S16", "S17", "S18", "S19"]) }) break; case 5: return columns({ a: select(["S1", "S2", "S3", "S4", "S5", "S6", "S7", "S8", "S9", "S10", "S11", "S12", "S13", "S14", "S15", "S16", "S17", "S18", "S19"]), b: select(["S1", "S2", "S3", "S4", "S5", "S6", "S7", "S8", "S9", "S10", "S11", "S12", "S13", "S14", "S15", "S16", "S17", "S18", "S19"]), c: select(["S1", "S2", "S3", "S4", "S5", "S6", "S7", "S8", "S9", "S10", "S11", "S12", "S13", "S14", "S15", "S16", "S17", "S18", "S19"]), d: select(["S1", "S2", "S3", "S4", "S5", "S6", "S7", "S8", "S9", "S10", "S11", "S12", "S13", "S14", "S15", "S16", "S17", "S18", "S19"]), e: select(["S1", "S2", "S3", "S4", "S5", "S6", "S7", "S8", "S9", "S10", "S11", "S12", "S13", "S14", "S15", "S16", "S17", "S18", "S19"]) }) break; case 12: return columns({ a: select(["S1", "S2", "S3", "S4", "S5", "S6", "S7", "S8", "S9", "S10", "S11", "S12", "S13", "S14", "S15", "S16", "S17", "S18", "S19"]), b: select(["S1", "S2", "S3", "S4", "S5", "S6", "S7", "S8", "S9", "S10", "S11", "S12", "S13", "S14", "S15", "S16", "S17", "S18", "S19"]), c: select(["S1", "S2", "S3", "S4", "S5", "S6", "S7", "S8", "S9", "S10", "S11", "S12", "S13", "S14", "S15", "S16", "S17", "S18", "S19"]), d: select(["S1", "S2", "S3", "S4", "S5", "S6", "S7", "S8", "S9", "S10", "S11", "S12", "S13", "S14", "S15", "S16", "S17", "S18", "S19"]), e: select(["S1", "S2", "S3", "S4", "S5", "S6", "S7", "S8", "S9", "S10", "S11", "S12", "S13", "S14", "S15", "S16", "S17", "S18", "S19"]), f: select(["S1", "S2", "S3", "S4", "S5", "S6", "S7", "S8", "S9", "S10", "S11", "S12", "S13", "S14", "S15", "S16", "S17", "S18", "S19"]), g: select(["S1", "S2", "S3", "S4", "S5", "S6", "S7", "S8", "S9", "S10", "S11", "S12", "S13", "S14", "S15", "S16", "S17", "S18", "S19"]), h: select(["S1", "S2", "S3", "S4", "S5", "S6", "S7", "S8", "S9", "S10", "S11", "S12", "S13", "S14", "S15", "S16", "S17", "S18", "S19"]), i: select(["S1", "S2", "S3", "S4", "S5", "S6", "S7", "S8", "S9", "S10", "S11", "S12", "S13", "S14", "S15", "S16", "S17", "S18", "S19"]), j: select(["S1", "S2", "S3", "S4", "S5", "S6", "S7", "S8", "S9", "S10", "S11", "S12", "S13", "S14", "S15", "S16", "S17", "S18", "S19"]), k: select(["S1", "S2", "S3", "S4", "S5", "S6", "S7", "S8", "S9", "S10", "S11", "S12", "S13", "S14", "S15", "S16", "S17", "S18", "S19"]), l: select(["S1", "S2", "S3", "S4", "S5", "S6", "S7", "S8", "S9", "S10", "S11", "S12", "S13", "S14", "S15", "S16", "S17", "S18", "S19"]) }) break; } }33:Tdd3,determine = { var non_viable; var cnt = 0; if(b == 'Submit'){ switch(drone_num) { case 1: if(determine_num.value.a == "S3"){cnt++;} else if(determine_num.value.a == "S4"){cnt++;} return non_viable = cnt / (drone_num*2) break; case 2: if(determine_num.value.a == "S3"){cnt++;} else if(determine_num.value.a == "S4"){cnt++;} if(determine_num.value.b == "S3"){cnt++;} else if(determine_num.value.b == "S4"){cnt++;} return non_viable = cnt / (drone_num*2) break; case 3: if(determine_num.value.a == "S3"){cnt++;} else if(determine_num.value.a == "S4"){cnt++;} if(determine_num.value.b == "S3"){cnt++;} else if(determine_num.value.b == "S4"){cnt++;} if(determine_num.value.c == "S3"){cnt++;} else if(determine_num.value.c == "S4"){cnt++;} return non_viable = cnt / (drone_num*2) break; case 4: if(determine_num.value.a == "S3"){cnt++;} else if(determine_num.value.a == "S4"){cnt++;} if(determine_num.value.b == "S3"){cnt++;} else if(determine_num.value.b == "S4"){cnt++;} if(determine_num.value.c == "S3"){cnt++;} else if(determine_num.value.c == "S4"){cnt++;} if(determine_num.value.d == "S3"){cnt++;} else if(determine_num.value.d == "S4"){cnt++;} return non_viable = cnt / (drone_num*2) break; case 5: if(determine_num.value.a == "S3"){cnt++;} else if(determine_num.value.a == "S4"){cnt++;} if(determine_num.value.b == "S3"){cnt++;} else if(determine_num.value.b == "S4"){cnt++;} if(determine_num.value.c == "S3"){cnt++;} else if(determine_num.value.c == "S4"){cnt++;} if(determine_num.value.d == "S3"){cnt++;} else if(determine_num.value.d == "S4"){cnt++;} if(determine_num.value.e == "S3"){cnt++;} else if(determine_num.value.e == "S4"){cnt++;} return non_viable = cnt / (drone_num*2) break; case 12: if(determine_num.value.a == "S3"){cnt++;} else if(determine_num.value.a == "S4"){cnt++;} if(determine_num.value.b == "S3"){cnt++;} else if(determine_num.value.b == "S4"){cnt++;} if(determine_num.value.c == "S3"){cnt++;} else if(determine_num.value.c == "S4"){cnt++;} if(determine_num.value.d == "S3"){cnt++;} else if(determine_num.value.d == "S4"){cnt++;} if(determine_num.value.e == "S3"){cnt++;} else if(determine_num.value.e == "S4"){cnt++;} if(determine_num.value.f == "S3"){cnt++;} else if(determine_num.value.f == "S4"){cnt++;} if(determine_num.value.g == "S3"){cnt++;} else if(determine_num.value.g == "S4"){cnt++;} if(determine_num.value.h == "S3"){cnt++;} else if(determine_num.value.h == "S4"){cnt++;} if(determine_num.value.i == "S3"){cnt++;} else if(determine_num.value.i == "S4"){cnt++;} if(determine_num.value.j == "S3"){cnt++;} else if(determine_num.value.j == "S4"){cnt++;} if(determine_num.value.k == "S3"){cnt++;} else if(determine_num.value.k == "S4"){cnt++;} if(determine_num.value.l == "S3"){cnt++;} else if(determine_num.value.l == "S4"){cnt++;} return non_viable = cnt / (drone_num*2) break; } } }34:T884,chart_random = { const svgHTML = html `` const svg = d3.select(svgHTML) // Append our donut container group svg.append('g') .attr('class', 'donut-container') // The donut arcs will be centered around this point .attr('transform', `translate(${ width / 2 },${ 400 / 2 })`) .selectAll('path') .data( pieArcs_random ) .join('path') .style('stroke', 'white') .style('stroke-width', 2) .style('fill', d => colorScale_random( d.data.type )) // here we pass the arc generator. Remember, an accessor function // receives the data (d) as the first argument, so rather than doing (d) => arc(d) // we can just pass it like below. In this case, our data is the arc descriptor object // so the d attribute will be set to the arc's path string. Take a minute to let that sink in .attr('d', arc) // The labels container will need the same setup because it uses an arc, as well const text = svg.append('g') .attr('class', 'labels-container') .attr('transform', `translate(${ width / 2 },${ 400 / 2 })`) .selectAll('text') // We use the data arcs so we have access to the label data .data( pieArcs_random ) .join('text') // We use the label arcs here to get their centroid // a centroid is the center point of a shape (in this case the arc) // remember that our label arc has the same inner and outer radius // so the arc is centered just outside the radius of our donut. // Refer back to the labelArcs setup and think about that for a minute! .attr('transform', d => `translate(${ labelArcs.centroid(d) })`) .attr('text-anchor', 'middle') // This section explained below text.selectAll('tspan') // 1 .data( d => [ d.data.type, d.data.value.toFixed(4) ]) // 2 .join('tspan') .attr('x', 0) .style('font-family', 'sans-serif') .style('font-size', 12) .style('font-weight', (d,i) => i ? undefined : 'bold') .style('fill', '#222') //3 .attr('dy', (d,i) => i ? '1.2em' : 0 ) .text(d => d) return svgHTML }35:T60f,{ var svg = d3.select(DOM.svg(1200, 800)) const svg1 = svg.append("g") const svg2 = svg.append("g") const svg8 = svg.append("g") const svg12 = svg.append("g") if(b1 == 'Randomize'){ svg1.selectAll("rect") .data(array1) .join("rect") .attr("x", (d,i)=> 30 + i) .attr("y", function(d) { return 150 - d*200+1; //Height minus data value }) .attr("width", 1) .attr("height", (d,i)=> d*200 + 1) .style("fill", "black" ) svg2.selectAll("rect") .data(array2) .join("rect") .attr("x", (d,i)=> 30 + i) .attr("y", function(d) { return 300 - d*200+1; //Height minus data value }) .attr("width", 1) .attr("height", (d,i)=> d*200 + 1) .style("fill", "black" ) svg8.selectAll("rect") .data(array8) .join("rect") .attr("x", (d,i)=> 30 + i) .attr("y", function(d) { return 450 - d*200+1; //Height minus data value }) .attr("width", 1) .attr("height", (d,i)=> d*200 + 1) .style("fill", "black" ) svg12.selectAll("rect") .data(array12) .join("rect") .attr("x", (d,i)=> 30 + i) .attr("y", function(d) { return 600 - d*200+1; //Height minus data value }) .attr("width", 1) .attr("height", (d,i)=> d*200 + 1) .style("fill", "black" ) } yield svg.node(); }36:T9f2,{ var svg = d3.select(DOM.svg(1000, 1000)) const svg1 = svg.append("g") const svg2 = svg.append("g") const svg3 = svg.append("g") const svg7 = svg.append("g") const svg9 = svg.append("g") const svg12 = svg.append("g") if((b2 == 'Auto Randomize') || (b3 == 'Auto Randomize')){ svg1.selectAll("rect") .data(array1_auto) .join("rect") .attr("x", (d,i)=> 30 + 3*i) .attr("y", function(d) { return 150 - d*200 + 1; //Height minus data value }) .attr("width", 2) .attr("height", (d,i)=> d*200 + 1) .style("fill", (d,i) => d3.interpolateYlGnBu(d*1.8 + 0.1) ) svg2.selectAll("rect") .data(array2_auto) .join("rect") .attr("x", (d,i)=> 30 + 3*i) .attr("y", function(d) { return 300 - d*200+1; //Height minus data value }) .attr("width", 2) .attr("height", (d,i)=> d*200 + 1) .style("fill", (d,i) => d3.interpolateYlGnBu(d*1.8 + 0.1) ) svg3.selectAll("rect") .data(array3_auto) .join("rect") .attr("x", (d,i)=> 30 + 3*i) .attr("y", function(d) { return 450 - d*200+1; //Height minus data value }) .attr("width", 2) .attr("height", (d,i)=> d*200 + 1) .style("fill", (d,i) => d3.interpolateYlGnBu(d*1.8 + 0.1) ) svg7.selectAll("rect") .data(array7_auto) .join("rect") .attr("x", (d,i)=> 30 + 3*i) .attr("y", function(d) { return 600 - d*200+1; //Height minus data value }) .attr("width", 2) .attr("height", (d,i)=> d*200 + 1) .style("fill", (d,i) => d3.interpolateYlGnBu(d*1.8 + 0.1) ) svg9.selectAll("rect") .data(array9_auto) .join("rect") .attr("x", (d,i)=> 30 + 3*i) .attr("y", function(d) { return 750 - d*200+1; //Height minus data value }) .attr("width", 2) .attr("height", (d,i)=> d*200 + 1) .style("fill", (d,i) => d3.interpolateYlGnBu(d*1.8 + 0.1) ) svg12.selectAll("rect") .data(array12_auto) .join("rect") .attr("x", (d,i)=> 30 + 3*i) .attr("y", function(d) { return 900 - d*200 + 1; //Height minus data value }) .attr("width", 2) .attr("height", (d,i)=> d*200 + 1) .style("fill", (d,i) => d3.interpolateYlGnBu(d*1.8 + 0.1) ) } yield svg.node(); }37:T857,stackedchart = { const svg = d3.select(DOM.svg(1000, 450)); let bars = svg.append("g").attr("transform", "translate(0, 0)"); svg .call(stackedxaxistitle) .call(stackedyaxistitle) createTooltip(); svg.append("g").call(stackedxAxis); svg.append("g").call(stackedyAxis); let categories = bars.selectAll(".bar") .data(stackedData) .enter() .append("g") .attr("class", "day") .attr("fill", (d,i)=>colorPalette(1.8*stackedData[i].key + 0.1)); categories .selectAll("rect") .data(function(d) { return d; }) .enter() .append("rect") .attr("x", (d, i) => stackedx(i+1)+constant) .attr("y", d => { return d[1] !== d[0] ? stackedy(d[1]) : 0; }) .attr("rx", "3") .attr("ry", "3") .attr("width", stackedx.bandwidth()) .attr("height", d => { return d[1] !== d[0] ? stackedy(d[0]) - stackedy(d[1]) : 0; }) .on("mouseenter", (d, i, nodes) => { let tooltip = d3.select("#tooltip"); tooltip.style("opacity", 1); let keys = Object.keys(data[0]); let legend = keys.map((k,i) => { if(d.data[k]!=0){ let color = colorPalette(1.8*k+0.1);//colorPalette(i/10) return `

${k}: ${d.data[k]}

`} }).reverse().join("\n"); d3.select("#tooltip-text").html(`

` + legend + `

`); let barPos = nodes[i].getBoundingClientRect(); let tooltipWidth = tooltip.node().getBoundingClientRect().width; tooltip .style("left", ((barPos.x + (barPos.width / 2)) - (tooltipWidth / 2)) + "px") .style("top", (d3.event.pageY - 160) + "px"); }) .on("mouseleave", () => { console.log("LEAVE"); d3.select("#tooltip").style("opacity", 0); }); return svg.node(); }38:T492, createTooltip = () => { let tooltipWrapper = d3.select("body") .append("div") .attr("id", "tooltip") .style("opacity", "0") .style("pointer-events", "none") .style("position", "absolute") .style("transition", "all 0.1s ease-out"); tooltipWrapper.append("div") .attr("class", "tooltip") .attr("id", "tooltip-text") .attr("style", `background: #fff; z-index: 10; display: inline-block; pointer-events: none; text-align: left; padding: 0.6em 2em; padding-left: 7px; padding-right: 7px; white-space: nowrap; font: 12px sans-serif; background: white; border-radius: 8px;` ); tooltipWrapper.append("div") .attr("style", `position: absolute; bottom: 0; left: 50%; width: 13px; height: 13px; background: white; border: 1px solid #ddd; border-top-color: transparent; border-left-color: transparent; transform: translate(-50%, 50%) rotate(45deg); transform-origin: center center; z-index: 10;` ) } 39:Td6b,data = (() => { let dataset = []; dataset[0] = {0: 907, 0.042:0, 0.045:0, 0.05:0, 0.056:0, 0.063:0, 0.071:0, 0.083:0, 0.091:0, 0.1:0, 0.111:0, 0.125:0, 0.136:0, 0.143:0, 0.15:0, 0.167: 0, 0.182:0, 0.188:0, 0.2:0, 0.208:0, 0.214:0, 0.222:0, 0.227:0, 0.25:0 , 0.286:0, 0.3:0, 0.333:0, 0.375:0, 0.4:0, 0.5: 93} dataset[1] = {0: 806, 0.042:0, 0.045:0, 0.05:0, 0.056:0, 0.063:0, 0.071:0, 0.083:0, 0.091:0, 0.1:0, 0.111:0, 0.125:0, 0.136:0, 0.143:0, 0.15:0, 0.167: 0, 0.182:0, 0.188:0, 0.2:0, 0.208:0, 0.214:0, 0.222:0, 0.227:0, 0.25:185 , 0.286:0, 0.3:0, 0.333:0, 0.375:0, 0.4:0, 0.5: 9} dataset[2] = {0: 698, 0.042:0, 0.045:0, 0.05:0, 0.056:0, 0.063:0, 0.071:0, 0.083:0, 0.091:0, 0.1:0, 0.111:0, 0.125:0, 0.136:0, 0.143:0, 0.15:0, 0.167: 278, 0.182:0, 0.188:0, 0.2:0, 0.208:0, 0.214:0, 0.222:0, 0.227:0, 0.25:0 , 0.286:0, 0.3:0, 0.333:22, 0.375:0, 0.4:0, 0.5: 2} dataset[3] = {0: 618, 0.042:0, 0.045:0, 0.05:0, 0.056:0, 0.063:0, 0.071:0, 0.083:0, 0.091:0, 0.1:0, 0.111:0, 0.125:324, 0.136:0, 0.143:0, 0.15:0, 0.167: 0, 0.182:0, 0.188:0, 0.2:0, 0.208:0, 0.214:0, 0.222:0, 0.227:0, 0.25:51, 0.286:0, 0.3:0, 0.333:0, 0.375:6, 0.4:0, 0.5: 1} dataset[4] = {0: 569, 0.042:0, 0.045:0, 0.05:0, 0.056:0, 0.063:0, 0.071:0, 0.083:0, 0.091:0, 0.1:339, 0.111:0, 0.125:0, 0.136:0, 0.143:0, 0.15:0, 0.167: 0, 0.182:0, 0.188:0, 0.2:75, 0.208:0, 0.214:0, 0.222:0, 0.227:0, 0.25:0 , 0.286:0, 0.3:16, 0.333:0, 0.375:0, 0.4:1, 0.5: 0} dataset[5] = {0: 515, 0.042:0, 0.045:0, 0.05:0, 0.056:0, 0.063:0, 0.071:0, 0.083:368, 0.091:0, 0.1:0, 0.111:0, 0.125:0, 0.136:0, 0.143:0, 0.15:0, 0.167: 88, 0.182:0, 0.188:0, 0.2:0, 0.208:0, 0.214:0, 0.222:0, 0.227:0, 0.25:26 , 0.286:0, 0.3:0, 0.333:3, 0.375:0, 0.4:0, 0.5: 0} dataset[6] = {0: 455, 0.042:0, 0.045:0, 0.05:0, 0.056:0, 0.063:0, 0.071:396, 0.083:0, 0.091:0, 0.1:0, 0.111:0, 0.125:0, 0.136:0, 0.143:115, 0.15:0, 0.167: 0, 0.182:0, 0.188:0, 0.2:0, 0.208:0, 0.214:23, 0.222:0, 0.227:0, 0.25:0 , 0.286:11, 0.3:0, 0.333:0, 0.375:0, 0.4:0, 0.5: 0} dataset[7] = {0: 392, 0.042:0, 0.045:0, 0.05:0, 0.056:0, 0.063:420, 0.071:0, 0.083:0, 0.091:0, 0.1:0, 0.111:0, 0.125:143, 0.136:0, 0.143:0,0.15:0, 0.167: 0, 0.182:0, 0.188:33, 0.2:0, 0.208:0, 0.214:0, 0.222:0, 0.227:0, 0.25:11 , 0.286:0, 0.3:1, 0.333:0, 0.375:0, 0.4:0, 0.5: 0} dataset[8] = {0: 390, 0.042:0, 0.045:0, 0.05:0, 0.056:422, 0.063:0, 0.071:0, 0.083:0, 0.091:0, 0.1:0, 0.111:143, 0.125:0, 0.136:0, 0.143:0, 0.15:0, 0.167: 33, 0.182:0, 0.188:0, 0.2:0, 0.208:0, 0.214:0, 0.222:11, 0.227:0, 0.25:0 , 0.286:1, 0.3:0, 0.333:0, 0.375:0, 0.4:0, 0.5: 0} dataset[9] = {0: 348, 0.042:0, 0.045:0, 0.05:430, 0.056:0, 0.063:0, 0.071:0, 0.083:0, 0.091:0, 0.1:158, 0.111:0, 0.125:0, 0.136:0, 0.143:0, 0.15:48, 0.167: 0, 0.182:0, 0.188:0, 0.2:13, 0.208:0, 0.214:0, 0.222:0, 0.227:0, 0.25:3 , 0.286:0, 0.3:0, 0.333:0, 0.375:0, 0.4:0, 0.5: 0} dataset[10] = {0: 311, 0.042:0, 0.045:422, 0.05:0, 0.056:0, 0.063:0, 0.071:0, 0.083:0, 0.091:189, 0.1:0, 0.111:0, 0.125:0, 0.136:56, 0.143:0, 0.15:0, 0.167: 0, 0.182:18, 0.188:0, 0.2:0, 0.208:0, 0.214:0, 0.222:0, 0.227:4, 0.25:0 , 0.286:0, 0.3:0, 0.333:0, 0.375:0, 0.4:0, 0.5: 0} dataset[11] = {0: 282, 0.042:415, 0.045:0, 0.05:0, 0.056:0, 0.063:0, 0.071:0, 0.083:207, 0.091:0, 0.1:0, 0.111:0, 0.125:68, 0.136:0, 0.143:0, 0.15:0, 0.167: 23, 0.182:0, 0.188:0, 0.2:0, 0.208:4, 0.214:0, 0.222:0, 0.227:0, 0.25:1 , 0.286:0, 0.3:0, 0.333:0, 0.375:0, 0.4:0, 0.5: 0} return dataset; })();3a:T4fc,chart_tot = { var svg = d3.select(DOM.svg(1000,250)) const svg1 = svg.append("g") const svg2 = svg.append("g") const svg3 = svg.append("g") const svg12 = svg.append("g") if((b2 == 'Auto Randomize')||(b3 == 'Auto Randomize')){ svg1.selectAll("rect") .data(arrayauto1) .join("rect") .attr("x", (d,i)=> 30 + 20*i) .attr("y", function(d) { return 250 - d/4; //Height minus data value }) .attr("width", 10) .attr("height", (d,i)=> d/4) .style("fill", "steelblue" ) svg3.selectAll("rect") .data(arrayauto3) .join("rect") .attr("x", (d,i)=> 400 + 20*i) .attr("y", function(d) { return 250 - d/4; //Height minus data value }) .attr("width", 10) .attr("height", (d,i)=> d/4) .style("fill", "steelblue" ) svg12.selectAll("rect") .data(arrayauto12) .join("rect") .attr("x", (d,i)=> 700 + 20*i) .attr("y", function(d) { return 250 - d/4; //Height minus data value }) .attr("width", 10) .attr("height", (d,i)=> d/4) .style("fill", "steelblue" ) } yield svg.node(); }3b:T4c5, countFreq1 ={ if((b2 == 'Auto Randomize')||(b3 == 'Auto Randomize')){ var cnt1 = 0; var cnt2 = 0; var cnt3 = 0; var cnt4 = 0; var cnt5 = 0; var cnt6 = 0; var cnt7 = 0; var cnt8 = 0; var cnt9 = 0; var cnt10 = 0; for (var i = 0; i < array1_auto.length; i++) { while (arrayauto1.length) { arrayauto1.pop(); } //clear array switch (array1_auto[i]){ case 0: cnt1++; break; case 0.041666666666666664: cnt4++; break; case 0.08333333333333333: cnt3++; break; case 0.125: cnt5++; break; case 0.16666666666666666: cnt6++; break; case 0.20833333333333334: cnt7++; break; case 0.25: cnt8++; break; case 0.2916666666666667: cnt9++; break; case 0.3333333333333333: cnt10++; break; case 0.5: cnt2++; break; } } arrayauto1.push(cnt1); arrayauto1.push(cnt4); arrayauto1.push(cnt3); arrayauto1.push(cnt5); arrayauto1.push(cnt6); arrayauto1.push(cnt7); arrayauto1.push(cnt8); arrayauto1.push(cnt9); arrayauto1.push(cnt10); arrayauto1.push(cnt2); } }3c:T4c4,countFreq3 ={ if((b2 == 'Auto Randomize')||(b3 == 'Auto Randomize')){ var cnt1 = 0; var cnt2 = 0; var cnt3 = 0; var cnt4 = 0; var cnt5 = 0; var cnt6 = 0; var cnt7 = 0; var cnt8 = 0; var cnt9 = 0; var cnt10 = 0; for (var i = 0; i < array3_auto.length; i++) { while (arrayauto3.length) { arrayauto3.pop(); } //clear array switch (array3_auto[i]){ case 0: cnt1++; break; case 0.041666666666666664: cnt4++; break; case 0.08333333333333333: cnt3++; break; case 0.125: cnt5++; break; case 0.16666666666666666: cnt6++; break; case 0.20833333333333334: cnt7++; break; case 0.25: cnt8++; break; case 0.2916666666666667: cnt9++; break; case 0.3333333333333333: cnt10++; break; case 0.5: cnt2++; break; } } arrayauto3.push(cnt1); arrayauto3.push(cnt4); arrayauto3.push(cnt3); arrayauto3.push(cnt5); arrayauto3.push(cnt6); arrayauto3.push(cnt7); arrayauto3.push(cnt8); arrayauto3.push(cnt9); arrayauto3.push(cnt10); arrayauto3.push(cnt2); } }3d:T4d3,countFreq12 ={ if((b2 == 'Auto Randomize')||(b3 == 'Auto Randomize')){ var cnt1 = 0; var cnt2 = 0; var cnt3 = 0; var cnt4 = 0; var cnt5 = 0; var cnt6 = 0; var cnt7 = 0; var cnt8 = 0; var cnt9 = 0; var cnt10 = 0; for (var i = 0; i < array12_auto.length; i++) { while (arrayauto12.length) { arrayauto12.pop(); } //clear array switch (array12_auto[i]){ case 0: cnt1++; break; case 0.041666666666666664: cnt4++; break; case 0.08333333333333333: cnt3++; break; case 0.125: cnt5++; break; case 0.16666666666666666: cnt6++; break; case 0.20833333333333334: cnt7++; break; case 0.25: cnt8++; break; case 0.2916666666666667: cnt9++; break; case 0.3333333333333333: cnt10++; break; case 0.5: cnt2++; break; } } arrayauto12.push(cnt1); arrayauto12.push(cnt4); arrayauto12.push(cnt3); arrayauto12.push(cnt5); arrayauto12.push(cnt6); arrayauto12.push(cnt7); arrayauto12.push(cnt8); arrayauto12.push(cnt9); arrayauto12.push(cnt10); arrayauto12.push(cnt2); } }3e:T1242,determine_autorandom = { var non_viable; var non_viable2; var non_viable3; var non_viable4; var non_viable5; var non_viable6; var non_viable7; var non_viable8; var non_viable9; var non_viable10; var non_viable11; var non_viable12; if((b2 == 'Auto Randomize')||(b3 == 'Auto Randomize')){ while (array1_auto.length) { array1_auto.pop(); } //clear array while (array2_auto.length) { array2_auto.pop(); } //clear array while (array3_auto.length) { array3_auto.pop(); } //clear array while (array4_auto.length) { array4_auto.pop(); } //clear array while (array5_auto.length) { array5_auto.pop(); } //clear array while (array6_auto.length) { array6_auto.pop(); } //clear array while (array7_auto.length) { array7_auto.pop(); } //clear array while (array8_auto.length) { array8_auto.pop(); } //clear array while (array9_auto.length) { array9_auto.pop(); } //clear array while (array10_auto.length) { array10_auto.pop(); } //clear array while (array11_auto.length) { array11_auto.pop(); } //clear array while (array12_auto.length) { array12_auto.pop(); } //clear array for(var i=0; i<1000; i++){ var cnt = 0; var cnt2 = 0; var cnt3 = 0; var cnt4 = 0; var cnt5 = 0; var cnt6 = 0; var cnt7 = 0; var cnt8 = 0; var cnt9 = 0; var cnt10 = 0; var cnt11 = 0; var cnt12 = 0; var a = array.sample(); var b = array.sample(); var c = array.sample(); var d = array.sample(); var e = array.sample(); var f = array.sample(); var g = array.sample(); var h = array.sample(); var j = array.sample(); var k = array.sample(); var l = array.sample(); var m = array.sample(); if(a == 3){cnt++;cnt2++;cnt3++;cnt4++;cnt5++;cnt6++;cnt7++;cnt8++;cnt9++;cnt10++;cnt11++;cnt12++;} else if(a == 4){cnt++;cnt2++;cnt3++;cnt4++;cnt5++;cnt6++;cnt7++;cnt8++;cnt9++;cnt10++;cnt11++;cnt12++;} non_viable = cnt / (1*2) array1_auto.push(non_viable); if(b == 3){cnt2++;cnt3++;cnt4++;cnt5++;cnt6++;cnt7++;cnt8++;cnt9++;cnt10++;cnt11++;cnt12++;} else if(b == 4){cnt2++;cnt3++;cnt4++;cnt5++;cnt6++;cnt7++;cnt8++;cnt9++;cnt10++;cnt11++;cnt12++;} non_viable2 = cnt2 / (2*2) array2_auto.push(non_viable2); if(c == 3){cnt3++;cnt4++;cnt5++;cnt6++;cnt7++;cnt8++;cnt9++;cnt10++;cnt11++;cnt12++;} else if(c == 4){cnt3++;cnt4++;cnt5++;cnt6++;cnt7++;cnt8++;cnt9++;cnt10++;cnt11++;cnt12++;} non_viable3 = cnt3 / (3*2) array3_auto.push(non_viable3); if(d == 3){cnt4++;cnt5++;cnt6++;cnt7++;cnt8++;cnt9++;cnt10++;cnt11++;cnt12++;} else if(d == 4){cnt4++;cnt5++;cnt6++;cnt7++;cnt8++;cnt9++;cnt10++;cnt11++;cnt12++;} non_viable4 = cnt4 / (4*2) array4_auto.push(non_viable4); if(e == 3){cnt5++;cnt6++;cnt7++;cnt8++;cnt9++;cnt10++;cnt11++;cnt12++;} else if(e == 4){cnt5++;cnt6++;cnt7++;cnt8++;cnt9++;cnt10++;cnt11++;cnt12++;} non_viable5 = cnt5 / (5*2) array5_auto.push(non_viable5); if(f == 3){cnt6++;cnt7++;cnt8++;cnt9++;cnt10++;cnt11++;cnt12++;} else if(f == 4){cnt6++;cnt7++;cnt8++;cnt9++;cnt10++;cnt11++;cnt12++;} non_viable6 = cnt6 / (6*2) array6_auto.push(non_viable6); if(g == 3){cnt7++;cnt8++;cnt9++;cnt10++;cnt11++;cnt12++;} else if(g == 4){cnt7++;cnt8++;cnt9++;cnt10++;cnt11++;cnt12++;} non_viable7 = cnt7 / (7*2) array7_auto.push(non_viable7); if(h == 3){cnt8++;cnt9++;cnt10++;cnt11++;cnt12++;} else if(h == 4){cnt8++;cnt9++;cnt10++;cnt11++;cnt12++;} non_viable8 = cnt8 / (8*2) array8_auto.push(non_viable8); if(i == 3){cnt9++;cnt10++;cnt11++;cnt12++;} else if(i == 4){cnt9++;cnt10++;cnt11++;cnt12++;} non_viable9 = cnt9 / (9*2) array9_auto.push(non_viable9); if(j == 3){cnt10++;cnt11++;cnt12++;} else if(j == 4){;cnt10++;cnt11++;cnt12++;} non_viable10 = cnt10 / (10*2) array10_auto.push(non_viable10); if(k == 3){cnt11++;cnt12++;} else if(k == 4){cnt11++;cnt12++;} non_viable11 = cnt11 / (11*2) array11_auto.push(non_viable11); if(l == 3){cnt12++;} else if(l == 4){cnt12++;} non_viable12 = cnt12 / (12*2) array12_auto.push(non_viable12); } } }3f:T950,determine_random = { var non_viable; var cnt = 0; var a = array.sample();console.log(a) var b = array.sample();console.log(b) var c = array.sample();console.log(c) var d = array.sample();console.log(d) var e = array.sample();console.log(e) var f = array.sample();console.log(f) var g = array.sample();console.log(g) var h = array.sample();console.log(h) var i = array.sample();console.log(i) var j = array.sample();console.log(j) var k = array.sample();console.log(k) var l = array.sample();console.log(l) if(b1 == 'Randomize'){ switch(drone_num_random) { case 1: if(a == 3){cnt++;} else if(a == 4){cnt++;} non_viable = cnt / (drone_num_random*2) array1.push(non_viable); return non_viable; break; case 2: if(a == 3){cnt++;} else if(a == 4){cnt++;} if(b == 3){cnt++;} else if(b == 4){cnt++;} non_viable = cnt / (drone_num_random*2) array2.push(non_viable); return non_viable; break; case 3: if(a == 3){cnt++;} else if(a == 4){cnt++;} if(b == 3){cnt++;} else if(b == 4){cnt++;} if(c == 3){cnt++;} else if(c == 4){cnt++;} return non_viable = cnt / (drone_num_random*2) break; case 12: if(a == 3){cnt++;} else if(a == 4){cnt++;} if(b == 3){cnt++;} else if(b == 4){cnt++;} if(c == 3){cnt++;} else if(c == 4){cnt++;} if(d == 3){cnt++;} else if(d == 4){cnt++;} if(e == 3){cnt++;} else if(e == 4){cnt++;} if(f == 3){cnt++;} else if(f == 4){cnt++;} if(g == 3){cnt++;} else if(g == 4){cnt++;} if(h == 3){cnt++;} else if(h == 4){cnt++;} if(i == 3){cnt++;} else if(i == 4){cnt++;} if(j == 3){cnt++;} else if(j == 4){cnt++;} if(k == 3){cnt++;} else if(k == 4){cnt++;} if(l == 3){cnt++;} else if(l == 4){cnt++;} ;console.log(cnt) non_viable = cnt / (drone_num_random*2) array12.push(non_viable); return non_viable; break; } } }40:T543,prob8 = { var non_viable_calc_2_avg = 0; var non_viable_calc_2 = 0; for (var count=1; count<2000; count++){ var cnt = 0; var a = array.sample();console.log(a) var b = array.sample();console.log(b) var c = array.sample();console.log(a) var d = array.sample();console.log(b) var e = array.sample();console.log(a) var f = array.sample();console.log(b) var g = array.sample();console.log(a) var h = array.sample();console.log(b) if(a == 3){cnt++;} else if(a == 4){cnt++;} if(b == 3){cnt++;} else if(b == 4){cnt++;} if(c == 3){cnt++;} else if(c == 4){cnt++;} if(d == 3){cnt++;} else if(d == 4){cnt++;} if(e == 3){cnt++;} else if(e == 4){cnt++;} if(f == 3){cnt++;} else if(f == 4){cnt++;} if(g == 3){cnt++;} else if(g == 4){cnt++;} if(h == 3){cnt++;} else if(h == 4){cnt++;} non_viable_calc_2 = cnt / (8*2); non_viable_calc_2_avg = (non_viable_calc_2_avg + non_viable_calc_2); } return non_viable_calc_2_avg / (count-1) }41:T4ea,function select_drone_num(config = {}) { let { value: formValue, title, description, disabled, submit, multiple, size, options } = Array.isArray(config) ? { options: config } : config; options = options.map(o => typeof o === "object" ? o : { value: o, label: o } ); const form = input({ type: "select", title: "Numbers of Drones Mated with the Queen", description, submit, attributes: { disabled }, getValue: input => { const selected = Array.prototype.filter .call(input.options, i => i.selected) .map(i => i.value); return multiple ? selected : selected[0]; }, form: html` ` }); form.output.remove(); return form; }42:T4bf,function select(config = {}) { let { value: formValue, title, description, disabled, submit, multiple, size, options } = Array.isArray(config) ? { options: config } : config; options = options.map(o => typeof o === "object" ? o : { value: o, label: o } ); const form = input({ type: "select", title: "Drone", description, submit, attributes: { disabled }, getValue: input => { const selected = Array.prototype.filter .call(input.options, i => i.selected) .map(i => i.value); return multiple ? selected : selected[0]; }, form: html` ` }); form.output.remove(); return form; }43:T906,function input(config) { let { form, type = "text", attributes = {}, action, getValue, title, description, format, display, submit, options } = config; const wrapper = html`

`; if (!form) form = html``; Object.keys(attributes).forEach(key => { const val = attributes[key]; if (val != null) form.input.setAttribute(key, val); }); if (submit) form.append( html`` ); form.append( html`` ); if (title) form.prepend( html`

${title}

` ); if (description) form.append( html`

${description}

` ); if (format) format = typeof format === "function" ? format : d3format.format(format); if (action) { action(form); } else { const verb = submit ? "onsubmit" : type == "button" ? "onclick" : type == "checkbox" || type == "radio" ? "onchange" : "oninput"; form[verb] = e => { e && e.preventDefault(); const value = getValue ? getValue(form.input) : form.input.value; if (form.output) { const out = display ? display(value) : format ? format(value) : value; if (out instanceof window.Element) { while (form.output.hasChildNodes()) { form.output.removeChild(form.output.lastChild); } form.output.append(out); } else { form.output.value = out; } } form.value = value; if (verb !== "oninput") form.dispatchEvent(new CustomEvent("input", { bubbles: true })); }; if (verb !== "oninput") wrapper.oninput = e => e && e.stopPropagation() && e.preventDefault(); if (verb !== "onsubmit") form.onsubmit = e => e && e.preventDefault(); form[verb](); } while (form.childNodes.length) { wrapper.appendChild(form.childNodes[0]); } form.append(wrapper); return form; }44:[{"id":"941cbbb975bcb60f476797ab4758f3559780d2182c500bbaf6c44b4f9140ce2004a6b150fa327262c403d70d1e548836c6c1153308c45b6f6113d4e7371f5bbe","href":"https://static.observableusercontent.com/files/941cbbb975bcb60f476797ab4758f3559780d2182c500bbaf6c44b4f9140ce2004a6b150fa327262c403d70d1e548836c6c1153308c45b6f6113d4e7371f5bbe","name":"Project iOn-19.jpg","type":"image/jpeg","lastModified":1603044739817.564,"size":214318},{"id":"85cb96575b95badbd74f2de3ad4bc5d060e915cbc5350c2db1a4c61e16f2d6954bd76815ecba173fe2257e9337ace5c7af124f449e202c5b0d201b1de83f01bc","href":"https://static.observableusercontent.com/files/85cb96575b95badbd74f2de3ad4bc5d060e915cbc5350c2db1a4c61e16f2d6954bd76815ecba173fe2257e9337ace5c7af124f449e202c5b0d201b1de83f01bc","name":"non viable percentage graph@1.jpg","type":"image/jpeg","lastModified":1602787723289.098,"size":140456}] 2f:{"title":"Honey Bees: Non-Viable and Viable Brood","cells":[{"id":0,"value":"md`# Honey Bees: Non-Viable and Viable Brood`","pinned":false,"hidden":false,"mode":"ojs"},{"id":562,"value":"md`A honey bee queen mates with 12 drone bees on average. Choose the number of drones the queen mates with, and determine each drone's sex allele. Click submit to see the percentage of non-viable brood (diploid males) in the offsprings.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1184,"value":"md`http://www.glenn-apiaries.com/genetics.html`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1198,"value":"md`\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"md`Suppose the queen has sex alleles S3 and S4:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":117,"value":"viewof drone_num = \n slider({\n min: 1, \n max: 12, \n step: 1, \n value: 1, \n title: \"Number of Drones Mated with the Queen\",\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":463,"value":"md`Each drone's sex allele:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":419,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":428,"value":"viewof b = button()","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":543,"value":"md`## Random Cases`","pinned":false,"hidden":false,"mode":"ojs"},{"id":536,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":556,"value":"viewof drone_num_random = \n slider({\n min: 1, \n max: 12, \n step: 1, \n value: 1, \n title: \"Number of Drones Mated with the Queen\",\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":607,"value":"viewof b1 = button1()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1134,"value":"md`## Randomize Record`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1130,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1155,"value":"md`## 0 to 0.5 probability count`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1233,"value":"md`I want to make a chart that records the times that occur for each non-viable brood proportion (0, 0.042...., 0.5) for each number of drones (1 ~ 12).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1247,"value":"viewof b2 = button2()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1346,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":1672,"value":"md`## Below is the histogram of the occurences of each proportion of non-viable brood when a queen bee mates with 1 to 12 drones.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1584,"value":"md`https://observablehq.com/@giorgiofighera/histogram-with-tooltips-and-bars-highlighted-on-mouse-over`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2176,"value":"md`You can observe that the max number of non-viable brood proportion gets smaller as the number of drones mated gets higher, meaning that the more drones the queen mates with, the less non-viable brood bees will be born and removed. Therefore, the bee community maintains a higher population.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2196,"value":"md`### How to Interpret:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2189,"value":"md`This auto randomize simulator runs 1000 test points. Take \"1 drone\" for example. The simulator simulates when there are 1000 queens, each mate with a drone. Each mating will return a number of the proportion of non-viable brood in its generation (either 0 or 0.5 in this case). The simulator collects all 1000 occurences and categorize the data based on the non-viable brood proportion to form the histogram. ` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":1714,"value":"md`### X: non-viable brood proportion in a generation\n ### Y: occurrences`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2185,"value":"viewof b3 = button2()","pinned":false,"hidden":false,"mode":"ojs"},{"id":2098,"value":"md`### 1 drone`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1859,"value":"chart1 = {\n const svg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, width, height]);\n\n svg\n .append(\"g\")\n .selectAll(\"rect\")\n .data(bins1)\n .join(\"rect\")\n .attr(\"fill\", d => d3.interpolateYlGnBu(d[0]*1.8 + 0.1))\n .attr(\"x\", d => x(d[0])) //+1\n .attr(\"width\", d => Math.max(0, x(d.x1) - x(d.x0)))\n .attr(\"y\", d => y(d.length))\n .attr(\"height\", d => y(0) - y(d.length));\n\n svg.append(\"g\").call(xAxis);\n\n svg.append(\"g\").call(yAxis);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2104,"value":"md`### 2 drones`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1967,"value":"chart2 = {\n const svg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, width, height]);\n\n svg\n .append(\"g\")\n .selectAll(\"rect\")\n .data(bins2)\n .join(\"rect\")\n .attr(\"fill\", d => d3.interpolateYlGnBu(d[0]*1.8 + 0.1))\n .attr(\"x\", d => x(d[0]))\n .attr(\"width\", d => Math.max(0, x(d.x1) - x(d.x0)))\n .attr(\"y\", d => y(d.length))\n .attr(\"height\", d => y(0) - y(d.length));\n\n svg.append(\"g\").call(xAxis);\n\n svg.append(\"g\").call(yAxis);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2107,"value":"md`### 3 drones`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1990,"value":"chart3 = {\n const svg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, width, height]);\n\n svg\n .append(\"g\")\n .selectAll(\"rect\")\n .data(bins3)\n .join(\"rect\")\n .attr(\"fill\", d => d3.interpolateYlGnBu(d[0]*1.8 + 0.1))\n .attr(\"x\", d => x(d[0])) //+1\n .attr(\"width\", d => Math.max(0, x(d.x1) - x(d.x0)))\n .attr(\"y\", d => y(d.length))\n .attr(\"height\", d => y(0) - y(d.length));\n\n svg.append(\"g\").call(xAxis);\n\n svg.append(\"g\").call(yAxis);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2233,"value":"0.167*278+22*0.333","pinned":false,"hidden":false,"mode":"ojs"},{"id":2108,"value":"md`### 4 drones`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2074,"value":"chart4 = {\n const svg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, width, height]);\n\n svg\n .append(\"g\")\n .selectAll(\"rect\")\n .data(bins4)\n .join(\"rect\")\n .attr(\"fill\", d => d3.interpolateYlGnBu(d[0]*1.8 + 0.1))\n .attr(\"x\", d => x(d[0]) ) //- Math.max(0, x(d.x1) - x(d.x0))/2)\n .attr(\"width\", d => Math.max(0, x(d.x1) - x(d.x0)))\n .attr(\"y\", d => y(d.length))\n .attr(\"height\", d => y(0) - y(d.length));\n\n svg.append(\"g\").call(xAxis);\n\n svg.append(\"g\").call(yAxis);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2110,"value":"md`### 5 drones`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2075,"value":"chart5 = {\n const svg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, width, height]);\n\n svg\n .append(\"g\")\n .selectAll(\"rect\")\n .data(bins5)\n .join(\"rect\")\n .attr(\"fill\", d => d3.interpolateYlGnBu(d[0]*1.8 + 0.1))\n .attr(\"x\", d => x(d[0])) //+1\n .attr(\"width\", d => Math.max(0, x(d.x1) - x(d.x0)))\n .attr(\"y\", d => y(d.length))\n .attr(\"height\", d => y(0) - y(d.length));\n\n svg.append(\"g\").call(xAxis);\n\n svg.append(\"g\").call(yAxis);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2112,"value":"md`### 6 drones`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2078,"value":"chart6 = {\n const svg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, width, height]);\n\n svg\n .append(\"g\")\n .selectAll(\"rect\")\n .data(bins6)\n .join(\"rect\")\n .attr(\"fill\", d => d3.interpolateYlGnBu(d[0]*1.8 + 0.1))\n .attr(\"x\", d => x(d[0])) //+1\n .attr(\"width\", d => Math.max(0, x(d.x1) - x(d.x0)))\n .attr(\"y\", d => y(d.length))\n .attr(\"height\", d => y(0) - y(d.length));\n\n svg.append(\"g\").call(xAxis);\n\n svg.append(\"g\").call(yAxis);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2114,"value":"md`### 7 drones`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2079,"value":"chart7 = {\n const svg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, width, height]);\n\n svg\n .append(\"g\")\n .selectAll(\"rect\")\n .data(bins7)\n .join(\"rect\")\n .attr(\"fill\", d => d3.interpolateYlGnBu(d[0]*1.8 + 0.1)) \n .attr(\"x\", d => x(d[0]))//+1\n .attr(\"width\", d => Math.max(0, x(d.x1) - x(d.x0)))\n .attr(\"y\", d => y(d.length))\n .attr(\"height\", d => y(0) - y(d.length));\n\n svg.append(\"g\").call(xAxis);\n\n svg.append(\"g\").call(yAxis);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2116,"value":"md`### 8 drones`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2016,"value":"chart8 = {\n const svg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, width, height]);\n\n svg\n .append(\"g\")\n .selectAll(\"rect\")\n .data(bins8)\n .join(\"rect\")\n .attr(\"fill\", d => d3.interpolateYlGnBu(d[0]*1.8 + 0.1)) \n .attr(\"x\", d => x(d[0]))\n .attr(\"width\", d => Math.max(0, x(d.x1) - x(d.x0)))\n .attr(\"y\", d => y(d.length))\n .attr(\"height\", d => y(0) - y(d.length));\n\n svg.append(\"g\").call(xAxis);\n\n svg.append(\"g\").call(yAxis);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2118,"value":"md`### 9 drones`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2026,"value":"chart9 = {\n const svg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, width, height]);\n\n svg\n .append(\"g\")\n .selectAll(\"rect\")\n .data(bins9)\n .join(\"rect\")\n .attr(\"fill\", d => d3.interpolateYlGnBu(d[0]*1.8 + 0.1))\n .attr(\"x\", d => x(d[0]))\n .attr(\"width\", d => Math.max(0, x(d.x1) - x(d.x0)))\n .attr(\"y\", d => y(d.length))\n .attr(\"height\", d => y(0) - y(d.length));\n\n svg.append(\"g\").call(xAxis);\n\n svg.append(\"g\").call(yAxis);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2120,"value":"md`### 10 drones`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2043,"value":"chart10 = {\n const svg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, width, height]);\n\n svg\n .append(\"g\")\n .selectAll(\"rect\")\n .data(bins10)\n .join(\"rect\")\n .attr(\"fill\", d => d3.interpolateYlGnBu(d[0]*1.8 + 0.1))\n .attr(\"x\", d => x(d[0]))\n .attr(\"width\", d => Math.max(0, x(d.x1) - x(d.x0)))\n .attr(\"y\", d => y(d.length))\n .attr(\"height\", d => y(0) - y(d.length));\n\n svg.append(\"g\").call(xAxis);\n\n svg.append(\"g\").call(yAxis);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2122,"value":"md`### 11 drones`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2002,"value":"chart11 = {\n const svg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, width, height]);\n\n svg\n .append(\"g\")\n .selectAll(\"rect\")\n .data(bins11)\n .join(\"rect\")\n .attr(\"fill\", d => d3.interpolateYlGnBu(d[0]*1.8 + 0.1))\n .attr(\"x\", d => x(d[0]))\n .attr(\"width\", d => Math.max(0, x(d.x1) - x(d.x0)))\n .attr(\"y\", d => y(d.length))\n .attr(\"height\", d => y(0) - y(d.length));\n\n svg.append(\"g\").call(xAxis);\n\n svg.append(\"g\").call(yAxis);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2124,"value":"md`### 12 drones`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1868,"value":"chart12 = {\n const svg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, width, height]);\n\n svg\n .append(\"g\")\n // .attr(\"fill\", \"steelblue\")\n .selectAll(\"rect\")\n .data(bins12)\n .join(\"rect\")\n .attr(\"fill\", d => d3.interpolateYlGnBu(d[0]*1.8 + 0.1))\n .attr(\"x\", function funcx(d){\n var q = x(d[0]);\n return q})\n .attr(\"width\", d => Math.max(0, x(d.x1) - x(d.x0)))\n //.attr(\"y\", d => y(d.length))//arrr.push(d.length);\n .attr(\"y\", function funcy(d){\n var q = y(d.length);\n arry.push(d.length)\n return q;\n })\n .attr(\"height\", d => y(0) - y(d.length));\n\n\n svg.append(\"g\").call(xAxis);\n\n svg.append(\"g\").call(yAxis);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2491,"value":"md`### Stacked Bar Graph`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2438,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":2577,"value":"constant = 50;","pinned":false,"hidden":false,"mode":"ojs"},{"id":2545,"value":"stackedyaxistitle = svg => svg.append(\"text\")\n .attr(\"x\", stackedmargin.left)\n .attr(\"y\", -20)\n .attr(\"text-anchor\", \"middle\")\n .attr(\"transform\",\"translate (40 200) rotate(-90)\")\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"stroke\", \"Black\")\n .text(\"Occurances of Each Probability\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":2510,"value":"stackedxaxistitle = svg => svg.append(\"text\")\n .attr(\"x\", (stackedwidth / 2))\n .attr(\"text-anchor\", \"middle\")\n .attr(\"y\", 440)\n .attr(\"stroke\", \"Black\")\n .text(\"Number of Drones Mated\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":2468,"value":"stackedxAxis = g =>\n g\n .attr(\"transform\", `translate(${constant},${stackedheight - stackedmargin.bottom + 10 })`)\n .call(d3.axisBottom(stackedx)\n //.ticks(width / 80)\n .tickSizeOuter(1))\n\n .call(g => g.select(\".domain\"))\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":2470,"value":"stackedyAxis = g => g\n .attr(\"transform\", `translate(${stackedmargin.left + constant},0)`)\n .call(d3.axisLeft(stackedy))\n .call(g => g.select(\".domain\"))\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":2463,"value":"stackedy = d3.scaleLinear().rangeRound([stackedheight, stackedmargin.top])\n .domain([0,d3.max(data, d => {\n let keys = Object.keys(d);\n let maximum = 0;\n keys.forEach(k => { maximum += d[k]; })\n return maximum\n })]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":2477,"value":"stackedheight = 400;","pinned":false,"hidden":false,"mode":"ojs"},{"id":2475,"value":"stackedmargin = ({\n top: 10,\n right: 10,\n bottom: 10,\n left: 10\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2456,"value":"stackedx = d3.scaleBand().rangeRound([stackedmargin.left, stackedwidth]).domain(data.map((d,i)=>i+1)).padding(padding.x);","pinned":false,"hidden":false,"mode":"ojs"},{"id":2488,"value":"stackedwidth = 700;","pinned":false,"hidden":false,"mode":"ojs"},{"id":2459,"value":"padding = ({x:0.06, y:0})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2452,"value":" colorPalette = d3.interpolateYlGnBu\n//d3.scaleLinear().domain([0, Object.keys(data).length - 1]).range([\"#5dc1ae\", \"#a03d7c\", \"#a2f9ce\"]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":2449,"value":"stackedData = d3.stack().keys(Object.keys(data[0]))(data);","pinned":false,"hidden":false,"mode":"ojs"},{"id":2446,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":2442,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":2496,"value":"md` ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ `","pinned":false,"hidden":false,"mode":"ojs"},{"id":2289,"value":"arry = [];","pinned":false,"hidden":false,"mode":"ojs"},{"id":2235,"value":"0.042*415+207*0.083+0.125*68+0.167*23+4*0.208","pinned":true,"hidden":false,"mode":"ojs"},{"id":1550,"value":"xAxis = g =>\n g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(\n d3\n .axisBottom(x)\n .ticks(width / 80)\n .tickSizeOuter(1)\n )\n .call(g =>\n g\n .append(\"text\")\n .attr(\"x\", width - margin.right)\n .attr(\"y\", -4)\n .attr(\"fill\", \"currentColor\")\n .attr(\"font-weight\", \"bold\")\n .attr(\"text-anchor\", \"end\")\n .text(array1_auto.x)\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":1551,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left },0)`)\n .call(d3.axisLeft(y).ticks(height / 40))\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(array1_auto.y))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1861,"value":"bins1 = {\n if((b2 == 'Auto Randomize')||(b3 == 'Auto Randomize')){\n \n return d3.histogram()\n .domain(x.domain())\n .thresholds(x.ticks(40))\n (array1_auto)}\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1969,"value":"bins2 = {\n if((b2 == 'Auto Randomize')||(b3 == 'Auto Randomize')){\n \n return d3.histogram()\n .domain(x.domain())\n .thresholds(x.ticks(40))\n (array2_auto)}\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1979,"value":"bins3 = {\n if((b2 == 'Auto Randomize')||(b3 == 'Auto Randomize')){\n \n return d3.histogram()\n .domain(x.domain())\n .thresholds(x.ticks(40))\n (array3_auto)}\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2049,"value":"bins4 = {\n if((b2 == 'Auto Randomize')||(b3 == 'Auto Randomize')){\n \n return d3.histogram()\n .domain(x.domain())\n .thresholds(x.ticks(40))\n (array4_auto)}\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2050,"value":"bins5 = {\n if((b2 == 'Auto Randomize')||(b3 == 'Auto Randomize')){\n \n return d3.histogram()\n .domain(x.domain())\n .thresholds(x.ticks(40))\n (array5_auto)}\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2052,"value":"bins6 = {\n if((b2 == 'Auto Randomize')||(b3 == 'Auto Randomize')){\n \n return d3.histogram()\n .domain(x.domain())\n .thresholds(x.ticks(40))\n (array6_auto)}\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2054,"value":"bins7 = {\n if((b2 == 'Auto Randomize')||(b3 == 'Auto Randomize')){\n \n return d3.histogram()\n .domain(x.domain())\n .thresholds(x.ticks(40))\n (array7_auto)}\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2018,"value":"bins8 = {\n if((b2 == 'Auto Randomize')||(b3 == 'Auto Randomize')){\n \n return d3.histogram()\n .domain(x.domain())\n .thresholds(x.ticks(40))\n (array8_auto)}\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2029,"value":"bins9 = {\n if((b2 == 'Auto Randomize')||(b3 == 'Auto Randomize')){\n \n return d3.histogram()\n .domain(x.domain())\n .thresholds(x.ticks(40))\n (array9_auto)}\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2040,"value":"bins10 = {\n if((b2 == 'Auto Randomize')||(b3 == 'Auto Randomize')){\n \n return d3.histogram()\n .domain(x.domain())\n .thresholds(x.ticks(40))\n (array10_auto)}\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2004,"value":"bins11 = {\n if((b2 == 'Auto Randomize')||(b3 == 'Auto Randomize')){\n \n return d3.histogram()\n .domain(x.domain())\n .thresholds(x.ticks(40))\n (array11_auto)}\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2748,"value":"bins12 = {\n if((b2 == 'Auto Randomize')||(b3 == 'Auto Randomize')){\n \n return d3.histogram()\n .domain(x.domain())\n .thresholds(x.ticks(40))\n (array12_auto)}\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2676,"value":"calc_prob = {\n var i,j, exist;\n while (stackedDataX.length) { stackedDataX.pop(); } //clear array\n\n for(i=0; i<12; i++){\n for(j=0; j<31; j++){\n if(ARRAY[i][j].length!=0){\n exist = stackedDataX.includes((Number((ARRAY[i][j][0])).toFixed(3)))\n if(exist == false){\n stackedDataX.push(Number((ARRAY[i][j][0])).toFixed(3))}\n stackedDataX.sort((a, b) => a - b);\n }\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2827,"value":"ARRAY1=[];","pinned":false,"hidden":false,"mode":"ojs"},{"id":2852,"value":"data1 = (() => {\n let dataset = [];\n\n dataset[0] = {0: 907, 0.042:0, 0.045:0, 0.05:0, 0.056:0, 0.063:0, 0.071:0, 0.083:0, 0.091:0, 0.1:0, 0.111:0, 0.125:0, 0.136:0, 0.143:0, 0.15:0, 0.167: 0, 0.182:0, 0.188:0, 0.2:0, 0.208:0, 0.214:0, 0.222:0, 0.227:0, 0.25:0 , 0.286:0, 0.3:0, 0.333:0, 0.375:0, 0.4:0, 0.5: 93}\n dataset[1] = {0: 806, 0.042:0, 0.045:0, 0.05:0, 0.056:0, 0.063:0, 0.071:0, 0.083:0, 0.091:0, 0.1:0, 0.111:0, 0.125:0, 0.136:0, 0.143:0, 0.15:0, 0.167: 0, 0.182:0, 0.188:0, 0.2:0, 0.208:0, 0.214:0, 0.222:0, 0.227:0, 0.25:185 , 0.286:0, 0.3:0, 0.333:0, 0.375:0, 0.4:0, 0.5: 9}\n \n return dataset;\n})();","pinned":true,"hidden":false,"mode":"ojs"},{"id":2857,"value":"A = [[]];","pinned":true,"hidden":false,"mode":"ojs"},{"id":2937,"value":"B = (()=> {\n})()","pinned":true,"hidden":false,"mode":"ojs"},{"id":2817,"value":"calc1 = {\n while(A.lenth){A.pop(); }\n var i,j,k;\n for(i=0; i<1; i++){\n for(j=0; j<31; j++){\n for(k=0; k<29; k++){\n if(Number((ARRAY[i][j][0])).toFixed(3) == parseInt(stackedDataX[k]))\n {\n A[i][stackedDataX[k]] = parseInt(ARRAY[i][k].length)\n }\n }\n }\n }\n\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2881,"value":"Number((ARRAY[0][2][0]))","pinned":true,"hidden":false,"mode":"ojs"},{"id":2899,"value":"stackedDataX[1]","pinned":true,"hidden":false,"mode":"ojs"},{"id":2728,"value":"stackedDataX =[];","pinned":false,"hidden":false,"mode":"ojs"},{"id":2704,"value":"ARRAY = [bins1, bins2, bins3, bins4, bins5, bins6, bins7, bins8, bins9, bins10, bins11, bins12]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1566,"value":"y = d3.scaleLinear()\n .domain([0, d3.max(bins1, d => d.length)]).nice()\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1565,"value":"x = d3.scaleLinear()\n .domain([0,0.6]).nice() //d3.extent(array1_auto)\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1556,"value":"height = 300","pinned":false,"hidden":false,"mode":"ojs"},{"id":1562,"value":"margin = ({top: 20, right: 20, bottom: 30, left: 40})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1743,"value":"styles = html`\n `","pinned":false,"hidden":false,"mode":"ojs"},{"id":1835,"value":"/*tooltip_tot = { //tooltip for the histogram\n \n \n if((b2 == 'Auto Randomize')||(b3 == 'Auto Randomize')){\n \nchart_tot; \n \n \n const tooltip = d3\n .select(\"body\")\n .append(\"div\")\n .attr(\"class\", \"svg-tooltip\")\n .style(\"position\", \"absolute\")\n .style(\"visibility\", \"hidden\");\n\n // select all rect\n d3.selectAll(\"rect\")\n .on(\"mouseover\", function(d) {\n // change the selection style\n d3.select(this)\n .attr('stroke-width', '2')\n .attr(\"stroke\", \"black\");\n // make the tooltip visible and update its text\n tooltip\n .style(\"visibility\", \"visible\")\n .text(`count: ${d}\\n`);\n })\n .on(\"mousemove\", function() {\n tooltip\n .style(\"top\", d3.event.pageY - 10 + \"px\")\n .style(\"left\", d3.event.pageX + 10 + \"px\");\n })\n .on(\"mouseout\", function() {\n // change the selection style\n d3.select(this).attr('stroke-width', '0');\n\n tooltip.style(\"visibility\", \"hidden\");\n });\n }\n}*/","pinned":false,"hidden":false,"mode":"ojs"},{"id":2172,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":1628,"value":"tooltip = { //tooltip for the histogram\n chart12; \n\n const tooltip = d3\n .select(\"body\")\n .append(\"div\")\n .attr(\"class\", \"svg-tooltip\")\n .style(\"position\", \"absolute\")\n .style(\"visibility\", \"hidden\");\n\n // select all rect\n d3.selectAll(\"rect\")\n .on(\"mouseover\", function(d) {\n // change the selection style\n d3.select(this)\n .attr('stroke-width', '2')\n .attr(\"stroke\", \"black\");\n // make the tooltip visible and update its text\n tooltip\n .style(\"visibility\", \"visible\")\n .text(`count: ${d.length}\\nnon-viable: ${Number((d[0]).toFixed(3))}`); //{d[0]}\n })\n .on(\"mousemove\", function() {\n tooltip\n .style(\"top\", d3.event.pageY - 10 + \"px\")\n .style(\"left\", d3.event.pageX + 10 + \"px\");\n })\n .on(\"mouseout\", function() {\n // change the selection style\n d3.select(this).attr('stroke-width', '0');\n\n tooltip.style(\"visibility\", \"hidden\");\n });\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1451,"value":"array1_auto = []","pinned":false,"hidden":false,"mode":"ojs"},{"id":1972,"value":"array2_auto = []","pinned":false,"hidden":false,"mode":"ojs"},{"id":1981,"value":"array3_auto = []","pinned":false,"hidden":false,"mode":"ojs"},{"id":2061,"value":"array4_auto = []","pinned":false,"hidden":false,"mode":"ojs"},{"id":2062,"value":"array5_auto = []","pinned":false,"hidden":false,"mode":"ojs"},{"id":2065,"value":"array6_auto = []","pinned":false,"hidden":false,"mode":"ojs"},{"id":2068,"value":"array7_auto = []","pinned":false,"hidden":false,"mode":"ojs"},{"id":2020,"value":"array8_auto = []","pinned":false,"hidden":false,"mode":"ojs"},{"id":2032,"value":"array9_auto = []","pinned":false,"hidden":false,"mode":"ojs"},{"id":2037,"value":"array10_auto = []","pinned":false,"hidden":false,"mode":"ojs"},{"id":2008,"value":"array11_auto = []","pinned":false,"hidden":false,"mode":"ojs"},{"id":1455,"value":"array12_auto = [];","pinned":false,"hidden":false,"mode":"ojs"},{"id":1380,"value":"arrayauto1 =[]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1997,"value":"arrayauto3 = []","pinned":false,"hidden":false,"mode":"ojs"},{"id":1392,"value":"arrayauto12 = []","pinned":false,"hidden":false,"mode":"ojs"},{"id":1363,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs"},{"id":1995,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs"},{"id":1390,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs"},{"id":1299,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs"},{"id":575,"value":"array = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19]","pinned":false,"hidden":false,"mode":"ojs"},{"id":899,"value":"array1 = []","pinned":false,"hidden":false,"mode":"ojs"},{"id":1121,"value":"array2 = []","pinned":false,"hidden":false,"mode":"ojs"},{"id":1178,"value":"array8 = []","pinned":false,"hidden":false,"mode":"ojs"},{"id":1038,"value":"array12 = []","pinned":false,"hidden":false,"mode":"ojs"},{"id":561,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs"},{"id":997,"value":"md`https://observablehq.com/@thetylerwolf/day-5-our-first-bar-chart`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1224,"value":"md`## Similarities between drones and worker bees`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1230,"value":"md`https://www.youtube.com/watch?v=ZW1K6-PUX20&ab_channel=Nikolay%27sGeneticsLessons`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1219,"value":"md`\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":860,"value":"md`### Hans' equation:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":905,"value":"function prob_of_getting_non_viable_brood(drone_num_random) {\n \n var k = 0;\n var sigma = 0;\n\n for(var i=1; i d.value)","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"arc = d3.arc()\n // After some trial-and-error, half (0.5) of the full radius gives a nice appearance\n // To see a pie chart, just change this to zero\n .innerRadius( 0.5 * 400 / 2 )\n // Outer radius is less than the full radius because our labels will sit outside of the donut\n .outerRadius( 0.85 * 400 / 2 )","pinned":false,"hidden":false,"mode":"ojs"},{"id":441,"value":"function button(config = {}) {\n const {\n value = \"Submit\", title, description, disabled\n } = typeof config === \"string\" ? {value: config} : config;\n const form = input({\n type: \"button\", title, description,\n attributes: {disabled, value}\n });\n form.output.remove();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":553,"value":"function button1(config = {}) {\n const {\n value = \"Randomize\", title, description, disabled\n } = typeof config === \"string\" ? {value: config} : config;\n const form = input({\n type: \"button\", title, description,\n attributes: {disabled, value}\n });\n form.output.remove();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1249,"value":"function button2(config = {}) {\n const {\n value = \"Auto Randomize\", title, description, disabled\n } = typeof config === \"string\" ? {value: config} : config;\n const form = input({\n type: \"button\", title, description,\n attributes: {disabled, value}\n });\n form.output.remove();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"colorScale = {\n\n const colors = [d3.interpolateYlGnBu(0.1), d3.interpolateYlGnBu(determine*1.8 + 0.1)] //[ 'BLUE', 'red']\n \n return d3.scaleOrdinal( USData.map(d => d.type), colors )\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2349,"value":"colorScale_random = {\n\n const colors = [d3.interpolateYlGnBu(0.1), d3.interpolateYlGnBu(determine_random*1.8 + 0.1)] //[ 'BLUE', 'red']\n \n return d3.scaleOrdinal( USData.map(d => d.type), colors )\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2341,"value":"USData.map(d => d.type)","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"labelArcs = d3.arc()\n .innerRadius( 0.95 * 400 / 2 )\n .outerRadius( 0.95 * 400 / 2 )","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"pieArcs = pie( USData )","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"USData = [\n { type: 'viable brood', value: 1 - determine },\n { type: 'non viable brood', value: determine }\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":94,"value":"$41","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"$42","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"$43","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"d3format = require(\"d3-format@1\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"d3 = require(\"d3@5\", \"d3-random@2\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":119,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":126,"value":"columns = (args) => {\n const form = html``\n form.value = {}\n\n let cols = 0\n for (const key in args) {\n form.appendChild(args[key])\n cols++\n }\n \n form.style = `display: grid; grid-gap: 10px 15px; grid-template-columns: repeat(${cols}, auto); grid-auto-flow: row;`\n \n form.oninput = () => {\n form.value = Object.keys(args).reduce((result, key) => {\n result[key] = args[key].value\n return result\n }, Array.isArray(args) ? [] : {})\n }\n form.oninput()\n \n return form\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"md`https://observablehq.com/@thetylerwolf/day-6-donut-chart`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W44","stdlib":"1","titling":"auto"}