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: 12px sans-serif; | |
| pointer-events: none; | |
| } | |
| #end-arrow { | |
| fill: #88A; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div style="width: 1000px;"> | |
| <div class="container" id="chart1" style="float: left; width: 400px; height: 900px;">Left Stuff</div> | |
| <div class="container" id="chart2" style="float: left; width: 500px; height: 500px;">Middle Stuff</div> | |
| <div class="container" id="chart3" style="float: left; width: 100px;">right</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": "" | |
| } | |
| ] | |
| var weightScale = d3.scale.linear() | |
| .domain(d3.extent(function(d){ return d.weight })) | |
| .range([0,1]) | |
| // fill matrix | |
| d3.select("div#chart1") | |
| .append("svg") | |
| .append("g") | |
| .attr("id", "adjacencyG") | |
| .attr("transform", "translate(50,50)") | |
| .selectAll("rect") | |
| .data(matrix) | |
| .enter() | |
| .append("rect") | |
| .attr("width", 25) | |
| .attr("height", 25) | |
| .attr("x", function (d) {return d.x * 25}) | |
| .attr("y", function (d) {return d.y * 25}) | |
| .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,50)") | |
| .selectAll("rect") | |
| .data(matrix) | |
| .enter() | |
| .append("text") | |
| .attr("x", function (d) {return (d.x * 25)+12.5}) | |
| .attr("y", function (d) {return (d.y * 25)+12.5}) | |
| .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,300],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 something else | |
| d3.select("div#chart3").append("svg") | |
| .attr("width", 150) | |
| .attr("height", 150) | |
| .append("circle") | |
| .attr("cx", 25) | |
| .attr("cy", 25) | |
| .attr("r", 25) | |
| .style("fill", "purple"); | |
| // add network | |
| function bar() { | |
| console.log("click"); | |
| force.stop(); | |
| force.start(); | |
| } | |
| // compute links var from raw data - matrix | |
| // helper code | |
| var result = matrix.map(function(x) {return x.id;}); | |
| var array = []; | |
| var array1 = []; | |
| var array2 = []; | |
| var array3 = []; | |
| var array4 = []; | |
| for (var i = 0; i < result.length; i++) {array.push(result[i].split('-'));} | |
| for (var i = 0; i < result.length; i++) {array1.push(result[i].split('-')[0]);} | |
| for (var i = 0; i < result.length; i++) {array2.push(result[i].split('-')[1]);} | |
| sources = array1.map(function(elem){ | |
| return {"source":elem}; | |
| }); | |
| targets = array2.map(function(elem){ | |
| return {"target":elem}; | |
| }); | |
| //function for putting two arrays together: | |
| function mergeArray(alpha,beta) { | |
| for(item in alpha) { | |
| beta[item] = alpha[item]; | |
| } | |
| return beta; | |
| } | |
| for (var i = 0; i < result.length; i++) {array3.push(mergeArray(targets[i],sources[i]));} | |
| for (var i = 0; i < array1.length; i++) {if (array1[i] != array2[i]) {array4.push(array3[i]);}} | |
| //add in weights | |
| var new1 = []; | |
| var new1 = matrix.map(function(x) {return x.weight;}); | |
| var new2 = []; | |
| for (var i = 0; i < array1.length; i++) {if (array1[i] != array2[i]) {new2.push(new1[i]);}} | |
| weights = new2.map(function(elem){ | |
| return {"weight":elem}; | |
| }); | |
| var new3 = []; | |
| for (var i = 0; i < new2.length; i++) {new3.push(mergeArray(array4[i],weights[i]));} | |
| //need to filter for which cell is highest for each relationship | |
| var links = new3; | |
| var nodes = {}; | |
| // Compute the distinct nodes from the links. | |
| links.forEach(function(link) { | |
| link.source = nodes[link.source] || (nodes[link.source] = {name: link.source}); | |
| link.target = nodes[link.target] || (nodes[link.target] = {name: link.target}); | |
| }); | |
| var width = 500, | |
| height = 400; | |
| var force = d3.layout.force() | |
| .nodes(d3.values(nodes)) | |
| .links(links) | |
| .size([width, height]) | |
| .linkDistance(195) | |
| .charge(-765) | |
| .on("tick", tick) | |
| .start(); | |
| force.on("start", function () { | |
| console.log("start"); | |
| }); | |
| force.on("end", function () { | |
| console.log("end"); | |
| }); | |
| R=16 | |
| var svg1 = d3.select("div#chart2").append("svg") | |
| .attr("width", width) | |
| .attr("height", height); | |
| // add defs-marker | |
| // add defs-markers | |
| svg1.append('svg:defs').selectAll("marker") | |
| .data([{id:"end-arrow", opacity:1}, {id:"end-arrow-fade", opacity:0.075}]) | |
| .enter().append('marker') | |
| .attr('id', function(d) { return d.id; }) | |
| .attr('viewBox', '0 0 10 10') | |
| .attr('refX', 2+R) | |
| .attr('refY', 5) | |
| .attr('markerWidth', 4) | |
| .attr('markerHeight', 4) | |
| .attr('orient', 'auto') | |
| .append('svg:path') | |
| .attr('d', 'M0,0 L0,10 L10,5 z') | |
| .style("opacity", function(d) { return d.opacity; }); | |
| //phantom marker | |
| svg1.append('svg:defs') | |
| .append('svg:marker') | |
| .attr('id', 'end-arrow-phantom') | |
| .attr('viewBox', '0 0 10 10') | |
| .attr('refX', 2+R) | |
| .attr('refY', 5) | |
| .attr('markerWidth', 4) | |
| .attr('markerHeight', 4) | |
| .attr('orient', 'auto') | |
| .attr('fill', '#EEE') | |
| .append('svg:path') | |
| .attr('d', 'M0,0 L0,10 L10,5 z'); | |
| var link = svg1.selectAll(".link") | |
| .data(force.links()) | |
| .enter() | |
| .append("line") | |
| .attr("class", "link") | |
| .attr("stroke", "#88A") | |
| .attr('marker-end', 'url(#end-arrow)') | |
| .on("mouseout", fade(1)) | |
| ; | |
| var node = svg1.selectAll(".node") | |
| .data(force.nodes()) | |
| .enter().append("g") | |
| .attr("class", "node") | |
| .call(force.drag); | |
| node.append("circle") | |
| .attr("r", R) | |
| .attr("stroke", '#777') | |
| .attr("fill", '#DDD') | |
| .on("mouseover", fade(.1)) | |
| .on("mouseout", fade(1)) | |
| ; | |
| node.append("text") | |
| .attr("x", 0) | |
| .attr("dy", ".35em") | |
| .text(function(d) { return d.name; }); | |
| function tick() { | |
| link | |
| .attr("x1", function(d) { return d.source.x; }) | |
| .attr("y1", function(d) { return d.source.y; }) | |
| .attr("x2", function(d) { return d.target.x; }) | |
| .attr("y2", function(d) { return d.target.y; }) | |
| ; | |
| node | |
| .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); | |
| } | |
| var linkedByIndex = {}; | |
| links.forEach(function(d) { | |
| linkedByIndex[d.source.index + "," + d.target.index] = 1; | |
| }); | |
| function isConnected(a, b) { | |
| return linkedByIndex[a.index + "," + b.index] || linkedByIndex[b.index + "," + a.index] || a.index == b.index; | |
| } | |
| function fade(opacity) { | |
| return function(d) { | |
| node.style("stroke-opacity", function(o) { | |
| thisOpacity = isConnected(d, o) ? 1 : opacity; | |
| this.setAttribute('fill-opacity', thisOpacity); | |
| return thisOpacity; | |
| }); | |
| link.style("stroke-opacity", function(o) { | |
| return opacity === 1 || o.source === d || o.target === d ? 1 : opacity/2; | |
| }); | |
| link.attr("marker-end", function(o) { | |
| return opacity === 1 || o.source === d || o.target === d ? 'url(#end-arrow)' : 'url(#end-arrow-phantom)'; | |
| }); | |
| }; | |
| } | |
| // add slider | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment