31:Tb4e,chart1 = { const svg = d3.select(DOM.svg(width, height)) svg.attr('width', width + margin + margin) .attr('height', height + margin + margin) const color = d3.scaleOrdinal() .domain(dataset) .range(["#FE4365", "#FC9D9A", "#F9CDAD", "#C8C8A9", "#83AF9B"]) const g = svg.append('g') .attr('transform', 'translate(' + 2.5*width/5 + ',' + 4*height/5 + ')') const g1 = svg.append('g') .attr('transform', 'translate(' + width/5 + ',' + height/5 + ')') const g2 = svg.append('g') .attr('transform', 'translate(' + 4*width/5 + ',' + height/5 + ')') const pie = d3.pie() .value((d) => d.value) const arc = d3.arc() .innerRadius(0) .outerRadius(100) const arc_out = d3.arc() .innerRadius(0) .outerRadius(110) const part = g.selectAll('.part') .data(pie(d3.entries(dataset))) .enter() .append('g') const part1 = g1.selectAll('.part') .data(pie(d3.entries(dataset1))) .enter() .append('g') part1.append('path')//down .attr('d', arc) .attr('class',(d, i) =>d.data.key) .attr("stroke", "white") .attr('stroke-width', '2') .attr('fill', (d, i) => color(i)) .on("mouseover", function(d) { return d3.select(this) .attr('d',arc_out) }) .on("mouseout", function(d) {return d3.select(this) .attr('d',arc) }) 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)) .on("mouseover", function(d) { d3.select(this) .attr('d',arc_out) g1.selectAll('path.' + d.data.key) .attr('d',arc_out) g2.selectAll('path.' + d.data.key) .attr('d',arc_out) }) .on("mouseout", function(d) { d3.select(this) .attr('d',arc) g1.selectAll('path.' + d.data.key) .attr('d',arc) g2.selectAll('path.' + d.data.key) .attr('d',arc) }) part.append("text") .attr('transform', (d) => 'translate(' + arc.centroid(d) + ')') .text((d,i) => d.data.key) .attr('fill', 'white') //////////////// const color2 = d3.scaleOrdinal() .domain(dataset2) .range(["#F9CDAD", "white"]) const part2 = g2.selectAll('.part') .data(pie(d3.entries(dataset2))) .enter() .append('g') part2.append('path')//down .attr('d', arc) .attr('class',(d, i) =>d.data.key) .attr("stroke", "white") .attr('stroke-width', '2') .attr('fill', (d, i) => color2(i)) .on("mouseover", function(d) { return d3.select(this) .attr('d',arc_out) }) .on("mouseout", function(d) {return d3.select(this) .attr('d',arc) }) //////////////// return svg.node() }32:T20c3,bees_genes = { const svg = d3.select(DOM.svg(width, height)) svg.attr('width', width + margin + margin) .attr('height', height + margin + margin) const color_focal = d3.scaleOrdinal() .domain(dataset_focal) .range(["green", "red"])// focal const color_dad = d3.scaleOrdinal() .domain(dataset_dad) .range(["white", "red"])// dad const color_mom = d3.scaleOrdinal() .domain(dataset_mom) .range(["green", "gray"])// mom const color_sis = d3.scaleOrdinal() .domain(dataset_sis) .range(["gray", "green", "red"])// sis const color_bro = d3.scaleOrdinal() .domain(dataset_sis) .range(["gray", "green", "white"])// bro const color_fullnephew = d3.scaleOrdinal() .domain(dataset_fullnephew) .range(["gray", "green", "red", "white"])// fullnephew const color_son = d3.scaleOrdinal() .domain(dataset_focal) .range(["green", "red", "white"])// son const g = svg.append('g') .attr('transform', 'translate(' + 3*width/10 + ',' + 4*height/10 + ')') // focal const g1 = svg.append('g') .attr('transform', 'translate(' + 2*width/10 + ',' + height/10 + ')') // dad const g2 = svg.append('g') .attr('transform', 'translate(' + 5*width/10 + ',' + height/10 + ')') // mom const g3 = svg.append('g') .attr('transform', 'translate(' + 1*width/10 + ',' + 4*height/10 + ')') // sis const g4 = svg.append('g') .attr('transform', 'translate(' + 5*width/10 + ',' + 4*height/10 + ')') // bro const g5 = svg.append('g') .attr('transform', 'translate(' + 1*width/10 + ',' + 7*height/10 + ')') // full nephew const g6 = svg.append('g') .attr('transform', 'translate(' + 3*width/10 + ',' + 7*height/10 + ')') // son g3.append('line') .style("stroke", "lightgray") .style("stroke-width", 5) .attr("x1", 0) .attr("y1", 75) .attr("x2", 0) .attr("y2", 135) g.append('line') .style("stroke", "lightgray") .style("stroke-width", 5) .attr("x1", 0) .attr("y1", 75) .attr("x2", 0) .attr("y2", 135) const pie = d3.pie() .value((d) => d.value) const arc = d3.arc() .innerRadius(0) .outerRadius(60) const arc_out = d3.arc() .innerRadius(0) .outerRadius(70) const part_focal = g.selectAll('.part') .data(pie(d3.entries(dataset_focal))) .enter() .append('g') part_focal.append('path')//down .attr('d', arc) .attr('class',(d, i) =>d.data.key) .attr("stroke", "white") .attr('stroke-width', '2') .attr('fill', (d, i) => color_focal(i)) .on("mouseover", function(d) { d3.select(this) .attr('d',arc_out) g1.selectAll('path.' + d.data.key) .attr('d',arc_out) g2.selectAll('path.' + d.data.key) .attr('d',arc_out) }) .on("mouseout", function(d) { d3.select(this) .attr('d',arc) g1.selectAll('path.' + d.data.key) .attr('d',arc) g2.selectAll('path.' + d.data.key) .attr('d',arc) }) /* part_focal.append("text") .attr('transform', (d) => 'translate(' + arc.centroid(d) + ')') .text((d,i) => d.data.key) .attr('fill', 'white') */ const part_dad = g1.selectAll('.part') .data(pie(d3.entries(dataset_dad))) .enter() .append('g') part_dad.append('path')//dad .attr('d', arc) .attr('class',(d, i) =>d.data.key) .attr("stroke", "white") .attr('stroke-width', '2') .attr('fill', (d, i) => color_dad(i)) .on("mouseover", function(d) { return d3.select(this) .attr('d',arc_out) }) .on("mouseout", function(d) {return d3.select(this) .attr('d',arc) }) /* part_dad.append("text") .attr('transform', (d) => 'translate(' + arc.centroid(d) + ')') .text((d,i) => d.data.key) .attr('fill', 'white') */ const part_mom = g2.selectAll('.part') .data(pie(d3.entries(dataset_mom))) .enter() .append('g') part_mom.append('path')//dad .attr('d', arc) .attr('class',(d, i) =>d.data.key) .attr("stroke", "white") .attr('stroke-width', '2') .attr('fill', (d, i) => color_mom(i)) .on("mouseover", function(d) { return d3.select(this) .attr('d',arc_out) }) .on("mouseout", function(d) {return d3.select(this) .attr('d',arc) }) /* part_mom.append("text") .attr('transform', (d) => 'translate(' + arc.centroid(d) + ')') .text((d,i) => d.data.key) .attr('fill', 'white')*/ const part_sis = g3.selectAll('.part') .data(pie(d3.entries(dataset_sis))) .enter() .append('g') part_sis.append('path')//dad .attr('d', arc) .attr('class',(d, i) =>d.data.key) .attr("stroke", "white") .attr('stroke-width', '2') .attr('fill', (d, i) => color_sis(i)) .on("mouseover", function(d) { d3.select(this) .attr('d',arc_out) g1.selectAll('path.' + d.data.key) .attr('d',arc_out) g2.selectAll('path.' + d.data.key) .attr('d',arc_out) }) .on("mouseout", function(d) { d3.select(this) .attr('d',arc) g1.selectAll('path.' + d.data.key) .attr('d',arc) g2.selectAll('path.' + d.data.key) .attr('d',arc) }) /* part_sis.append("text") .attr('transform', (d) => 'translate(' + arc.centroid(d) + ')') .text((d,i) => d.data.key) .attr('fill', 'white') */ const part_bro = g4.selectAll('.part') .data(pie(d3.entries(dataset_bro))) .enter() .append('g') part_bro.append('path') .attr('d', arc) .attr('class',(d, i) =>d.data.key) .attr("stroke", "white") .attr('stroke-width', '2') .attr('fill', (d, i) => color_bro(i)) .on("mouseover", function(d) { d3.select(this) .attr('d',arc_out) g1.selectAll('path.' + d.data.key) .attr('d',arc_out) g2.selectAll('path.' + d.data.key) .attr('d',arc_out) }) .on("mouseout", function(d) { d3.select(this) .attr('d',arc) g1.selectAll('path.' + d.data.key) .attr('d',arc) g2.selectAll('path.' + d.data.key) .attr('d',arc) }) /* part_bro.append("text") .attr('transform', (d) => 'translate(' + arc.centroid(d) + ')') .text((d,i) => d.data.key) .attr('fill', 'white') */ const part_fullnephew = g5.selectAll('.part') .data(pie(d3.entries(dataset_fullnephew))) .enter() .append('g') part_fullnephew.append('path') .attr('d', arc) .attr('class',(d, i) =>d.data.key) .attr("stroke", "white") .attr('stroke-width', '2') .attr('fill', (d, i) => color_fullnephew(i)) .on("mouseover", function(d) { d3.select(this) .attr('d',arc_out) g3.selectAll('path.' + d.data.key) .attr('d',arc_out) g3.selectAll("line") .style('stroke','lightgreen') }) .on("mouseout", function(d) { d3.select(this) .attr('d',arc) g3.selectAll('path.' + d.data.key) .attr('d',arc) g3.selectAll("line") .style('stroke','lightgray') }) /* part_fullnephew.append("text") .attr('transform', (d) => 'translate(' + arc.centroid(d) + ')') .text((d,i) => d.data.key) .attr('fill', 'white') */ const part_son = g6.selectAll('.part') .data(pie(d3.entries(dataset_son))) .enter() .append('g') part_son.append('path') .attr('d', arc) .attr('class',(d, i) =>d.data.key) .attr("stroke", "white") .attr('stroke-width', '2') .attr('fill', (d, i) => color_son(i)) .on("mouseover", function(d) { d3.select(this) .attr('d',arc_out) g.selectAll('path.' + d.data.key) .attr('d',arc_out) g.selectAll("line") .style('stroke','lightgreen') }) .on("mouseout", function(d) { d3.select(this) .attr('d',arc) g.selectAll('path.' + d.data.key) .attr('d',arc) g.selectAll("line") .style('stroke','lightgray') }) /* part_son.append("text") .attr('transform', (d) => 'translate(' + arc.centroid(d) + ')') .text((d,i) => d.data.key) .attr('fill', 'white') */ return svg.node() }33: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; }34:T4b6,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, 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; }35:[{"id":"e9404c620076616626183105c597e71eb23e3984ac050e07eb24f10a284e2d0e15af59dd4b31cdd6b91293e6e50af4b077f5567ae86d31c16de943a54ed31b5f","href":"https://static.observableusercontent.com/files/e9404c620076616626183105c597e71eb23e3984ac050e07eb24f10a284e2d0e15af59dd4b31cdd6b91293e6e50af4b077f5567ae86d31c16de943a54ed31b5f","name":"Project iOn-47.jpg","type":"image/jpeg","lastModified":1607015511150.405,"size":56200},{"id":"6b7f58ca6a9c5392a521478dbb6bc30e4a3c57cff2bc83abfea7a0f6666225bfa79fd4aeac636f0522f3666a63c872c7a6840396215ca4708ebbc8229796cc8b","href":"https://static.observableusercontent.com/files/6b7f58ca6a9c5392a521478dbb6bc30e4a3c57cff2bc83abfea7a0f6666225bfa79fd4aeac636f0522f3666a63c872c7a6840396215ca4708ebbc8229796cc8b","name":"bees family tree.jpg","type":"image/jpeg","lastModified":1607619533138.032,"size":108206},{"id":"4b79f9fa7e80d34791ae673d68b99312f46772d2016626f00fa4d5f4425d2059fc2828de7fcf2042ae95d91bdd31ade149b46c4ceda2178ae6e6075502a308eb","href":"https://static.observableusercontent.com/files/4b79f9fa7e80d34791ae673d68b99312f46772d2016626f00fa4d5f4425d2059fc2828de7fcf2042ae95d91bdd31ade149b46c4ceda2178ae6e6075502a308eb","name":"bee family tree updated.jpg","type":"image/jpeg","lastModified":1607623956768.804,"size":124202}] 2f:{"title":"Bees' Family Tree","cells":[{"id":0,"value":"md`# Bees' Family Tree`","pinned":false,"hidden":false,"mode":"ojs"},{"id":152,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":461,"value":"md`\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":483,"value":"md`\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":406,"value":"viewof dd3 = {\n const dd3 = select({\n title: \"Choose a family member to view its closeness to the focal worker:\",\n options: [\n { label: \"super sister\", value: \"75%\" },\n { label: \"brother\", value: \"25%\"},\n { label: \"full nephew\", value: \"37.5%\" },\n { label: \"son\", value: \"50%\"},\n { label: \"half sister\", value: \"25%\"},\n { label: \"half nephew\", value: \"12.5%\" }\n ],\n value: \"hmmm\"\n });\n dd3.input.style.fontSize = \"20px\";\n dd3.input.style.marginTop = \"4px\";\n return dd3;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":411,"value":"dd3","pinned":false,"hidden":false,"mode":"ojs"},{"id":233,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":237,"value":"dataset_focal = ({'A':10,'B':10})","pinned":false,"hidden":false,"mode":"ojs"},{"id":263,"value":"dataset_dad = ({'C':10,'B':10})","pinned":false,"hidden":false,"mode":"ojs"},{"id":278,"value":"dataset_mom = ({'A':10,'D':10})","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"colorpallete = d3.interpolateYlGnBu","pinned":false,"hidden":false,"mode":"ojs"},{"id":291,"value":"dataset_sis = ({'D':5,'A':5,'B':10})","pinned":false,"hidden":false,"mode":"ojs"},{"id":306,"value":"dataset_bro = ({'D':5,'A':5,'E':10})","pinned":false,"hidden":false,"mode":"ojs"},{"id":317,"value":"dataset_fullnephew = ({'D':2.5,'A':2.5,'B':5, 'F':10})","pinned":false,"hidden":false,"mode":"ojs"},{"id":336,"value":"dataset_son = ({'A':5,'B':5,'G':10})","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"dataset1 = ({ 'A': 10, 'B': 10})","pinned":false,"hidden":false,"mode":"ojs"},{"id":168,"value":"dataset = ({ 'A': 10, 'B':5, 'C':2.5, 'D':2.5})","pinned":false,"hidden":false,"mode":"ojs"},{"id":207,"value":"dataset2 = ({ 'C':2.5, 'E':2.5 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"margin=50","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"height = 700","pinned":false,"hidden":false,"mode":"ojs"},{"id":393,"value":"md`inputs: https://observablehq.com/@jashkenas/inputs`","pinned":false,"hidden":false,"mode":"ojs"},{"id":351,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":386,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":354,"value":"d3format = require(\"d3-format@1\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}