31:Tc6c,{ const height = 600 const width = 600 const margin = ({top: 30, right: 40, bottom: 40, left: 50}) const svg = d3.select(DOM.svg(width, height)) const pie = d3.pie() .value((d) => d.value) const arc = d3.arc() .innerRadius(0) .outerRadius(50) const arc_out = d3.arc() .innerRadius(0) .outerRadius(53) svg.append('line') .style("stroke", "lightgray") .style("stroke-width", 5) .attr("x1", 180) .attr("y1", 75) .attr("x2", 180) .attr("y2", 175) svg.append('line') .style("stroke", "lightgray") .style("stroke-width", 5) .attr("x1", 120) .attr("y1", 75) .attr("x2", 240) .attr("y2", 75) ////// father, mother, focal ////// for(var x=0; x<3; x++){ var gr = 'g' + x.toString() gr = svg.append('g').join(DATA.data)//svg.selectAll("g").data(DATA).join("g") .attr('transform', 'translate(' + DATA[x].transx*width/10 + ',' + DATA[x].transy*height/10 + ')') svg.append("text") .attr("x", DATA[x].transx*width/10 - 30 ) .attr("y", DATA[x].transy*height/10 + 70) .attr("font-size", 15) .text(DATA[x].label) var color = d3.scaleOrdinal() .domain(DATA[x].dataset) .range(DATA[x].colors) const part = gr.selectAll('.part') .data(pie(d3.entries(DATA[x].dataset))) .enter() .append('g') part.append('path')//up .attr('d', arc) .attr('class', (d,i)=>d.data.key) .attr("stroke", "white") .attr('stroke-width', '2') .attr('fill', (d, i) => color(i)) } console.log((d,i)=>d.key) ////// checkbox relatives ////// if(check.length>0){ for(var y=3; yd.data.key) .attr('d', arc) .attr("stroke", "white") .attr('stroke-width', '2') .attr('fill', (d, i) => color(i)) } } svg.selectAll('path') .style('cursor','pointer') .on("mouseover", function(d) { d3.select(this) .attr('d',arc_out) svg.selectAll('path.'+ d.data.key) .attr('d',arc_out) }) .on("mouseout", function(d) { d3.select(this) .attr('d',arc) svg.selectAll('path.'+ d.data.key) .attr('d',arc) }) return svg.node(); } 32:T714,{ //A: '#329215', B: red , C: c1, D: black, E:c2, F:white var string = 'Relatedness: '; while(DATA_new.length > 0) { DATA_new.pop(); } if(check.length>0) { if(check.includes("ss")) {DATA_new.push({ label: "supersister", transx: 1, transy: 4, generation: 2, dataset: {'B': 0.5, 'A':0.25, 'E': a2/4, 'C':a1/4}, colors: ["red","#329215", c2, c1], line: [180,135,60,175]}) string += "super sister:75% " } if(check.includes("b")) {DATA_new.push({ label: "brother", transx: 5, transy: 4, generation: 2, dataset: {'C': a1/4, 'E': a2/4, 'F':0.5, 'A':0.25}, colors: [c1, c2, "white","#329215"], line: [300,135,300,175]}) string += " brother:50% " } if(check.includes("hs")) {DATA_new.push({ label: "half sister", transx: 7, transy: 4, generation: 2, dataset: {'C': a1/4, 'E': a2/4, 'D':0.5, 'A':0.25}, colors: [c1, c2, "black","#329215"], line: [420,75,420,175]}) string += " half sister:25% " } if(check2.includes("fn")) {DATA_new.push({ label: "full nephew", transx: 1, transy: 7, generation: 3, dataset: {'C': a1/8, 'E': a2/8, 'B':0.25, 'F':0.5, 'A': 0.125}, colors: [c1, c2, "red", "white","#329215"], line: [60,320,60,360]}) string += " full nephew:37.5% " } if(check.includes("s")) {DATA_new.push({ label: "son", transx: 3, transy: 7, generation: 3, dataset: {'B': 5, 'A': 5, 'F':10}, colors: ["red", "#329215", "white"], line: [180,320,180,360]}) string += " son:50% " } if(check2.includes("hn")) {DATA_new.push({ label: "full nephew", transx: 7, transy: 7, generation: 3, dataset: {'C': a1/8,'E': a2/8, 'D':0.25, 'F':0.5, 'A':0.125}, colors: [c1, c2, "black", "white","#329215"], line: [420,320,420,360]}) string += " full nephew:12.5% " } } return string; }33:T675,nesthex = { const height = 350 const width = 900 const svg = d3.select(DOM.svg(width, height)); var hexbin = d3.hexbin(); const flowerg = svg.selectAll("g.flowers").data(bees).enter().append("g") .attr("class","flowers") .attr("id",(d,i)=>"flower_"+i) .attr("transform", "translate("+((width/2)-(boxsize/2))+" "+((height/2)-(boxsize/2))+")") flowerg .selectAll("path.hexagon").data(nestData).enter().append("path") .attr("class", "hexagon") .attr("transform", d=> "rotate(90," + beehexLocation(d.data,hexRadius,boxsize) + ") translate(" + beehexLocation(d.data,hexRadius,boxsize) + ")" ) .attr("d", function(d) { return hexbin.hexagon([hexRadius]); }) .style("stroke",(d,i)=>d.stroke) .style("stroke-width", (d,i)=>d.width) .style("fill", (d,i)=>d.colors) .attr("x_class", (d,i)=>-d.data[0]+5) .attr("y_class", (d,i)=>(-d.data[1]+5)) .on("mouseover", function(){ //console.log(d3.select(this).attr("x_class")) if(d3.select(this).style("fill") == "rgb(51, 39, 1)") { svg.append("text") .attr("x", 80*d3.select(this).attr("x_class")) .attr("y", 35*d3.select(this).attr("y_class")) .text("non-viable") .attr("font-size", 10) }else{} d3.select(this).style("stroke-width","5px") .style("opacity","0.7") }) .on("mouseout", function(){ d3.select(this).style("stroke-width","2px") .style("opacity","1") svg.selectAll("text").remove() }) yield svg.node(); }34:T408,function checkbox(config = {}) {var show;// = 'disabled';//holly${show} let {value: formValue, title, description, submit, options} = config; if (Array.isArray(config)) options = config; options = options.map(o => typeof o === "string" ? {value: o, label: o, show:o} : o); const form = input({ type: "checkbox", title, description, submit, getValue: input => { if (input.length) return Array.prototype.filter.call(input, i => i.checked).map(i => i.value); return input.checked ? input.value : undefined; }, form: html` ` }); form.output.remove(); return form; }35:T5ff,function input(config) { let {form, type = "text", attributes = {}, action, getValue, title, description, submit, options} = config; if (!form) form = html``; const input = form.input; Object.keys(attributes).forEach(key => { const val = attributes[key]; if (val != null) 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 (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(input) : input.value; if (form.output) form.output.value = value; form.value = value; if (verb !== "oninput") form.dispatchEvent(new CustomEvent("input")); }; if (verb !== "oninput") input.oninput = e => e && e.stopPropagation() && e.preventDefault(); if (verb !== "onsubmit") form.onsubmit = (e) => e && e.preventDefault(); form[verb](); } return form; }36:[{"id":"58af82645a35b0f0aeafd1537e46b48c901236d3d5174b2a32592ea6acfba131df5e135adfe0907587074b262e52faeb755772318ceaefc69fd706b0f02a764d","href":"https://static.observableusercontent.com/files/58af82645a35b0f0aeafd1537e46b48c901236d3d5174b2a32592ea6acfba131df5e135adfe0907587074b262e52faeb755772318ceaefc69fd706b0f02a764d","name":"bee genes.png","type":"image/png","lastModified":1618941153699.384,"size":81798}] 2f:{"title":"Make your choice as a drone bee!","cells":[{"id":0,"value":"md`# Make your choice as a drone bee!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":306,"value":"md ` When introduced to Punnett Squares in high school, it was relatively easy to understand as there were only 2 alleles that could be chosen from both the father and mother side. However, with bees it is different. The male bees (drone bees) have only one type of alleles. This is because they only carry the allele of their mother's (queen) as the drones were born from unfertilized eggs made by the queen. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":309,"value":"md `Understanding such basic information, let's put our focus to one focal worker that was born between a drone father and a queen mother. The focal worker will have both alleles from its father and mother. Probabistically speaking, the relationship of the focal worker to its supersister will be that they are 75% related, where 50% is related as they both all have their father's gene, while the other 50% could be random from the two alleles of its mother. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"viewof check = checkbox({\n title: 'Relatives',\n description: 'Select relatives to show',\n options: [\n { value: 'ss', label: 'Super Sister'},\n { value: 'hs', label: 'Half Sister'}, \n { value: 'b', label: 'Brother'},\n { value: 'fn', label: 'Full Nephew',display: 'none' },\n { value: 's', label: 'Son' },\n { value: 'hn', label: 'Half Nephew',display: 'none' },//\"inline-block\"\n ],\n value: []\n \n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"viewof check2 = checkbox({\n //title: 'Relative',\n description: 'Select relatives to show',\n options: [\n { value: 'fn', label: 'Full Nephew', show:disable_fn},\n { value: 'hn', label: 'Half Nephew', show:disable_hn},//,show: 'disabled'\n ],\n value: []\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"viewof c1 = color1()","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"viewof a1 = slider({\n min: 0, \n max: 1, \n value: 1,\n step: 0.01, \n format: \".0%\",\n description: \"Set up mom's genes\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"viewof c2 = color2()","pinned":false,"hidden":false,"mode":"ojs"},{"id":71,"value":"viewof a2 = slider({\n value: 1-a1,\n format: \".0%\",\n description: \"Set up mom's genes\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"md`Mom: green part never changes cuz it's from her dad. \\n\n Focal Worker: suppoes focal worker's genes don't change as mom's genes change. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":79,"value":"md`\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":123,"value":"md ` Ian's bee game with Holly 's edits`","pinned":true,"hidden":false,"mode":"ojs"},{"id":2,"value":"viewof userchoice = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":126,"value":"{if(userchoice=='stay (A)')\n {return \"You choose to stay in your own colony. You will benefit from the reproductive benefit of your siblings laying more workers.\"}\n else\n { return \"You choose to leave and try to mate with another queen. However, you will die in the moment of mating.\"\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"viewof image = {\n if(userchoice == \"stay\"){\n return html`

`\n }\n if(userchoice == \"leave\"){\n return html`

`\n }\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"viewof button = {\n const form = html`