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: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; }34: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; }35:[{"id":"58af82645a35b0f0aeafd1537e46b48c901236d3d5174b2a32592ea6acfba131df5e135adfe0907587074b262e52faeb755772318ceaefc69fd706b0f02a764d","href":"https://static.observableusercontent.com/files/58af82645a35b0f0aeafd1537e46b48c901236d3d5174b2a32592ea6acfba131df5e135adfe0907587074b262e52faeb755772318ceaefc69fd706b0f02a764d","name":"bee genes.png","type":"image/png","lastModified":1612370226060.141,"size":81798}] 2f:{"title":"Bees' Relatedness","cells":[{"id":0,"value":"md`# Bees' Relatedness`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1368,"value":"md` *Select \"Super Sister\" to enable \"Full Nephew\"; select \"Half Sister\" to enable \"Half Nephew\"*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":573,"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":1235,"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":1563,"value":"viewof c1 = color1()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1567,"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":1571,"value":"viewof c2 = color2()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1574,"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":135,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":680,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1403,"value":"md`## Imports and References`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1560,"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":1399,"value":"md`\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1395,"value":"DATA = [{ label: \"father\", transx: 1, transy: 1, generation: 1, dataset: {F: 10, B: 10}, colors: [\"white\",\"red\"]},\n { label: \"mother\", transx: 5, transy: 1, generation: 1, dataset: {'A': 1, 'E': 1-a1, 'C': a1}, colors: ['#329215', c2,c1]},\n { label: \"focal worker\", transx: 3, transy: 4, generation: 2, dataset: {'A': 10, 'B': 10}, colors: ['#329215', \"red\"]},\n { label: \"father of half sister\", transx: 9, transy: 1, generation: 1, dataset: {'F': 10, 'D': 10}, colors: [\"white\", \"black\"]},]//A: '#329215', B: red , C: c1, D: black","pinned":false,"hidden":false,"mode":"ojs"},{"id":1362,"value":" DATA_new = []","pinned":false,"hidden":false,"mode":"ojs"},{"id":1275,"value":"disable_fn = {\n if(!check.includes(\"ss\")){ return 'disabled'}\n else{return ''}\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1279,"value":"disable_hn = {\n if(!check.includes(\"hs\")){return 'disabled'}\n else{return ''}\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":381,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":384,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":100,"value":"height = 700","pinned":false,"hidden":false,"mode":"ojs"},{"id":103,"value":"margin = 50","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"d3 = require(\"d3@5\")\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":713,"value":"function slider(config = {}) {\n let {\n min = 0,\n max = 1,\n value = (max + min) / 2,\n step = \"any\",\n precision = 2,\n title,\n description,\n disabled,\n getValue,\n format,\n display,\n submit\n } = typeof config === \"number\" ? { value: config } : config;\n precision = Math.pow(10, precision);\n if (!getValue)\n getValue = input => Math.round(input.valueAsNumber * precision) / precision;\n return input({\n type: \"range\",\n title,\n description,\n submit,\n format,\n display,\n attributes: { min, max, step, disabled, value },\n getValue\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":716,"value":"function color1(config = {}) {\n const { value = \"#c3c2b2\", title, description, disabled, submit, display } =\n typeof config === \"string\" ? { value: config } : config;\n const form = input({\n type: \"color\",\n title,\n description,\n submit,\n display,\n attributes: { disabled, value }\n });\n // The following two lines are a bugfix for Safari, which hopefully can be removed in the future.\n form.input.value = '';\n form.input.value = value;\n if (title || description) form.input.style.margin = \"5px 0\";\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":765,"value":"function color2(config = {}) {\n const { value = \"#fd9621\", title, description, disabled, submit, display } =\n typeof config === \"string\" ? { value: config } : config;\n const form = input({\n type: \"color\",\n title,\n description,\n submit,\n display,\n attributes: { disabled, value }\n });\n // The following two lines are a bugfix for Safari, which hopefully can be removed in the future.\n form.input.value = '';\n form.input.value = value;\n if (title || description) form.input.style.margin = \"5px 0\";\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":388,"value":"md` Input Checkbox from: https://observablehq.com/@jashkenas/inputs`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}