Built with blockbuilder.org
| <!DOCTYPE html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> | |
| <script src="http://d3js.org/queue.v1.min.js" type="text/javascript"></script> | |
| <script type="text/javascript" src="http://mbostock.github.com/d3/d3.geom.js"></script> | |
| <script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js"></script> | |
| <style> | |
| body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } | |
| svg { width:100%; height: 100% } | |
| .node circle { | |
| stroke-width: 2px; | |
| } | |
| .node text { | |
| font-family: sans-serif; | |
| text-anchor: middle; | |
| pointer-events: none; | |
| user-select: none; | |
| -webkit-user-select: none; | |
| } | |
| .link { | |
| stroke-width: 4px; | |
| } | |
| text { | |
| font: 10px sans-serif; | |
| pointer-events: none; | |
| } | |
| #end-arrow { | |
| fill: #88A; | |
| } | |
| h2 { | |
| text-align: left; | |
| padding: 1px 0px 0px 130px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div style="width: 960px;"> | |
| <div class="container" id="chart1" style="float: left; width: 300px; height: 700px;"><h2>Cohort A</h2></div> | |
| <div class="container" id="chart2" style="float: left; width: 300px; height: 700px;"><h2>Cohort B</h2></div> | |
| <div class="container" id="chart3" style="float: left; width: 300px; height: 700px;"><h2>Cohort C</h2></div> | |
| <br style="clear: left;" /> | |
| </div> | |
| <div > | |
| </div> | |
| <div class="container" id="chart2"> | |
| </div> | |
| <script> | |
| var matrix = [ | |
| { | |
| "id": "A-A", | |
| "x": "0", | |
| "y": "0", | |
| "weight": "" | |
| }, | |
| { | |
| "id": "A-B", | |
| "x": "1", | |
| "y": "0", | |
| "weight": "100" | |
| }, | |
| { | |
| "id": "A-C", | |
| "x": "2", | |
| "y": "0", | |
| "weight": "77" | |
| }, | |
| { | |
| "id": "A-D", | |
| "x": "3", | |
| "y": "0", | |
| "weight": "95" | |
| }, | |
| { | |
| "id": "A-E", | |
| "x": "4", | |
| "y": "0", | |
| "weight": "18" | |
| }, | |
| { | |
| "id": "A-F", | |
| "x": "5", | |
| "y": "0", | |
| "weight": "35" | |
| }, | |
| { | |
| "id": "A-G", | |
| "x": "6", | |
| "y": "0", | |
| "weight": "21" | |
| }, | |
| { | |
| "id": "A-H", | |
| "x": "7", | |
| "y": "0", | |
| "weight": "38" | |
| }, | |
| { | |
| "id": "A-I", | |
| "x": "8", | |
| "y": "0", | |
| "weight": "17" | |
| }, | |
| { | |
| "id": "A-J", | |
| "x": "9", | |
| "y": "0", | |
| "weight": "40" | |
| }, | |
| { | |
| "id": "A-K", | |
| "x": "10", | |
| "y": "0", | |
| "weight": "25" | |
| }, | |
| { | |
| "id": "A-L", | |
| "x": "11", | |
| "y": "0", | |
| "weight": "25" | |
| }, | |
| { | |
| "id": "B-A", | |
| "x": "0", | |
| "y": "1", | |
| "weight": "0" | |
| }, | |
| { | |
| "id": "B-B", | |
| "x": "1", | |
| "y": "1", | |
| "weight": "" | |
| }, | |
| { | |
| "id": "B-C", | |
| "x": "2", | |
| "y": "1", | |
| "weight": "28" | |
| }, | |
| { | |
| "id": "B-D", | |
| "x": "3", | |
| "y": "1", | |
| "weight": "13" | |
| }, | |
| { | |
| "id": "B-E", | |
| "x": "4", | |
| "y": "1", | |
| "weight": "22" | |
| }, | |
| { | |
| "id": "B-F", | |
| "x": "5", | |
| "y": "1", | |
| "weight": "7" | |
| }, | |
| { | |
| "id": "B-G", | |
| "x": "6", | |
| "y": "1", | |
| "weight": "3" | |
| }, | |
| { | |
| "id": "B-H", | |
| "x": "7", | |
| "y": "1", | |
| "weight": "23" | |
| }, | |
| { | |
| "id": "B-I", | |
| "x": "8", | |
| "y": "1", | |
| "weight": "12" | |
| }, | |
| { | |
| "id": "B-J", | |
| "x": "9", | |
| "y": "1", | |
| "weight": "19" | |
| }, | |
| { | |
| "id": "B-K", | |
| "x": "10", | |
| "y": "1", | |
| "weight": "12" | |
| }, | |
| { | |
| "id": "B-L", | |
| "x": "11", | |
| "y": "1", | |
| "weight": "14" | |
| }, | |
| { | |
| "id": "C-A", | |
| "x": "0", | |
| "y": "2", | |
| "weight": "0" | |
| }, | |
| { | |
| "id": "C-B", | |
| "x": "1", | |
| "y": "2", | |
| "weight": "3" | |
| }, | |
| { | |
| "id": "C-C", | |
| "x": "2", | |
| "y": "2", | |
| "weight": "" | |
| }, | |
| { | |
| "id": "C-D", | |
| "x": "3", | |
| "y": "2", | |
| "weight": "8" | |
| }, | |
| { | |
| "id": "C-E", | |
| "x": "4", | |
| "y": "2", | |
| "weight": "5" | |
| }, | |
| { | |
| "id": "C-F", | |
| "x": "5", | |
| "y": "2", | |
| "weight": "12" | |
| }, | |
| { | |
| "id": "C-G", | |
| "x": "6", | |
| "y": "2", | |
| "weight": "5" | |
| }, | |
| { | |
| "id": "C-H", | |
| "x": "7", | |
| "y": "2", | |
| "weight": "1" | |
| }, | |
| { | |
| "id": "C-I", | |
| "x": "8", | |
| "y": "2", | |
| "weight": "5" | |
| }, | |
| { | |
| "id": "C-J", | |
| "x": "9", | |
| "y": "2", | |
| "weight": "14" | |
| }, | |
| { | |
| "id": "C-K", | |
| "x": "10", | |
| "y": "2", | |
| "weight": "9" | |
| }, | |
| { | |
| "id": "C-L", | |
| "x": "11", | |
| "y": "2", | |
| "weight": "3" | |
| }, | |
| { | |
| "id": "D-A", | |
| "x": "0", | |
| "y": "3", | |
| "weight": "1" | |
| }, | |
| { | |
| "id": "D-B", | |
| "x": "1", | |
| "y": "3", | |
| "weight": "1" | |
| }, | |
| { | |
| "id": "D-C", | |
| "x": "2", | |
| "y": "3", | |
| "weight": "6" | |
| }, | |
| { | |
| "id": "D-D", | |
| "x": "3", | |
| "y": "3", | |
| "weight": "" | |
| }, | |
| { | |
| "id": "D-E", | |
| "x": "4", | |
| "y": "3", | |
| "weight": "18" | |
| }, | |
| { | |
| "id": "D-F", | |
| "x": "5", | |
| "y": "3", | |
| "weight": "29" | |
| }, | |
| { | |
| "id": "D-G", | |
| "x": "6", | |
| "y": "3", | |
| "weight": "18" | |
| }, | |
| { | |
| "id": "D-H", | |
| "x": "7", | |
| "y": "3", | |
| "weight": "47" | |
| }, | |
| { | |
| "id": "D-I", | |
| "x": "8", | |
| "y": "3", | |
| "weight": "5" | |
| }, | |
| { | |
| "id": "D-J", | |
| "x": "9", | |
| "y": "3", | |
| "weight": "11" | |
| }, | |
| { | |
| "id": "D-K", | |
| "x": "10", | |
| "y": "3", | |
| "weight": "4" | |
| }, | |
| { | |
| "id": "D-L", | |
| "x": "11", | |
| "y": "3", | |
| "weight": "3" | |
| }, | |
| { | |
| "id": "E-A", | |
| "x": "0", | |
| "y": "4", | |
| "weight": "0" | |
| }, | |
| { | |
| "id": "E-B", | |
| "x": "1", | |
| "y": "4", | |
| "weight": "1" | |
| }, | |
| { | |
| "id": "E-C", | |
| "x": "2", | |
| "y": "4", | |
| "weight": "0" | |
| }, | |
| { | |
| "id": "E-D", | |
| "x": "3", | |
| "y": "4", | |
| "weight": "0" | |
| }, | |
| { | |
| "id": "E-E", | |
| "x": "4", | |
| "y": "4", | |
| "weight": "" | |
| }, | |
| { | |
| "id": "E-F", | |
| "x": "5", | |
| "y": "4", | |
| "weight": "16" | |
| }, | |
| { | |
| "id": "E-G", | |
| "x": "6", | |
| "y": "4", | |
| "weight": "2" | |
| }, | |
| { | |
| "id": "E-H", | |
| "x": "7", | |
| "y": "4", | |
| "weight": "2" | |
| }, | |
| { | |
| "id": "E-I", | |
| "x": "8", | |
| "y": "4", | |
| "weight": "0" | |
| }, | |
| { | |
| "id": "E-J", | |
| "x": "9", | |
| "y": "4", | |
| "weight": "14" | |
| }, | |
| { | |
| "id": "E-K", | |
| "x": "10", | |
| "y": "4", | |
| "weight": "3" | |
| }, | |
| { | |
| "id": "E-L", | |
| "x": "11", | |
| "y": "4", | |
| "weight": "0" | |
| }, | |
| { | |
| "id": "F-A", | |
| "x": "0", | |
| "y": "5", | |
| "weight": "0" | |
| }, | |
| { | |
| "id": "F-B", | |
| "x": "1", | |
| "y": "5", | |
| "weight": "0" | |
| }, | |
| { | |
| "id": "F-C", | |
| "x": "2", | |
| "y": "5", | |
| "weight": "3" | |
| }, | |
| { | |
| "id": "F-D", | |
| "x": "3", | |
| "y": "5", | |
| "weight": "1" | |
| }, | |
| { | |
| "id": "F-E", | |
| "x": "4", | |
| "y": "5", | |
| "weight": "12" | |
| }, | |
| { | |
| "id": "F-F", | |
| "x": "5", | |
| "y": "5", | |
| "weight": "" | |
| }, | |
| { | |
| "id": "F-G", | |
| "x": "6", | |
| "y": "5", | |
| "weight": "23" | |
| }, | |
| { | |
| "id": "F-H", | |
| "x": "7", | |
| "y": "5", | |
| "weight": "11" | |
| }, | |
| { | |
| "id": "F-I", | |
| "x": "8", | |
| "y": "5", | |
| "weight": "9" | |
| }, | |
| { | |
| "id": "F-J", | |
| "x": "9", | |
| "y": "5", | |
| "weight": "11" | |
| }, | |
| { | |
| "id": "F-K", | |
| "x": "10", | |
| "y": "5", | |
| "weight": "10" | |
| }, | |
| { | |
| "id": "F-L", | |
| "x": "11", | |
| "y": "5", | |
| "weight": "11" | |
| }, | |
| { | |
| "id": "G-A", | |
| "x": "0", | |
| "y": "6", | |
| "weight": "0" | |
| }, | |
| { | |
| "id": "G-B", | |
| "x": "1", | |
| "y": "6", | |
| "weight": "1" | |
| }, | |
| { | |
| "id": "G-C", | |
| "x": "2", | |
| "y": "6", | |
| "weight": "1" | |
| }, | |
| { | |
| "id": "G-D", | |
| "x": "3", | |
| "y": "6", | |
| "weight": "6" | |
| }, | |
| { | |
| "id": "G-E", | |
| "x": "4", | |
| "y": "6", | |
| "weight": "2" | |
| }, | |
| { | |
| "id": "G-F", | |
| "x": "5", | |
| "y": "6", | |
| "weight": "3" | |
| }, | |
| { | |
| "id": "G-G", | |
| "x": "6", | |
| "y": "6", | |
| "weight": "" | |
| }, | |
| { | |
| "id": "G-H", | |
| "x": "7", | |
| "y": "6", | |
| "weight": "2" | |
| }, | |
| { | |
| "id": "G-I", | |
| "x": "8", | |
| "y": "6", | |
| "weight": "2" | |
| }, | |
| { | |
| "id": "G-J", | |
| "x": "9", | |
| "y": "6", | |
| "weight": "7" | |
| }, | |
| { | |
| "id": "G-K", | |
| "x": "10", | |
| "y": "6", | |
| "weight": "1" | |
| }, | |
| { | |
| "id": "G-L", | |
| "x": "11", | |
| "y": "6", | |
| "weight": "2" | |
| }, | |
| { | |
| "id": "H-A", | |
| "x": "0", | |
| "y": "7", | |
| "weight": "0" | |
| }, | |
| { | |
| "id": "H-B", | |
| "x": "1", | |
| "y": "7", | |
| "weight": "0" | |
| }, | |
| { | |
| "id": "H-C", | |
| "x": "2", | |
| "y": "7", | |
| "weight": "1" | |
| }, | |
| { | |
| "id": "H-D", | |
| "x": "3", | |
| "y": "7", | |
| "weight": "0" | |
| }, | |
| { | |
| "id": "H-E", | |
| "x": "4", | |
| "y": "7", | |
| "weight": "2" | |
| }, | |
| { | |
| "id": "H-F", | |
| "x": "5", | |
| "y": "7", | |
| "weight": "1" | |
| }, | |
| { | |
| "id": "H-G", | |
| "x": "6", | |
| "y": "7", | |
| "weight": "0" | |
| }, | |
| { | |
| "id": "H-H", | |
| "x": "7", | |
| "y": "7", | |
| "weight": "" | |
| }, | |
| { | |
| "id": "H-I", | |
| "x": "8", | |
| "y": "7", | |
| "weight": "2" | |
| }, | |
| { | |
| "id": "H-J", | |
| "x": "9", | |
| "y": "7", | |
| "weight": "6" | |
| }, | |
| { | |
| "id": "H-K", | |
| "x": "10", | |
| "y": "7", | |
| "weight": "4" | |
| }, | |
| { | |
| "id": "H-L", | |
| "x": "11", | |
| "y": "7", | |
| "weight": "4" | |
| }, | |
| { | |
| "id": "I-A", | |
| "x": "0", | |
| "y": "8", | |
| "weight": "0" | |
| }, | |
| { | |
| "id": "I-B", | |
| "x": "1", | |
| "y": "8", | |
| "weight": "0" | |
| }, | |
| { | |
| "id": "I-C", | |
| "x": "2", | |
| "y": "8", | |
| "weight": "0" | |
| }, | |
| { | |
| "id": "I-D", | |
| "x": "3", | |
| "y": "8", | |
| "weight": "1" | |
| }, | |
| { | |
| "id": "I-E", | |
| "x": "4", | |
| "y": "8", | |
| "weight": "0" | |
| }, | |
| { | |
| "id": "I-F", | |
| "x": "5", | |
| "y": "8", | |
| "weight": "1" | |
| }, | |
| { | |
| "id": "I-G", | |
| "x": "6", | |
| "y": "8", | |
| "weight": "2" | |
| }, | |
| { | |
| "id": "I-H", | |
| "x": "7", | |
| "y": "8", | |
| "weight": "0" | |
| }, | |
| { | |
| "id": "I-I", | |
| "x": "8", | |
| "y": "8", | |
| "weight": "" | |
| }, | |
| { | |
| "id": "I-J", | |
| "x": "9", | |
| "y": "8", | |
| "weight": "7" | |
| }, | |
| { | |
| "id": "I-K", | |
| "x": "10", | |
| "y": "8", | |
| "weight": "0" | |
| }, | |
| { | |
| "id": "I-L", | |
| "x": "11", | |
| "y": "8", | |
| "weight": "2" | |
| }, | |
| { | |
| "id": "J-A", | |
| "x": "0", | |
| "y": "9", | |
| "weight": "0" | |
| }, | |
| { | |
| "id": "J-B", | |
| "x": "1", | |
| "y": "9", | |
| "weight": "0" | |
| }, | |
| { | |
| "id": "J-C", | |
| "x": "2", | |
| "y": "9", | |
| "weight": "0" | |
| }, | |
| { | |
| "id": "J-D", | |
| "x": "3", | |
| "y": "9", | |
| "weight": "0" | |
| }, | |
| { | |
| "id": "J-E", | |
| "x": "4", | |
| "y": "9", | |
| "weight": "1" | |
| }, | |
| { | |
| "id": "J-F", | |
| "x": "5", | |
| "y": "9", | |
| "weight": "1" | |
| }, | |
| { | |
| "id": "J-G", | |
| "x": "6", | |
| "y": "9", | |
| "weight": "16" | |
| }, | |
| { | |
| "id": "J-H", | |
| "x": "7", | |
| "y": "9", | |
| "weight": "2" | |
| }, | |
| { | |
| "id": "J-I", | |
| "x": "8", | |
| "y": "9", | |
| "weight": "0" | |
| }, | |
| { | |
| "id": "J-J", | |
| "x": "9", | |
| "y": "9", | |
| "weight": "" | |
| }, | |
| { | |
| "id": "J-K", | |
| "x": "10", | |
| "y": "9", | |
| "weight": "1" | |
| }, | |
| { | |
| "id": "J-L", | |
| "x": "11", | |
| "y": "9", | |
| "weight": "0" | |
| }, | |
| { | |
| "id": "K-A", | |
| "x": "0", | |
| "y": "10", | |
| "weight": "0" | |
| }, | |
| { | |
| "id": "K-B", | |
| "x": "1", | |
| "y": "10", | |
| "weight": "1" | |
| }, | |
| { | |
| "id": "K-C", | |
| "x": "2", | |
| "y": "10", | |
| "weight": "0" | |
| }, | |
| { | |
| "id": "K-D", | |
| "x": "3", | |
| "y": "10", | |
| "weight": "0" | |
| }, | |
| { | |
| "id": "K-E", | |
| "x": "4", | |
| "y": "10", | |
| "weight": "0" | |
| }, | |
| { | |
| "id": "K-F", | |
| "x": "5", | |
| "y": "10", | |
| "weight": "2" | |
| }, | |
| { | |
| "id": "K-G", | |
| "x": "6", | |
| "y": "10", | |
| "weight": "0" | |
| }, | |
| { | |
| "id": "K-H", | |
| "x": "7", | |
| "y": "10", | |
| "weight": "0" | |
| }, | |
| { | |
| "id": "K-I", | |
| "x": "8", | |
| "y": "10", | |
| "weight": "0" | |
| }, | |
| { | |
| "id": "K-J", | |
| "x": "9", | |
| "y": "10", | |
| "weight": "0" | |
| }, | |
| { | |
| "id": "K-K", | |
| "x": "10", | |
| "y": "10", | |
| "weight": "" | |
| }, | |
| { | |
| "id": "K-L", | |
| "x": "11", | |
| "y": "10", | |
| "weight": "2" | |
| }, | |
| { | |
| "id": "L-A", | |
| "x": "0", | |
| "y": "11", | |
| "weight": "2" | |
| }, | |
| { | |
| "id": "L-B", | |
| "x": "1", | |
| "y": "11", | |
| "weight": "1" | |
| }, | |
| { | |
| "id": "L-C", | |
| "x": "2", | |
| "y": "11", | |
| "weight": "0" | |
| }, | |
| { | |
| "id": "L-D", | |
| "x": "3", | |
| "y": "11", | |
| "weight": "2" | |
| }, | |
| { | |
| "id": "L-E", | |
| "x": "4", | |
| "y": "11", | |
| "weight": "0" | |
| }, | |
| { | |
| "id": "L-F", | |
| "x": "5", | |
| "y": "11", | |
| "weight": "0" | |
| }, | |
| { | |
| "id": "L-G", | |
| "x": "6", | |
| "y": "11", | |
| "weight": "1" | |
| }, | |
| { | |
| "id": "L-H", | |
| "x": "7", | |
| "y": "11", | |
| "weight": "0" | |
| }, | |
| { | |
| "id": "L-I", | |
| "x": "8", | |
| "y": "11", | |
| "weight": "1" | |
| }, | |
| { | |
| "id": "L-J", | |
| "x": "9", | |
| "y": "11", | |
| "weight": "1" | |
| }, | |
| { | |
| "id": "L-K", | |
| "x": "10", | |
| "y": "11", | |
| "weight": "0" | |
| }, | |
| { | |
| "id": "L-L", | |
| "x": "11", | |
| "y": "11", | |
| "weight": "" | |
| } | |
| ] | |
| // function to take original data and turn it into subset of only highest values | |
| function bestOfPairs(input) { | |
| var pairId = elm => elm.id.split('-').sort().join(''), // creates an id that's the same for both elements of a "pair" | |
| byWeight = (a, b) => parseInt(b.weight) - parseInt(a.weight); // reverse sort by weight: best candidate will be first in array | |
| grouped = input.reduce((m, x) => | |
| (m[pairId(x)] = (m[pairId(x)] || []).concat(x)) && m // groups together elements as pairs, based on their id | |
| , {}); | |
| return Object.keys(grouped).map(id => { // each "id" here is the "pairs" id, that is, the id being used to create the groups | |
| var sorted = grouped[id].sort(byWeight), | |
| invalid = sorted[1] == undefined || | |
| sorted[0].weight == sorted[1].weight; | |
| return invalid ? null : sorted[0]; // returns the element with higher weight, or null if they're equal, or there's only one | |
| }) | |
| .filter(x => x !== null); // this removes elments with the same weight | |
| } | |
| // Get worst ones including ties | |
| function worstOfPairs(input) { | |
| var pairId = elm => elm.id.split('-').sort().join(''), // creates an id that's the same for both elements of a "pair" | |
| byWeight = (a, b) => parseInt(a.weight) - parseInt(b.weight); // reverse sort by weight: worst candidate will be first in array | |
| grouped = input.reduce((m, x) => | |
| (m[pairId(x)] = (m[pairId(x)] || []).concat(x)) && m // groups together elements as pairs, based on their id | |
| , {}); | |
| return Object.keys(grouped).map(id => { // each "id" here is the "pairs" id, that is, the id being used to create the groups | |
| var sorted = grouped[id].sort(byWeight), | |
| invalid = sorted[1] == undefined || | |
| sorted[0].weight == sorted[1].weight; | |
| return invalid ? sorted : sorted[0]; // returns the element with higher weight, or null if they're equal, or there's only one | |
| }) | |
| .filter(x => x !== null); // this removes elments with the same weight | |
| } | |
| function flatten(arr) { | |
| return arr.reduce(function (flat, toFlatten) { | |
| return flat.concat(Array.isArray(toFlatten) ? flatten(toFlatten) : toFlatten); | |
| }, []); | |
| } // if ties, need to flatten | |
| function binarize(mat) { | |
| var matx = bestOfPairs(mat); // this is the filtered matrix | |
| var maty = worstOfPairs(mat); // this is the filtered matrix | |
| // add weights as new variable | |
| for(var i=0; i<matx.length;i++) { | |
| matx[i].weightnew = 1; | |
| } | |
| maty = flatten(maty); | |
| // add new weights... | |
| for(var i=0; i<maty.length;i++) { | |
| maty[i].weightnew = ""; | |
| } | |
| // join good and bad ones together | |
| var matxy = matx.concat(maty); | |
| return matxy; | |
| } | |
| var matrix1 = binarize(matrix); | |
| // sizes etc. | |
| W = 20 | |
| H = 20 | |
| // add scale | |
| var weightScale = d3.scale.linear() | |
| .domain(d3.extent(function(d){ return d.weight })) | |
| .range([0,1]) | |
| // fill matrix | |
| d3.select("div#chart1").append("svg") | |
| .attr("width", W*6) | |
| .attr("height", H*6) | |
| .append("g") | |
| .attr("id", "adjacencyG") | |
| .attr("transform", "translate(50,20)") | |
| .selectAll("rect") | |
| .data(matrix) | |
| .enter() | |
| .append("rect") | |
| .attr("width", W) | |
| .attr("height", H) | |
| .attr("x", function (d) {return d.x * W}) | |
| .attr("y", function (d) {return d.y * H}) | |
| .style("stroke", "black") | |
| .style("stroke-width", "1px") | |
| .style("fill", "#ff1414") | |
| .style("fill-opacity", function (d) {return d.weight*0.1; }) | |
| .on("mouseover", gridOver) | |
| ; | |
| // add values | |
| d3.select("svg") | |
| .append("g") | |
| .attr("id", "adjacencyG") | |
| .attr("transform", "translate(50,20)") | |
| .selectAll("rect") | |
| .data(matrix) | |
| .enter() | |
| .append("text") | |
| .attr("x", function (d) {return (d.x * W)+W/2}) | |
| .attr("y", function (d) {return (d.y * H)+H/2}) | |
| .attr("font-family", "sans-serif") | |
| .attr("font-size", "10px") | |
| .attr("fill", "black") | |
| .attr("text-anchor","middle") | |
| .attr("dy", ".35em") | |
| .text(function(d){ return d.weight;}) | |
| ; | |
| // add axis | |
| var nameScale = d3.scale.ordinal() | |
| .domain(["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L"]) | |
| .rangePoints([0,H*12],1); | |
| xAxis = d3.svg.axis() | |
| .scale(nameScale) | |
| .orient("top") | |
| .tickSize(3); | |
| yAxis = d3.svg.axis() | |
| .scale(nameScale) | |
| .orient("left") | |
| .tickSize(3); | |
| d3.selectAll("#adjacencyG") | |
| .append("g") | |
| .call(xAxis) | |
| .selectAll("text") | |
| .style("text-anchor", "middle") | |
| d3.selectAll("#adjacencyG") | |
| .append("g") | |
| .call(yAxis); | |
| // cell and it's transpose | |
| function gridOver(d,i) { | |
| d3.selectAll("rect") | |
| .style("stroke-width", function (p) {return (p.x == d.y && p.y == d.x) || (p.y == d.y && p.x == d.x) ? "3.5px" : "1px"}) | |
| .style("fill", function (p) {return (p.x == d.y && p.y == d.x) || (p.y == d.y && p.x == d.x) ? "#fff27f" : "#ff1414"}) | |
| } | |
| // Add binary matrix | |
| d3.select("div#chart2").append("svg") | |
| .attr("width", W*6) | |
| .attr("height", H*6) | |
| .append("g") | |
| .attr("id", "adjacencyB") | |
| .attr("transform", "translate(50,20)") | |
| .selectAll("rect") | |
| .data(matrix) | |
| .enter() | |
| .append("rect") | |
| .attr("width", W) | |
| .attr("height", H) | |
| .attr("x", function (d) {return d.x * W}) | |
| .attr("y", function (d) {return d.y * H}) | |
| .style("stroke", "black") | |
| .style("stroke-width", "1px") | |
| .style("fill", "#ff1414") | |
| .style("fill-opacity", function (d) {return d.weightnew*0.526848; }) | |
| .on("mouseover", gridOver) | |
| ; | |
| // add values | |
| d3.select("div#chart2").select("svg") | |
| .append("g") | |
| .attr("id", "adjacencyB") | |
| .attr("transform", "translate(50,20)") | |
| .selectAll("rect") | |
| .data(matrix) | |
| .enter() | |
| .append("text") | |
| .attr("x", function (d) {return (d.x * W)+W/2}) | |
| .attr("y", function (d) {return (d.y * H)+H/2}) | |
| .attr("font-family", "sans-serif") | |
| .attr("font-size", "10px") | |
| .attr("fill", "black") | |
| .attr("text-anchor","middle") | |
| .attr("dy", ".35em") | |
| .text(function(d){ return d.weightnew;}) | |
| ; | |
| // add axes | |
| d3.selectAll("#adjacencyB") | |
| .append("g") | |
| .call(xAxis) | |
| .selectAll("text") | |
| .style("text-anchor", "middle") | |
| d3.selectAll("#adjacencyB") | |
| .append("g") | |
| .call(yAxis); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment