2e:null 2f:["$","title",null,{"children":"Confusion Matrix | emma-ba | Observable"}] 34:T81e,// Cf. https://observablehq.com/@fil/sort-stuff-by-similarity function order_by_distance(nodes, distance) { const n = nodes.length; const segments = []; const m = new Map(); if (distance === undefined) distance = euclidian; function D(i, j) { return B[i][j]; } const links = d3 .cross(d3.range(n), d3.range(n)) .map(d => [d[0], d[1], D(d[0], d[1])]) // distance(t[d[0]], t[d[1]])]) .sort((a, b) => d3.ascending(a[2], b[2])); for (const l of links) { if (l[0] === l[1]) continue; // same node const s0 = m.get(l[0]), s1 = m.get(l[1]); if (s0 && s0 === s1) continue; // already linked if (s0 && !s1) { const s = s0, a = l[1]; m.set(a, s); if (D(a, s[0]) < D(a, s[s.length - 1])) { s.unshift(a); } else { s.push(a); } } else if (s1 && !s0) { const s = s1, a = l[0]; m.set(a, s); if (D(a, s[0]) < D(a, s[s.length - 1])) { s.unshift(a); } else { s.push(a); } } else if (!s0 && !s1) { const s = [l[0], l[1]]; m.set(l[0], s); m.set(l[1], s); } else { // join the two segments by the shortest link between their extremities const d00 = D(s0[0], s1[0]), d01 = D(s0[0], s1[s1.length - 1]), d10 = D(s0[s0.length - 1], s1[0]), d11 = D(s0[s0.length - 1], s1[s1.length - 1]), k = d3.scan([d00, d01, d10, d11]); var s; if (k === 0) s = [...s1.reverse(), ...s0]; if (k === 1) s = [...s1, ...s0]; if (k === 2) s = [...s0, ...s1]; if (k === 3) s = [...s0, ...s1.reverse()]; for (const a of s) m.set(a, s); segments.push(s); } } nodes = m.get(0).map(i => nodes[i]); // naive optimization /* const size = 4; for (var t = 4; t-- > 0; ) for (var i = 0; i < nodes.length - size; i++) { if (D(i, i + 2) + D(i + 1, i + 3) < D(i, i + 1) + D(i + 2, i + 3)) { const t = nodes[i + 1]; nodes[i + 1] = nodes[i + 2]; nodes[i + 2] = t; } } */ return nodes; }35:T10c8,function chart(nodes, accessor) { const height = width; var w = width - margin.left - margin.right; var h = width - margin.top - margin.bottom; const ids = nodes.map(d => d.id), matrix = ids.map(source => ids.map(target => ({ source, target, val: accessor({ source, target }) })) ); color_fn.domain([0, d3.max(matrix.flat().map(d => Number(d.val)))]); color_tp.domain([0, d3.max(matrix.flat().map(d => Number(d.val)))]); function colored(d) { const val = d.val; if (val === "UNAVAILABLE") return "lime"; if (val === "NA") return "#ccc"; if (d.source == d.target) return color_tp(+val); if (+val > 0) return color_fn(+val); return "white"; } var x = d3 .scaleBand() .rangeRound([0, w]) .paddingInner(0.1) .align(0) .domain(ids); var svgDOM = d3 .select(DOM.svg(width, height)) .attr("class", "matrixdiagram") .attr("width", w + margin.left + margin.right) .attr("height", h + margin.top + margin.bottom); svgDOM.append("defs").html(css); var svg = svgDOM .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); // text label for the axis svg.append("text") .attr("x", width/2 ) .attr("y", -31 ) .style("text-anchor", "middle") .text("Predicted Class"); svg.append("text") .attr("x", -height/2 ) .attr("y", -31 ) .attr('transform','rotate(270)') .style("text-anchor", "middle") .text("Actual Class"); var row_line = svg .selectAll("g.row") .data(matrix) .enter() .append("g") .attr("transform", d => `translate(0,${x(d[0].source)})`) .each(makeRow); var row = row_line .append("text") .attr("class", "label") .attr("x", -4) .attr("y", x.bandwidth() / 2) .attr("dy", "0.32em") .text(d => d[0].source); var column = svg .selectAll("g.column") .data(matrix) .enter() .append("text") .attr("class", "column label") .attr("transform", d => `translate(${x(d[0].source)},0)rotate(-90)`) .attr("x", 4) .attr("y", x.bandwidth() / 2) .attr("dy", "0.32em") .text(d => d[0].source); function makeRow(rowData) { console.log(rowData); var cell = d3 .select(this) .selectAll("rect") .data(rowData) .enter() .append("rect") .attr("x", d => x(d.target)) .attr("width", x.bandwidth()) .attr("height", x.bandwidth()) .attr("class","cell") .style("fill-opacity", 1) .style("fill", colored); cell .on("mouseover", d => { d3.selectAll('.cell').style("opacity","0.1"); d3.selectAll('.cell') .filter(e => e.target == d.source) .style("opacity","1") .style("stroke","#ccc") .style("stroke-width","1"); d3.selectAll('.cell') .filter(e => e.source == d.target) .style("opacity","1") .style("stroke","#ccc") .style("stroke-width","1"); d3.selectAll('.cell') .filter(e => e.target == d.target) .style("opacity","1") .style("stroke","#000") .style("stroke-width","0.5"); d3.selectAll('.cell') .filter(e => e.source == d.source) .style("opacity","1") .style("stroke","#000") .style("stroke-width","0.5"); d3.selectAll('.cell') .filter(e => (e.target == d.target & e.source == d.source) | (e.source == d.target & e.target == d.source)) .style("stroke","#000") .style("stroke-width","3"); row .filter(e => e[0].source === d.source) .style("fill", "#000") .style("font-weight", "bold"); column .filter(e => e[0].source === d.target) .style("fill", "#000") .style("font-weight", "bold"); }) .on("mouseout", () => { d3.selectAll('.cell') .style("opacity","1") .style("stroke-width","0"); row.style("fill", null).style("font-weight", null); column.style("fill", null).style("font-weight", null); }); cell.append("title").text(d => d.val); } return svgDOM.node(); }36:T18c5,test_ha = ({ matrix: ` c1 c2 c3 c4 c5 c6 c7 c8 c9 c10 c11 c12 c13 c14 c15 c16 c17 c18 c19 c20 c21 c22 c23 c24 c25 c26 c27 c28 c29 c30 c31 c32 c33 c34 c35 c36 c37 c38 c39 c40 c41 c42 c43 c44 c45 c46 c47 c48 c49 c50 c1 524 0 0 4 0 0 28 0 63 0 0 0 0 74 80 0 0 0 0 0 0 0 147 0 0 0 0 0 52 0 0 17 0 0 0 0 32 72 0 121 30 0 0 0 0 0 15 0 0 0 c2 11 473 32 0 4 0 10 33 0 0 78 0 0 0 0 0 15 0 0 0 0 10 0 0 0 21 0 193 0 72 16 12 0 18 0 0 0 0 0 0 5 0 29 0 23 0 0 0 67 159 c3 0 0 533 0 0 69 30 0 0 0 2 176 0 0 0 66 0 5 0 0 0 143 19 121 0 26 0 0 0 0 0 0 0 0 0 0 0 0 73 0 0 1 0 0 6 0 37 90 0 0 c4 0 0 0 546 0 64 0 0 24 28 5 0 0 8 0 17 0 8 0 0 108 0 0 0 0 62 0 0 0 72 0 0 0 0 0 0 0 0 39 65 15 0 26 0 0 64 0 0 0 132 c5 21 0 0 0 485 0 0 0 0 0 0 57 0 5 6 10 16 22 44 44 35 37 60 0 24 0 0 88 93 0 0 0 11 0 0 0 0 0 0 140 99 0 0 0 42 0 0 0 0 22 c6 0 20 0 0 0 487 0 0 0 66 90 0 0 0 0 5 35 8 64 20 23 0 0 5 9 36 72 0 0 0 0 29 57 64 0 0 0 0 0 17 86 0 0 0 185 0 51 0 0 0 c7 0 0 0 0 96 0 682 24 67 0 0 0 0 0 0 89 135 0 49 0 0 0 30 17 0 18 0 0 0 0 0 21 0 0 0 13 0 0 26 0 0 63 63 0 21 0 0 0 0 0 c8 26 2 0 0 0 4 0 472 0 203 5 43 36 0 0 99 0 0 0 0 0 0 80 0 44 0 86 0 0 41 62 0 0 19 0 0 0 0 59 57 18 0 0 0 0 0 8 0 0 0 c9 44 0 0 0 6 0 98 34 465 67 0 0 47 0 89 91 0 0 112 0 0 0 0 43 0 0 0 0 0 0 4 83 0 28 0 0 0 0 33 0 7 0 104 0 0 0 0 7 1 0 c10 1 0 108 0 0 14 0 12 43 742 0 0 0 0 1 0 0 0 12 0 0 49 14 0 0 0 0 0 24 51 0 58 0 0 0 0 30 0 0 0 0 33 30 36 0 0 1 0 55 38 c11 0 0 0 0 0 0 0 0 0 2 657 187 0 0 0 0 0 0 131 0 0 0 0 27 0 0 0 0 41 0 0 0 0 106 4 0 0 0 0 32 0 13 86 0 0 0 0 57 0 46 c12 13 34 0 82 21 0 0 69 67 0 56 491 21 4 0 0 0 12 95 56 36 20 0 0 0 0 0 0 0 0 0 23 0 292 0 0 0 5 99 0 9 0 0 10 0 0 0 20 27 0 c13 0 0 8 0 64 0 0 30 0 82 0 19 484 0 43 0 0 9 0 105 14 0 0 0 0 0 0 0 0 5 0 0 0 0 21 0 0 0 0 0 0 0 23 74 50 0 0 106 16 108 c14 34 0 0 0 0 0 42 0 0 0 41 0 0 527 35 56 56 0 36 0 0 0 0 0 0 0 0 0 45 61 0 70 0 0 0 14 18 0 0 94 0 0 0 69 68 0 0 21 64 0 c15 0 178 28 0 0 0 0 0 0 18 0 10 0 0 645 75 40 0 64 0 0 0 17 0 0 0 1 0 0 0 0 58 127 0 0 30 57 0 37 0 0 0 5 6 53 0 0 0 0 0 c16 97 54 11 16 0 0 0 15 35 133 0 51 0 0 0 666 7 0 13 0 0 0 0 62 0 69 0 0 0 0 0 0 0 0 51 58 0 0 0 0 0 9 0 0 23 0 0 0 0 0 c17 4 0 0 115 0 0 0 0 71 26 7 0 0 0 0 0 451 0 0 30 0 0 76 0 66 50 0 35 0 0 0 3 0 0 0 0 54 53 69 0 11 0 210 0 0 12 0 0 0 0 c18 0 0 0 0 0 0 0 183 13 0 0 159 0 0 3 24 55 529 0 0 0 0 60 0 0 0 0 9 0 23 0 0 0 134 0 0 0 8 79 0 0 2 37 0 0 0 1 0 0 0 c19 0 0 57 0 0 0 102 6 0 0 0 73 0 0 1 0 0 27 462 69 0 0 0 0 0 0 0 38 2 5 0 0 0 0 0 42 0 0 274 0 29 0 0 21 62 67 0 3 0 77 c20 30 0 0 137 0 64 0 0 19 20 0 11 0 32 5 0 0 0 0 547 56 15 0 43 0 0 24 0 43 0 0 0 0 73 0 0 76 0 137 0 0 0 39 0 31 0 0 0 18 11 c21 89 0 0 0 0 11 0 0 0 0 0 0 1 0 48 115 0 0 0 2 452 0 3 51 0 0 29 0 0 0 0 105 104 0 0 0 0 0 154 0 0 0 10 22 89 6 0 0 0 120 c22 0 0 2 0 32 0 0 0 0 10 37 0 13 0 7 0 0 0 0 33 3 492 0 0 0 0 0 0 66 0 69 100 31 17 15 117 29 0 35 0 0 0 0 0 0 0 0 70 0 77 c23 0 0 0 0 131 0 0 0 95 0 0 0 60 0 0 0 29 0 0 1 0 18 509 0 0 0 0 0 0 0 0 105 44 0 3 0 95 12 33 27 0 0 0 0 37 22 22 19 17 0 c24 50 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 80 0 0 94 41 0 52 506 0 0 0 0 0 41 63 0 50 118 0 0 0 55 0 0 0 118 0 67 0 0 10 0 0 10 c25 0 0 0 85 101 0 0 0 39 0 0 0 0 0 22 0 30 20 0 0 0 81 54 39 567 0 0 0 8 0 0 0 0 0 9 7 0 0 3 0 0 0 0 0 96 169 0 0 38 8 c26 0 0 6 0 0 0 32 0 33 47 0 14 64 0 0 1 0 0 0 0 44 9 0 0 0 612 47 25 0 131 0 0 0 180 0 0 0 0 0 0 0 0 20 0 0 0 16 32 6 0 c27 15 0 0 0 0 0 0 0 57 0 0 13 0 0 0 0 0 0 67 37 29 40 72 0 19 0 456 19 131 14 0 35 0 10 0 0 0 36 0 29 0 0 0 94 23 99 17 0 0 0 c28 0 0 105 6 25 0 0 0 0 5 0 13 0 0 0 61 0 0 14 115 0 0 0 8 0 0 62 517 0 0 0 0 84 0 35 5 23 0 0 0 87 0 0 53 0 0 0 0 80 0 c29 0 0 0 0 110 14 0 0 79 0 12 0 83 4 0 33 95 20 23 0 0 21 0 0 0 25 0 0 554 0 20 5 0 0 0 60 0 0 2 9 26 0 0 10 30 0 66 0 0 0 c30 75 27 56 0 0 0 7 36 0 0 0 15 13 18 0 0 30 59 0 0 0 0 0 0 0 0 164 0 0 775 0 66 0 0 0 0 0 40 0 10 0 0 0 0 0 0 0 0 0 0 c31 0 0 0 0 76 44 178 62 0 0 0 0 0 0 0 0 0 0 0 53 0 0 0 0 38 0 114 0 0 70 482 0 0 0 0 0 18 0 37 54 0 0 0 0 49 0 138 0 0 15 c32 32 39 0 101 0 9 29 0 0 0 0 0 0 0 5 10 0 0 0 7 0 0 0 0 0 0 0 0 0 0 0 915 0 89 0 0 0 0 0 0 0 0 8 32 0 0 5 29 0 130 c33 0 0 0 0 76 0 0 0 72 0 0 0 0 66 0 59 0 0 0 128 0 55 0 63 0 75 40 0 60 45 0 0 491 0 0 0 0 0 0 0 0 0 0 98 0 10 0 29 0 0 c34 0 0 79 0 0 0 0 0 56 0 4 206 0 0 0 0 0 121 0 64 0 57 0 86 136 0 12 94 0 0 4 11 0 494 0 0 0 0 32 0 0 0 0 0 16 0 0 0 0 22 c35 0 0 0 59 0 0 0 0 0 0 0 0 0 41 88 0 0 15 69 21 0 0 17 88 0 29 128 30 0 0 14 185 103 0 457 0 0 0 7 0 0 0 3 0 0 0 8 0 0 0 c36 0 0 0 0 4 0 2 0 0 70 1 0 97 64 0 0 0 0 0 56 0 0 56 0 0 39 0 38 0 0 33 0 0 26 0 556 0 0 0 0 82 0 0 0 112 0 108 0 0 2 c37 0 0 79 0 0 0 0 0 0 0 0 0 0 1 0 0 72 0 91 0 0 0 0 0 0 18 0 0 12 0 0 9 0 113 22 8 545 148 98 0 0 0 6 0 0 0 0 39 49 135 c38 0 0 0 0 0 0 0 0 0 0 0 7 0 119 0 76 0 49 25 0 0 47 0 0 0 28 0 0 80 0 49 49 118 32 60 0 16 491 0 42 0 0 7 0 0 0 0 0 0 0 c39 3 0 0 0 0 0 0 0 0 0 67 0 0 11 7 0 5 0 39 64 0 17 0 0 0 0 0 15 0 72 21 0 0 103 0 0 0 3 654 1 36 0 0 0 8 0 128 52 0 135 c40 14 0 0 0 65 33 57 84 0 11 0 28 0 0 0 0 31 0 0 0 0 0 0 63 13 47 8 0 0 0 0 0 53 0 0 0 0 20 1 515 83 0 0 0 0 78 0 0 25 50 c41 58 0 0 0 0 0 51 59 137 7 10 61 0 30 0 20 62 0 42 0 55 0 24 0 0 0 0 81 0 6 10 0 0 0 0 0 0 0 0 0 535 0 0 9 0 0 0 0 70 30 c42 0 0 0 0 0 0 10 0 0 19 0 3 0 37 0 0 0 36 0 8 0 101 42 2 0 0 0 0 9 0 0 13 0 0 13 0 64 57 19 86 0 534 0 204 0 0 0 0 0 0 c43 42 0 67 0 34 0 40 0 0 171 0 304 0 0 95 0 48 20 0 0 0 38 0 294 0 0 17 73 0 0 0 14 23 0 0 0 0 6 0 26 46 88 466 46 0 72 0 0 42 0 c44 0 0 0 2 0 63 0 0 0 0 0 4 12 0 0 0 49 0 0 0 10 0 0 71 0 0 0 30 17 0 42 0 0 10 0 0 113 0 0 1 0 0 83 806 6 0 21 0 0 0 c45 0 18 0 67 0 0 0 0 0 0 0 0 0 0 0 34 0 0 0 3 0 0 0 0 0 0 0 0 0 57 122 46 0 141 0 25 0 57 0 0 0 53 0 51 683 0 0 79 0 0 c46 0 0 0 0 0 0 0 0 0 132 0 88 14 49 0 38 27 78 0 0 0 0 0 0 107 0 0 0 0 0 0 0 53 32 0 0 0 0 29 0 0 0 0 0 0 453 90 0 0 90 c47 0 0 0 0 0 41 0 0 0 26 0 58 0 0 95 0 0 67 16 0 11 0 128 0 0 0 0 8 0 25 0 30 0 0 67 3 0 0 0 0 72 0 139 35 0 0 477 0 0 47 c48 22 128 84 13 0 0 0 0 0 0 0 59 22 0 4 0 1 0 16 0 67 6 0 38 14 0 36 0 0 19 0 31 0 8 0 147 0 0 0 0 8 46 0 34 53 0 0 470 13 0 c49 0 38 0 0 0 0 70 0 0 71 0 107 54 0 41 41 0 0 104 28 0 40 0 0 0 7 30 0 0 0 50 0 0 0 0 0 18 0 0 52 0 0 0 71 0 0 0 0 475 0 c50 0 0 0 0 0 0 0 27 0 0 0 32 15 0 0 0 20 0 0 22 0 0 0 4 99 68 0 0 0 0 44 98 77 0 16 0 91 0 0 0 0 58 0 37 0 0 53 54 74 462 `, groups: ` ` })37:[] 32:{"id":"d22b01faa8096d91","slug":"confusion-matrix","title":"Confusion Matrix","thumbnail":"57b9befa1c97ef6d8736cad9efb146ce9398b72bcfc3f1320ca7972f2a600449","access_level":"public","create_time":"$D2020-03-31T18:55:33.892Z","update_time":"$D2020-04-03T07:19:52.617Z","view_time":null,"first_public_time":"$D2020-04-01T08:55:06.324Z","has_unpublished_edits":null,"fork":{"id":"d4fbc0020e69fc94","slug":"protein-matrix","title":"Protein Matrix","owner":{"id":"da2a32154638c457","login":"fil","name":"Fil"}},"stars":4,"starred":false,"owner":{"type":"team","id":"5d9b00b2cdcd8028","login":"emma-ba","name":"","avatar_url":"https://avatars-next.observableusercontent.com/3950b079ad1fc587c84ccfe712c3cc77ad1e122194ac7deeaf2ea35c7bf0f25a","tier":"starter_2024"},"version":1681,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"261e0273bd70e808","login":"emma-ba","name":"","avatar_url":"https://avatars-next.observableusercontent.com/3950b079ad1fc587c84ccfe712c3cc77ad1e122194ac7deeaf2ea35c7bf0f25a","tier":null}],"members":[{"type":"individual","id":"261e0273bd70e808","login":"emma-ba","name":"","avatar_url":"https://avatars-next.observableusercontent.com/3950b079ad1fc587c84ccfe712c3cc77ad1e122194ac7deeaf2ea35c7bf0f25a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":10,"collection":null,"type":"notebook","body":{"title":"Confusion Matrix","cells":[{"id":0,"value":"md`# Confusion Matrix\n\nEach cell shows the number of objects that belong to the same *actual* class, and are classified into the same *predicted* class. The diagonal cells are correct classifications (True Positives, TP). All the other cells are errors.\n\nHovering a cell highlights the actual & predicted class, and shows the number of errors (wait 1s for it to appear). It also shows the opposite relationships between these classes. For instance, when inspecting the errors between classes c1 and c2, we must not forget to check both i) objects belonging to c1 and classified as c2, and ii) object belonging to c2 and classified as c1.\n\nThe order of the rows & columns can be either i) alphabetical, or ii) grouped to show clusters of classes that are confused with each others.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":598,"value":"chart(sorted ? nodes_sorted : nodes, value)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1399,"value":"(chart, colorLegend({ color: color_fn, title: \"Error\", tickformat: '.0s'}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1577,"value":"(chart, colorLegend({color: color_tp, title: \"TP\", tickformat: '.0s'}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1264,"value":"viewof sorted = checkbox({ options: [\"Sort classes\"], value: [\"Sort nodes\"] })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":749,"value":"md`## Matrix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":527,"value":"viewof matrix = {\n const textarea = html`

${test_ha.matrix}`;\n  textarea.style.display = \"block\";\n  textarea.style.boxSizing = \"border-box\";\n  textarea.style.width = \"calc(100% + 28px)\";\n  textarea.style.font = \"var(--mono_fonts)\";\n  textarea.style.minHeight = \"60px\";\n  textarea.style.border = \"none\";\n  textarea.style.padding = \"4px 10px\";\n  textarea.style.margin = \"0 -14px\";\n  textarea.style.background = \"rgb(247,247,249)\";\n  textarea.style.tabSize = 2;\n  textarea.oninput = () =>\n    (textarea.style.height = `${Math.min(\n      800,\n      textarea.value.match(/^/gm).length * 21 + 8\n    )}px`);\n  textarea.oninput();\n  return textarea;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1203,"value":"md`---\n## Sorting`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1218,"value":"nodes_sorted = {\n  const nodes = order_by_distance(data.nodes);\n\n  // largest group must come first: reverse if it's not the case\n  const order = nodes.map(d => data.nodes.indexOf(d)),\n    n = nodes.length;\n\n  var sum = 0;\n  for (let i = 0; i < n; i++) {\n    for (let j = 0; j < n; j++) {\n      sum += (A[order[i]][order[j]] < 0.2 ? 1 : 0) * Math.sign(n - (i + j));\n    }\n  }\n  if (sum < 0) nodes.reverse();\n\n  return nodes;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":953,"value":"function euclidian(a, b) {\n  return Math.sqrt(\n    a.map((_, i) => (a[i] - b[i]) ** 2).reduce((a, b) => a + b, 0)\n  );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1050,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":530,"value":"refs = matrix\n  .trim()\n  .split(\"\\n\")\n  .slice(1)\n  .map(l => l.split(/\\t/))\n  .filter(d => !!d)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":538,"value":"nodes = refs.map((d, i) => ({\n  id: d[0].replace(/_.*/, \"\"),\n  index: \"_\" + i\n}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":540,"value":"links = refs\n  .map((l, i) =>\n    l.slice(1).map((affinity, j) => ({\n      source: nodes[i].id,\n      target: nodes[j].id,\n      value: +affinity\n    }))\n  )\n  .flat()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1427,"value":"value = ({ source, target }) => {\n  const a = links.filter(d => d.source === source && d.target === target).pop();\n  if (a) return a.value;\n  return -1;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":546,"value":"data = ({ nodes, links })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"A = {\n  const A = Array.from(data.nodes).map((_, i) =>\n      Array.from(data.nodes, (_, j) => (i === j ? 0 : 2))\n    ),\n    m = [...new Set(data.nodes.map(d => d.id)).values()];\n  data.links\n    .filter(l => l.value > 0.001)\n    .forEach(l => {\n      const i = m.indexOf(l.source),\n        j = m.indexOf(l.target),\n        v = Math.pow(\n          1.0 - l.value,\n          1\n        ) /* * (nodes[i].group == nodes[j].group ? 1 : 1) */;\n      if (i > -1 && j > -1) {\n        A[i][j] = v;\n        A[j][i] = v;\n      }\n    });\n  return A;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1017,"value":"B = {\n  const B = A.map(d => d.slice());\n\n  for (let i = 0; i < B.length; i++) {\n    for (let j = 0; j < B.length; j++) {\n      B[i][j] = A[i][j];\n      for (let k = 0; k < B.length; k++) {\n        B[i][j] +=\n          Math.max(Math.abs(A[i][k] - A[j][k]), 0) / 3 / nodes.length;\n      }\n    }\n  }\n\n  return B;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1330,"value":"md`---\n## Chart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1324,"value":"md`Matrix Diagram adapted from [Brian Staats](https://observablehq.com/@bstaats/matrix-diagram).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":596,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1301,"value":"css = {\n  const w = width - margin.left - margin.right,\n    n = data.nodes.length,\n    r = (0.75 * w) / n;\n  return `<style>\n  svg.matrixdiagram {\n    font: ${r}px sans-serif;\n  }\n  svg.matrixdiagram .label {\n    fill: #999;\n    font-size: ${r}px;\n    text-anchor: end;\n  }\n  svg.matrixdiagram .column.label {\n    text-anchor: start;\n  }\n  svg.matrixdiagram rect {\n    fill: #eee;\n    /* stroke: #d62333; */\n    stroke: #fff;\n    stroke-width: 0;\n  }\n  svg.matrixdiagram rect:hover {\n    stroke-width: 2px;\n  }\n</style>`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1391,"value":"md`## Libs`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1572,"value":"color_tp = d3.scaleSequentialSqrt(t => d3.interpolateBlues(t))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1403,"value":"color_fn = d3.scaleSequentialSqrt(t => d3.interpolateReds(t))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1602,"value":"import {legend as colorLegend} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1303,"value":"margin = {\n  const r =\n    d3.max(data.nodes, d => d.id.length) * (width / data.nodes.length / 2.5);\n  return {\n    top: 20 + r,\n    left: 20 + r,\n    right: 10,\n    bottom: 10\n  };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"height = width * 0.9","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":564,"value":"import {checkbox, select, slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"d3 = require(\"d3@5\", \"d3-array@2\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1388,"value":"md`## Test Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":738,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}}
33:"$32:body"
</article></body></html>