30:T1245,chart = { const svg = d3 .create("svg") .attr("width", chart_width) .attr("height", chart_height); const stroke_factor = 5; const markerBoxWidth = 6; const markerBoxHeight = 6; const color_scale = d3 .scaleOrdinal(d3.schemeSet1) .domain(["A", "C", "G", "T"]); // Arrow heads svg .append("defs") .append("marker") .attr("id", "arrow") .attr("viewBox", [0, 0, markerBoxWidth, markerBoxHeight]) .attr("refX", markerBoxWidth / 2) .attr("refY", markerBoxHeight / 2) .attr("markerWidth", markerBoxWidth / 2) .attr("markerHeight", markerBoxHeight / 3) .attr("orient", "auto-start-reverse") .append("path") .attr( "d", d3.line()([ [0, 0], [0, markerBoxHeight], [markerBoxWidth + 1, markerBoxHeight / 2] ]) ) .attr("stroke", "context-stroke"); const g_letters = svg.append("g"); const g_arrows = svg.append("g"); return Object.assign(svg.node(), { // Update function update(nodes, edges) { const t = d3.transition().duration(1000); // Letter boxes g_letters .selectAll("rect") .data(nodes, (d) => d.label) .join( (enter) => { enter .append("rect") .attr("fill", (d) => color_scale(d.label)) .attr("rx", 10) .attr("ry", 10) .call((enter) => enter .transition(t) .attr( "x", (d) => x_scale(d.x) - (Math.sqrt(d.size) * size_factor) / 2 ) .attr( "y", (d) => y_scale(d.y) - (Math.sqrt(d.size) * size_factor) / 2 ) .attr("height", (d) => Math.sqrt(d.size) * size_factor) .attr("width", (d) => Math.sqrt(d.size) * size_factor) ); }, (update) => { update.call((update) => update .transition(t) .attr( "x", (d) => x_scale(d.x) - (Math.sqrt(d.size) * size_factor) / 2 ) .attr( "y", (d) => y_scale(d.y) - (Math.sqrt(d.size) * size_factor) / 2 ) .attr("height", (d) => Math.sqrt(d.size) * size_factor) .attr("width", (d) => Math.sqrt(d.size) * size_factor) ); }, (exit) => exit.remove() ); // Letters g_letters .selectAll("text") .data(nodes, (d) => d.label) .join( (enter) => { enter .append("text") .attr("text-anchor", "middle") .style("font-weight", 600) .style("font-family", "sans-serif") .style("fill", "white") .text((d) => d.label) .call((enter) => enter .transition(t) .style( "font-size", (d) => Math.sqrt(d.size) * size_factor + "px" ) .attr("x", (d) => x_scale(d.x)) .attr("y", (d) => y_scale(d.y)) .attr("dy", (d) => (Math.sqrt(d.size) * size_factor) / 3) ); }, (update) => { update.call((update) => update .transition(t) .style( "font-size", (d) => Math.sqrt(d.size) * size_factor + "px" ) .attr("dy", (d) => (Math.sqrt(d.size) * size_factor) / 3) ); }, (exit) => exit.remove() ); // Arrows g_arrows .selectAll("path") .data(edges, (d) => d.label) .join( (enter) => enter .append("path") .attr("stroke", "black") .attr("marker-start", "url(#arrow)") .attr("marker-end", "url(#arrow)") .attr("fill", "none") .call((enter) => enter .transition(t) .attr("d", (d) => edge_line(d, nodes)) .attr("stroke-width", (d) => d.size * stroke_factor) ), (update) => update.call((update) => update .transition(t) .attr("d", (d) => edge_line(d, nodes)) .attr("stroke-width", (d) => d.size * stroke_factor) ), (exit) => exit.remove() ); } }); }31:T424,raw_table = html`

	To A	To C	To G	To T
From A	${rateAA.toFixed( 3 )}	${tex`a \pi_C =`} ${rateAC.toFixed( 3 )}	${tex`b \pi_G =`} ${rateAG.toFixed( 3 )}	${tex`c \pi_T =`} ${rateAT.toFixed(3)}
From C	${tex`a \pi_A =`} ${rateCA.toFixed( 3 )}	${rateCC.toFixed( 3 )}	${tex`d \pi_G =`} ${rateCG.toFixed( 3 )}	${tex`e \pi_T =`} ${rateCT.toFixed(3)}
From G	${tex`b \pi_A =`} ${rateGA.toFixed( 3 )}	${tex`d \pi_C =`} ${rateGC.toFixed( 3 )}	${rateGG.toFixed( 3 )}	${tex`f \pi_T =`} ${rateGT.toFixed(3)}
From T	${tex`c \pi_A =`} ${rateTA.toFixed( 3 )}	${tex`e \pi_C =`} ${rateTC.toFixed( 3 )}	${tex`f \pi_G =`} ${rateTG.toFixed( 3 )}	${rateTT.toFixed(3)}

`32:[] 2e:{"title":"Substitution matrix","cells":[{"id":0,"value":"# Substitution matrix","pinned":false,"hidden":false,"mode":"md"},{"id":563,"value":"viewof model = Inputs.select(\n new Map([\n [\"JC69 (Jukes and Cantor 1969)\", \"JC69\"],\n [\"F81 (Felsenstein 1981)\", \"F81\"],\n [\"K2P (Kimura 1980)\", \"K2P\"],\n [\"HKY85 (Hasegawa 1985)\", \"HKY85\"],\n [\"K3ST (Kimura 1981)\", \"K3ST\"],\n [\"TN93 (Tamura and Nei 1993)\", \"TN93\"],\n [\"SYM (Zharkikh 1994)\", \"SYM\"],\n [\"GTR (Tavaré 1986)\", \"GTR\"]\n ]),\n {\n values: \"JC69\",\n label: \"Model\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1158,"value":"model_desc = html`

Model characteristics: ${constraints[model]} and ${constraints_pi[model]}.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1211,"value":"params = html`

\n${viewof a}\n${viewof b}\n${viewof c}\n${viewof d}\n${viewof e}\n${viewof f}\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1050,"value":"params_pi = html`

\n ${viewof pi_a}\n ${viewof pi_c}\n ${viewof pi_g}\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1229,"value":"param_pi_t = html`${viewof pi_t}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":782,"value":"error_pi_t = pi_t < 0\n ? html`

⚠ ${tex`\\pi_T`} can't be negative.

`\n : html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":211,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":656,"value":"raw_title = md`\"Raw\" substitution matrix :`","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":661,"value":"norm_title = md`Normalized substitution matrix:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":669,"value":"norm_table = html`\n\n \n\n\n \n \n \n \n\n

	To A	To C	To G	To T
From A	${normalize_coeff(\n rateAA\n )}	${normalize_coeff(rateAC)}	${normalize_coeff(\n rateAG\n)}	${normalize_coeff(rateAT)}
From C	${normalize_coeff(\n rateCA\n )}	${normalize_coeff(\n rateCC\n)}	${normalize_coeff(rateCG)}	${normalize_coeff(\n rateCT\n)}
From G	${normalize_coeff(rateGA)}	${normalize_coeff(\n rateGC\n)}	${normalize_coeff(rateGG)}	${normalize_coeff(\n rateGT\n)}
From T	${normalize_coeff(rateTA)}	${normalize_coeff(\n rateTC\n)}	${normalize_coeff(rateTG)}	${normalize_coeff(\n rateTT\n)}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":152,"value":"## Code","pinned":false,"hidden":false,"mode":"md"},{"id":465,"value":"### Data","pinned":false,"hidden":false,"mode":"md"},{"id":225,"value":"nodes = [\n { label: \"A\", x: 0, y: 1, size: Math.max(0.001, pi_a) },\n { label: \"C\", x: 1, y: 1, size: Math.max(0.001, pi_c) },\n { label: \"G\", x: 0, y: 0, size: Math.max(0.001, pi_g) },\n { label: \"T\", x: 1, y: 0, size: Math.max(0.001, pi_t) }\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":220,"value":"edges = [\n {\n label: \"AC\",\n source: \"A\",\n dest: \"C\",\n size: a / f\n },\n {\n label: \"AG\",\n source: \"A\",\n dest: \"G\",\n size: b / f\n },\n {\n label: \"AT\",\n source: \"A\",\n dest: \"T\",\n size: c / f\n },\n {\n label: \"CG\",\n source: \"C\",\n dest: \"G\",\n size: d / f\n },\n {\n label: \"CT\",\n source: \"C\",\n dest: \"T\",\n\n size: e / f\n },\n {\n label: \"GT\",\n source: \"G\",\n dest: \"T\",\n\n size: f / f\n }\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":555,"value":"compute_rate = (views) => {\n const output = htl.html``;\n const update = () => {\n output.textContent = -views\n .map((v) => v.value)\n .reduce((acc, val) => acc + val, 0)\n .toFixed(3);\n };\n for (const view of views) {\n view.addEventListener(\"input\", update);\n invalidation.then(() => view.removeEventListener(\"input\", update));\n }\n update();\n return output;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":678,"value":"normalize_coeff = (x) => (x / normalization_coeff).toFixed(3)","pinned":false,"hidden":false,"mode":"ojs"},{"id":673,"value":"normalization_coeff = -(\n pi_a * rateAA +\n pi_c * rateCC +\n pi_g * rateGG +\n pi_t * rateTT\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":365,"value":"### Chart","pinned":false,"hidden":false,"mode":"md"},{"id":540,"value":"size_factor = 100","pinned":false,"hidden":false,"mode":"ojs"},{"id":215,"value":"draw = chart.update(nodes, edges)","pinned":false,"hidden":false,"mode":"ojs"},{"id":363,"value":"edge_line = (d, nodes) => {\n // Extract node data from label\n const get_node = (label) =>\n nodes\n .filter((n) => n.label == label)\n .map((n) => ({\n x: n.x,\n y: n.y,\n size: (Math.sqrt(n.size) * size_factor) / 2 + 30\n }))[0];\n const pad_coord_x = (x, size) =>\n x == 0 ? x_scale(x) + size : x_scale(x) - size;\n const pad_coord_y = (y, size) =>\n y == 0 ? y_scale(y) - size : y_scale(y) + size;\n\n const c1 = get_node(d.source);\n const c2 = get_node(d.dest);\n let [x1, x2] =\n c1.x == c2.x\n ? [x_scale(c1.x), x_scale(c2.x)]\n : [pad_coord_x(c1.x, c1.size), pad_coord_x(c2.x, c2.size)];\n let [y1, y2] =\n c1.y == c2.y\n ? [y_scale(c1.y), y_scale(c2.y)]\n : [pad_coord_y(c1.y, c1.size), pad_coord_y(c2.y, c2.size)];\n\n const coords = [\n [x1, y1],\n [x2, y2]\n ];\n return d3.line()(coords);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":370,"value":"chart_width = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":372,"value":"chart_height = 400","pinned":false,"hidden":false,"mode":"ojs"},{"id":374,"value":"margins = ({ top: 50, right: 50, bottom: 50, left: 50 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":376,"value":"x_scale = d3.scaleLinear()\n .domain([0, 1])\n .range([margins.left, chart_width - margins.right]);\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":380,"value":"y_scale = d3\n .scaleLinear()\n .domain([0, 1])\n .range([chart_height - margins.bottom, margins.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":157,"value":"### CSS","pinned":false,"hidden":false,"mode":"md"},{"id":159,"value":"styles = html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":154,"value":"### Controls","pinned":false,"hidden":false,"mode":"md"},{"id":812,"value":"viewof a = {\n const update = (e) => {\n if ([\"JC69\", \"F81\"].includes(model)) {\n set(viewof b, e.target.value);\n set(viewof c, e.target.value);\n set(viewof d, e.target.value);\n set(viewof e, e.target.value);\n set(viewof f, e.target.value);\n }\n if ([\"K2P\", \"HKY85\", \"TN93\"].includes(model)) {\n set(viewof c, e.target.value);\n set(viewof d, e.target.value);\n set(viewof f, e.target.value);\n }\n if ([\"K3ST\"].includes(model)) {\n set(viewof f, e.target.value);\n }\n };\n\n let input = Inputs.number([0, 100], {\n label: html`${tex`a`} (transition A↔C)`,\n disabled: false,\n value: 1,\n ...default_params_options\n });\n input.addEventListener(\"input\", update);\n return input;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":819,"value":"viewof b = {\n let disabled = false;\n if ([\"JC69\", \"F81\"].includes(model)) {\n disabled = true;\n }\n const update = (e) => {\n if ([\"K2P\", \"HKY85\", \"K3ST\"].includes(model)) {\n set(viewof e, e.target.value);\n }\n };\n\n let input = Inputs.number([0, 100], {\n label: html`${tex`b`} (transition A↔G)`,\n disabled: disabled,\n value: 1,\n ...default_params_options\n });\n input.addEventListener(\"input\", update);\n return input;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1112,"value":"viewof c = {\n let disabled = false;\n if ([\"JC69\", \"F81\", \"K2P\", \"HKY85\", \"TN93\"].includes(model)) {\n disabled = true;\n }\n const update = (e) => {\n if ([\"K3ST\"].includes(model)) {\n set(viewof d, e.target.value);\n }\n };\n\n let input = Inputs.number([0, 100], {\n label: html`${tex`c`} (transition A↔T)`,\n disabled: disabled,\n value: 1,\n ...default_params_options\n });\n input.addEventListener(\"input\", update);\n return input;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1082,"value":"viewof d = {\n let disabled = false;\n let value = 1;\n if ([\"JC69\", \"F81\", \"K2P\", \"HKY85\", \"TN93\", \"K3ST\"].includes(model)) {\n disabled = true;\n }\n return Inputs.number([0, 100], {\n label: html`${tex`d`} (transition C↔G)`,\n disabled: disabled,\n value: value,\n ...default_params_options\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1083,"value":"viewof e = {\n let disabled = false;\n let value = 1;\n if ([\"JC69\", \"F81\", \"K2P\", \"HKY85\", \"K3ST\"].includes(model)) {\n disabled = true;\n }\n return Inputs.number([0, 100], {\n label: html`${tex`e`} (transition C↔T)`,\n disabled: disabled,\n value: value,\n ...default_params_options\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1085,"value":"viewof f = {\n let disabled = false;\n let value = 1;\n if ([\"JC69\", \"F81\", \"K2P\", \"HKY85\", \"K3ST\", \"TN93\"].includes(model)) {\n disabled = true;\n }\n return Inputs.number([0, 100], {\n label: html`${tex`f`} (transition G↔T)`,\n disabled: disabled,\n value: value,\n ...default_params_options\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1033,"value":"viewof pi_a = gen_param_pi(\"A\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1036,"value":"viewof pi_c = gen_param_pi(\"C\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1037,"value":"viewof pi_g = gen_param_pi(\"G\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":758,"value":"viewof pi_t = Inputs.number({\n label: tex`\\pi_T`,\n value: (1 - (pi_a + pi_c + pi_g)).toFixed(3),\n disabled: true,\n ...default_params_options\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1024,"value":"gen_param_pi = (param) => {\n let disabled = [\"JC69\", \"K2P\", \"K3ST\", \"SYM\"].includes(model);\n return Inputs.number([0.05, 0.95], {\n label: tex`\\pi_${param}`,\n value: 0.25,\n disabled: disabled,\n ...default_params_pi_options\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":571,"value":"default_params_options = ({ width: 100, step: 0.1 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":765,"value":"default_params_pi_options = ({ width: 100, step: 0.05 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":168,"value":"default_input_options = ({ width: 5, step: 0.001 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"rateAA = -(rateAC + rateAG + rateAT).toFixed(3)","pinned":false,"hidden":false,"mode":"ojs"},{"id":127,"value":"rateCC = -(rateCA + rateCG + rateCT).toFixed(3)","pinned":false,"hidden":false,"mode":"ojs"},{"id":128,"value":"rateGG = -(rateGA + rateGC + rateGT).toFixed(3)","pinned":false,"hidden":false,"mode":"ojs"},{"id":130,"value":"rateTT = -(rateTA + rateTC + rateTG).toFixed(3)","pinned":false,"hidden":false,"mode":"ojs"},{"id":595,"value":"rateAC = a * pi_c","pinned":false,"hidden":false,"mode":"ojs"},{"id":611,"value":"rateAG = b * pi_g","pinned":false,"hidden":false,"mode":"ojs"},{"id":613,"value":"rateAT = c * pi_t","pinned":false,"hidden":false,"mode":"ojs"},{"id":615,"value":"rateCA = a * pi_a","pinned":false,"hidden":false,"mode":"ojs"},{"id":617,"value":"rateCG = d * pi_g","pinned":false,"hidden":false,"mode":"ojs"},{"id":618,"value":"rateCT = e * pi_t","pinned":false,"hidden":false,"mode":"ojs"},{"id":620,"value":"rateGA = b * pi_a","pinned":false,"hidden":false,"mode":"ojs"},{"id":622,"value":"rateGC = d * pi_c","pinned":false,"hidden":false,"mode":"ojs"},{"id":624,"value":"rateGT = f * pi_t","pinned":false,"hidden":false,"mode":"ojs"},{"id":627,"value":"rateTA = c * pi_a","pinned":false,"hidden":false,"mode":"ojs"},{"id":628,"value":"rateTC = e * pi_c","pinned":false,"hidden":false,"mode":"ojs"},{"id":630,"value":"rateTG = f * pi_g","pinned":false,"hidden":false,"mode":"ojs"},{"id":1195,"value":"function set(input, value) {\n input.value = value;\n input.dispatchEvent(new Event(\"input\", { bubbles: true }));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1147,"value":"### Doc","pinned":false,"hidden":false,"mode":"md"},{"id":1149,"value":"constraints = ({\n JC69: html`${tex`a=b=c=d=e=f`}`,\n F81: html`${tex`a=b=c=d=e=f`}`,\n K2P: html`${tex`a=c=d=f`} (transversions), ${tex`b=e`} (transitions)`,\n HKY85: html`${tex`a=c=d=f`} (transversions), ${tex`b=e`} (transitions)`,\n K3ST: html`${tex`a=f`} (γ transversions), ${tex`c=d`} (β transversions), ${tex`b=e`} (transitions)`,\n TN93: html`${tex`a=c=d=f`} (transversions), ${tex`b`} (A↔G transitions), ${tex`e`} (C↔T transitions)`,\n SYM: html`${tex`a, b, c, d, e, f`} are free`,\n GTR: html`${tex`a, b, c, d, e, f`} are free`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1155,"value":"constraints_pi = {\n const all_equal = html`${tex`\\pi_A=\\pi_C=\\pi_G=\\pi_T=0.25`}`;\n const all_free = html`all ${tex`\\pi_i`} values are free`;\n return {\n JC69: all_equal,\n F81: all_free,\n K2P: all_equal,\n HKY85: all_free,\n K3ST: all_equal,\n TN93: all_free,\n SYM: all_equal,\n GTR: all_free\n };\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}