31:T966,{ var svg = d3.select(DOM.svg(600, 250)) const svg1 = svg.append("g") var arr1 = [0,0]; var arr2 = [0,0]; var arr3 = [0,0]; var arr4 = [0,0]; var color_blocks = ["one","two","three","four"]; var show_text = ["a","b","c","d","e","f","g","h"]; svg.selectAll("rect") .data(color_blocks) .join("rect") .attr("class", (d,i)=>d) .attr("x", (d,i)=> calc_i(i)) .attr("y", (d,i)=> calc_j(i)) .attr("width", 50) .attr("height", 50) .style("fill", "brown" ) svg1.selectAll("text") .data(show_text) .join("text") .attr("class", (d,i)=>d) .attr("class", (d,i)=>d) .attr("x", (d,i)=> calc_text_i(i)) .attr("y", (d,i)=> calc_text_j(i)) .text("M") var clicks1 = 0; var clicks2 = 0; var clicks3 = 0; var clicks4 = 0; var clk1; var clk2; var clk3; var clk4; var t2 = svg.append("text") .attr("x", 170) .attr("y", 50) .attr("font-size", 40) .text('M') .style('cursor','pointer') .on("click", function() { clicks2 = clicks2 + 1; clk2 = clicks2%2; arr3[1] = clk2; arr1[1] = clk2; c(clicks2, clk2, t2, svg1, svg, "text.b", "text.f", arr1, arr3, "rect.one", "rect.three" ) }) var t1 = svg.append("text") .attr("x", 110) .attr("y", 110) .attr("font-size", 40) .text("M") .style('cursor','pointer') .on("click", function() { clicks1 = clicks1 + 1; clk1 = clicks1%2; arr1[0] = clk1; arr2[0] = clk1; c(clicks1, clk1, t1, svg1, svg, "text.a", "text.c", arr1, arr2, "rect.one", "rect.two" ) }) var t3 = svg.append("text") .attr("x", 110) .attr("y", 190) .attr("font-size", 40) .text('M') .style('cursor','pointer') .on("click", function() { clicks3 = clicks3 + 1; clk3 = clicks3%2; arr3[0] = clk3; arr4[0] = clk3; c(clicks3, clk3, t3, svg1, svg,"text.g", "text.e", arr3, arr4, "rect.three", "rect.four" ) }) var t4 = svg.append("text") .attr("x", 250) .attr("y", 50) .attr("font-size", 40) .text("M") .style('cursor','pointer') .on("click", function() { clicks4 = clicks4 + 1; clk4 = clicks4%2; arr2[1] = clk4; arr4[1] = clk4; c(clicks4, clk4, t4, svg1, svg, "text.d", "text.h", arr2, arr4, "rect.two", "rect.four" ) }) yield svg.node(); }32:T7e1,chart = { const arcs = pie(data1); const svg = d3.select(DOM.svg(width, 330)) .attr("text-anchor", "middle") .style("font-family", "'Roboto', sans-serif"); const g = svg.append("g") .attr("transform", `translate(${width / 2},${300 / 2})`); g.selectAll("path") .data(arcs) .enter().append("path") .attr("fill", d => color1(d.data.name)) .attr("d", arc) .append("title") .text(d => `${d.data.name}: ${d.data.value.toLocaleString()}`); g.append("text") .attr("text-anchor", "middle") .attr('font-size', '1.2em') .attr('y', 8) .style("font-weight", "bold") .text("Hair Color"); const legend = svg.selectAll('legend') .data(arcs) .enter() .append('g') .attr('class', 'legend') .attr('dy', '0.35em') .attr("transform", function(d, i) { return "translate(" + 800 +"," + (i * (18+13) + 0) + ")"; }); legend.append("circle") .data(arcs) .attr("cx", -18) .attr("cy", 9) .attr("r", 8) .style("border-radius", "9px") .style("fill", d => color1(d.data.name)); legend.append("text") .attr("text-anchor", "start") .attr('font-size', '1.2em') .attr('x', 0) .attr('y', 9) .attr("dy", "0.35em") .text(d => d.data.name); const text = svg.append('g') .attr('class', 'labels-container') .attr('transform', `translate(${ width / 2 },${ 300 / 2 })`) .selectAll('text') .data( pieArcs ) .join('text') .attr('transform', d => `translate(${ labelArcs.centroid(d) })`) .attr('text-anchor', 'middle') text.selectAll('tspan') // 1 .data( d => [ d.data.name, d.data.value ]) // 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 svg.node(); }33:T4c0,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: "Parent", 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; }34: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; }35:T18ef,/*{ var svg = d3.select(DOM.svg(800, 250)) var cnt1 = 0; var cnt2 = 0; var cnt3 = 0; var cnt4 = 0; var red_cur = 0; var brown_cur = 100; function change() { cnt1++; if(cnt1%2 == 1) {d3.select('text.t1').text("m")} else {d3.select('text.t1').text("M")} if(cnt1%2 == 0 | cnt2%2 == 0){ svg.select('circle.c11') .attr('fill', 'brown') } else { svg.select('circle.c11') .attr('fill', 'red') brown_cur-=25; red_cur+=25; svg.select('text.Brown') .text('Brown: '+ brown_cur + '%') svg.select('text.Red') .text('Red: ' + red_cur + '%') } if(cnt1%2 == 0 | cnt4%2 == 0){ svg.select('circle.c12') .attr('fill', 'brown') } else { svg.select('circle.c12') .attr('fill', 'red') brown_cur-=25; red_cur+=25; svg.select('text.Brown') .text('Brown: '+ brown_cur + '%') svg.select('text.Red') .text('Red: ' + red_cur + '%') } } function change2() { cnt2++; if(cnt2%2 == 1) {d3.select('text.t2').text("m") } else {d3.select('text.t2').text("M")} if(cnt1%2 == 0 | cnt2%2 == 0){ svg.select('circle.c11') .attr('fill', 'brown')} else { svg.select('circle.c11') .attr('fill', 'red') brown_cur-=25; red_cur+=25; svg.select('text.Brown') .text('Brown: '+ brown_cur + '%') svg.select('text.Red') .text('Red: ' + red_cur + '%') } if(cnt3%2 == 0 | cnt2%2 == 0){ svg.select('circle.c21') .attr('fill', 'brown') } else { svg.select('circle.c21') .attr('fill', 'red') brown_cur-=25; red_cur+=25; svg.select('text.Brown') .text('Brown: '+ brown_cur + '%') svg.select('text.Red') .text('Red: ' + red_cur + '%') } } function change3() { cnt3++; if(cnt3%2 == 1) {d3.select('text.t3').text("m") } else {d3.select('text.t3').text("M")} if(cnt3%2 == 0 | cnt2%2 == 0){ svg.select('circle.c21') .attr('fill', 'brown') } else { svg.select('circle.c21') .attr('fill', 'red') brown_cur-=25; red_cur+=25; svg.select('text.Brown') .text('Brown: '+ brown_cur + '%') svg.select('text.Red') .text('Red: ' + red_cur + '%') } if(cnt3%2 == 0 | cnt4%2 == 0){ svg.select('circle.c22') .attr('fill', 'brown') } else { svg.select('circle.c22') .attr('fill', 'red') brown_cur-=25; red_cur+=25; svg.select('text.Brown') .text('Brown: '+ brown_cur + '%') svg.select('text.Red') .text('Red: ' + red_cur + '%') } } function change4() { cnt4++; if(cnt4%2 == 1) {d3.select('text.t4').text("m") } else {d3.select('text.t4').text("M")} if(cnt1%2 == 0 | cnt4%2 == 0){ svg.select('circle.c12') .attr('fill', 'brown') } else { svg.select('circle.c12') .attr('fill', 'red') brown_cur-=25; red_cur+=25; svg.select('text.Brown') .text('Brown: '+ brown_cur + '%') svg.select('text.Red') .text('Red: ' + red_cur + '%') } if(cnt3%2 == 0 | cnt4%2 == 0){ svg.select('circle.c22') .attr('fill', 'brown') } else { svg.select('circle.c22') .attr('fill', 'red') brown_cur-=25; red_cur+=25; svg.select('text.Brown') .text('Brown: '+ brown_cur + '%') svg.select('text.Red') .text('Red: ' + red_cur + '%') } } svg.append("text") .attr('class', 't1') .attr("x", 60) .attr("y", 120) .attr("font-size", 50) .text("M") .style('cursor','pointer') .on("click", change) svg.append("text") .attr('class', 't2') .attr("x", 170) .attr("y", 50) .attr("font-size", 50) .text("M") .style('cursor','pointer') .on("click", change2) svg.append("text") .attr('class', 't3') .attr("x", 60) .attr("y", 210) .attr("font-size", 50) .text("M") .style('cursor','pointer') .on("click", change3) svg.append("text") .attr('class', 't4') .attr("x", 290) .attr("y", 50) .attr("font-size", 50) .text("M") .style('cursor','pointer') .on("click", change4) svg.append("text") .attr('class', 'Brown') .attr("x", 500) .attr("y", 100) .attr("font-size", 30) .text("Brown: 100%") svg.append("text") .attr('class', 'Red') .attr("x", 500) .attr("y", 130) .attr("font-size", 30) .text("Red: 0%") svg.append("circle") .attr('class', 'c11') .attr("cx", 190) .attr("cy", 110) .attr("r", 30) .attr("fill", 'brown') svg.append("circle") .attr('class', 'c21') .attr("cx", 190) .attr("cy", 190) .attr("r", 30) .attr("fill", 'brown') svg.append("circle") .attr('class', 'c12') .attr("cx", 310) .attr("cy", 110) .attr("r", 30) .attr("fill", 'brown') svg.append("circle") .attr('class', 'c22') .attr("cx", 310) .attr("cy", 190) .attr("r", 30) .attr("fill", 'brown') yield svg.node(); }*/36:[] 2f:{"title":"Punnett Square","cells":[{"id":0,"value":"md`# Punnett Square`","pinned":false,"hidden":false,"mode":"ojs"},{"id":704,"value":"md`\nDominant gene: M\\n\nRecessive gene: m\\n\nMM, Mm: Brown hair \\n\nmm: Red hair`","pinned":false,"hidden":false,"mode":"ojs"},{"id":163,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":632,"value":"function c(clicks, clk, which_m, svg1, svg, text1, text2, array1, array2, rect1, rect2 ){\n\n svg1.select(text1).text(M_or_m(clicks));\n svg1.select(text2).text(M_or_m(clicks));\n which_m.text(M_or_m(clicks)); \n color_change(array1, svg.select(rect1));\n color_change(array2, svg.select(rect2)); \n}\n ","pinned":false,"hidden":false,"mode":"ojs"},{"id":542,"value":"function M_or_m(clicks)\n{\n var show;\n if (clicks%2 == 0)\n { show = 'M'; }\n else {show = 'm';}\n return show;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":569,"value":"function calc_text_i(i){\n\n switch(i)\n {\n case 0: return 170;\n case 1: return 190;\n case 2: return 250;\n case 3: return 270;\n case 4: return 170;\n case 5: return 190;\n case 6: return 250;\n case 7: return 270; \n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":573,"value":"function calc_text_j(i){\n\n switch(i)\n {\n case 0: return 140;\n case 1: return 140;\n case 2: return 140;\n case 3: return 140; \n case 4: return 220;\n case 5: return 220;\n case 6: return 220;\n case 7: return 220; \n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":453,"value":"\n function calc_i(i){\n if((i+1)%2 == 1){return 160;}\n else{return 240;}\n } \n \n","pinned":false,"hidden":false,"mode":"ojs"},{"id":448,"value":" function calc_j(i){\n if(i<2){return 70;}\n else{return 150;}\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":350,"value":"function color_change(array,svg){\n \n if((array[0] == 0 & array[1] ==1))\n {\n svg.style(\"fill\", \"brown\"); \n }\n\n else if((array[0] == 1 & array[1] ==0))\n {\n svg.style(\"fill\", \"brown\"); \n } \n \n else if((array[0] == 0 & array[1] == 0))\n {\n svg.style(\"fill\", \"brown\"); \n }\n \n else if((array[0] == 1 & array[1] == 1))\n {\n svg.style(\"fill\", \"red\"); \n }\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":714,"value":"md`https://observablehq.com/@shuoyang/donut-chart`","pinned":false,"hidden":false,"mode":"ojs"},{"id":852,"value":"md`https://observablehq.com/@thetylerwolf/day-6-donut-chart`","pinned":false,"hidden":false,"mode":"ojs"},{"id":719,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":748,"value":"viewof p1 = select([\"MM\", \"Mm\", \"mm\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":763,"value":"viewof p2 = select([\"MM\", \"Mm\", \"mm\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":766,"value":"determine = {\n\n var x,y;\n \n if(p1 == p2 & p2 ==\"MM\"){x=1;}\n else if(p1 == p2 & p2 ==\"Mm\"){x=2;}\n else if(p1 == p2 & p2 ==\"mm\"){x=3;}\n else if((p1 == \"MM\" & p2 == \"Mm\") | (p1 == \"Mm\" & p2 == \"MM\")){x = 4;}\n else if((p1 == \"MM\" & p2 == \"mm\") | (p1 == \"mm\" & p2 == \"MM\")){x = 5;}\n else {x = 6;}\n \n return x;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":796,"value":"data1 = {\n\n var MM, Mm, mm;\n \n if(determine==1){MM = 1, Mm = 0, mm =0;}\n else if(determine==2){MM = 1/4, Mm = 2/4, mm =1/4;}\n else if(determine==3){MM = 0, Mm = 0, mm =1;}\n else if(determine==4){MM = 2/4, Mm = 2/4, mm =0;}\n else if(determine==5){MM = 0, Mm = 1, mm =0;}\n else {MM = 0, Mm = 2/4, mm =2/4;}\n \n return [\n {name:\"MM\", value:MM},\n {name:\"Mm\", value:Mm},\n {name:\"mm\", value:mm}\n ]\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":724,"value":"color_google = [\"brown\", \"brown\",\"red\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":738,"value":"color1 = d3.scaleOrdinal()\n .domain(data1.map(d => d.name))\n .range(color_google)","pinned":false,"hidden":false,"mode":"ojs"},{"id":727,"value":"pie = d3.pie()\n .padAngle(0.01)\n .sort(null)\n .value(d => d.value)","pinned":false,"hidden":false,"mode":"ojs"},{"id":735,"value":"arc = {\n const radius = Math.min(width, 250) / 2;\n return d3.arc().innerRadius(radius * 0.65).outerRadius(radius - 1).cornerRadius(5);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":864,"value":"labelArcs = d3.arc()\n .innerRadius( 1.2 * 250 / 2 )\n .outerRadius( 1.2 * 250 / 2 )","pinned":false,"hidden":false,"mode":"ojs"},{"id":869,"value":"pieArcs = pie( data1 )","pinned":false,"hidden":false,"mode":"ojs"},{"id":731,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":749,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":753,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":755,"value":"d3format = require(\"d3-format@1\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":456,"value":"md`## Some samples`","pinned":false,"hidden":false,"mode":"ojs"},{"id":561,"value":"color_blocks1 = d3.range(2).map(i => d3.range(2).map(j => i+2*j)) //0,0 / 0,1 / 1,0 / 1,1","pinned":false,"hidden":false,"mode":"ojs"},{"id":294,"value":"swatches2D(X1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":301,"value":"function swatches2D(colors) {\n return html`${colors.map(row => html`${ row.map(c => cell(c)) }
` )}`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":296,"value":"color = d3.scaleSequential(d3.interpolateViridis).domain([0,1])","pinned":false,"hidden":false,"mode":"ojs"},{"id":317,"value":"X = d3.range(2).map(i => d3.range(2).map(j => 0))","pinned":false,"hidden":false,"mode":"ojs"},{"id":385,"value":"X[0][1]","pinned":false,"hidden":false,"mode":"ojs"},{"id":288,"value":"X1 = X.map(row => row.map(x => {\n let [i,j] = x;\n let [c1,c2] = [color(i), color(j)]\n const c = \"rgb(245,1,1)\"\n return c;\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":303,"value":"cell = (c) => `

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":688,"value":"$35","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}