Source: Metanodes.js

  1. var nodesOld = []; //contains the original graph nodes
  2. var linksOld = []; //contains the original graph links
  3. var nodes_communitys; //contains all nodes with its community
  4. var amountMetaN; //contains the overall number of communities
  6. //contains the new meta-nodes
  7. var newMetaNodes = [];
  8. //contains the new meta-links
  9. var newLinks = [];
  11. var linksD = []; //contains the meta-links in a drawable form
  12. var nodesD = []; //contains the meta-nodes in a drawable form
  14. var dataset = []; //contains data for statistic
  16. /**
  17.  * This function creates metanodes out of nodes according to their community attribute.
  18.  * This is done by creating for every community a node and the size of the node is determined by the number of associated
  19.  * nodes. The strength of the links between these new nodes, which represent the metanodes, is determined by the number
  20.  * of links between the original nodes. The more connections between a pair of communities exists, the bigger the link is
  21.  * drawn.
  22.  * @param {Array} nodesV contains all nodes of the original graph
  23.  * @param {Array} linksV contains all links of the original graph
  24.  * @param {Array} result contains the id's of all nodes with its community number
  25.  * @param {number} communityCount contains the overall number of communities
  26.  */
  27. function createMetanodes(nodesV,linksV,result,communityCount)
  28. {
  29.     //initalize empty
  30.     nodesOld = []; //contains the original graph nodes
  31.     linksOld = []; //contains the original graph links
  32.     nodes_communitys; //contains all nodes with its community
  33.     amountMetaN; //contains the overall number of communities
  34.     newMetaNodes = [];
  35.     newLinks = [];
  36.     linksD = []; //contains the meta-links in a drawable form
  37.     nodesD = []; //contains the meta-nodes in a drawable form
  38.     dataset = []; //contains data for statistic
  40.     nodesOld = nodesV;
  41.     linksOld = linksV;
  42.     nodes_communitys = result;
  44.     //need as many nodes as communities
  45.     amountMetaN = communityCount;
  47.     //for every community create metanode
  48.     for(var i = 0; i < amountMetaN; i++)
  49.     {
  50.         var metaN = createMetaNode(i);
  51.         newMetaNodes[i] = metaN;
  52.     }
  54.     //will contain the new links
  55.     newLinks = createInterANDIntraNodes();
  58.     //create dataset for the statistic
  59.     var metaNodeNames = [];
  60.     for (var key in newMetaNodes)
  61.     {
  62.         //name
  63.         var name = "" + key;
  64.         metaNodeNames.push(name);
  66.         var dataP =
  67.             {
  68.                 label: name,
  69.                 "Nodes": newMetaNodes[key].amountN,
  70.                 "IntraEdges": newLinks[key].intraEdges.length,
  71.                 "InterEdges": newLinks[key].interEdges.length
  72.             }
  74.         dataset.push(dataP);
  75.     }
  77.     //create nodes and links for drawing the meta-node graph
  78.     var i = 0;
  79.     for (var m = 0; m <newLinks.length; m++ )
  80.     {
  81.         for(var key in newLinks[m])
  82.         {
  83.             for(var n = 0; n <newLinks[m][key].length; n++ )
  84.             {
  85.                 link = newLinks[m][key][n];
  86.                 linksD[i] = {source: link.source,
  87.                     target: link.target
  88.                 };
  89.                 i = i+1;
  90.             }
  91.         }
  92.     }
  94.     // compute nodes from links data
  95.     linksD.forEach(function(link) {
  96.         link.source = nodesD[link.source] ||
  97.             (nodesD[link.source] = {id: link.source});
  98.         link.target = nodesD[link.target] ||
  99.             (nodesD[link.target] = {id: link.target});
  101.     });
  102. }
  104. /**
  105.  * This function creates one metanode to the given community number.
  106.  * For every metanode the amount of belonging nodes is calculated and their id's are stored.
  107.  * @param {number} communityNr current community number which forms a metanode
  108.  * @param {Array} nodes_communitys contains all nodes with its community
  109.  * @return {Object} result which contains as properties the overall amount of belonging nodes and an array of ids
  110.  * the belonging nodes
  111.  */
  112. function createMetaNode(communityNr)
  113. {
  114.     amountNode = 0;
  115.     belongingNodes = [];
  117.     var i = 0;
  118.     //for all nodes which have the recent communityNr
  119.     for(var nodeId in nodes_communitys) {
  121.         var comm = nodes_communitys[nodeId];
  122.         if(comm == communityNr)
  123.         {
  124.             //metanode
  125.             belongingNodes.push(nodeId);
  126.             amountNode = amountNode +1;
  127.         }
  128.         i++;
  129.     }
  131.     var result =
  132.         { amountN: amountNode,
  133.           belongingN: belongingNodes,
  134.           id: communityNr
  135.         };
  137.     return result;
  138. }
  140. /**
  141.  * This function creates inter- and intra-edges according to the current metanode.
  142.  * The intra-edges are calculated for every metanode by using the links in the original node and looking through every stored
  143.  * node of the metanode, if there is a connection to another node with the same community number. For inter-edges the same
  144.  * is done, with the difference that connections to nodes with other communitiy numbers are sought.
  145.  * @return {Array} nL is an array of objects which contains the inter- and intra-links of all metanodes.
  146.  */
  147. function createInterANDIntraNodes()
  148. {    //find according links
  149.     var nL = [];
  151.     for(var metaNodeId = 0; metaNodeId < newMetaNodes.length; metaNodeId++)
  152.     {
  153.         var intraEdges = []; //id of edges inside the same community
  154.         var interEdges = []; //id of edges to other communities
  156.         for(var i = 0; i < newMetaNodes[metaNodeId].belongingN.length; i++)
  157.         {
  158.             var currentN = newMetaNodes[metaNodeId].belongingN[i];
  159.             for(var key in linksOld)
  160.             {
  161.                 if (linksOld[key].source.id == currentN)
  162.                 {
  163.                     var target = linksOld[key].target.id;
  164.                     if(nodesOld[target].module == metaNodeId.toString() )
  165.                     { //target node belongs to the same community
  166.                         var edge = {
  167.                             source: metaNodeId,
  168.                             target: nodesOld[target].module
  169.                         };
  170.                         intraEdges.push(edge);
  172.                     }else
  173.                     { //target node belongs to another community
  174.                         var edge = {
  175.                             source: metaNodeId,
  176.                             target: nodesOld[target].module
  177.                         };
  178.                         interEdges.push(edge);
  179.                     }
  180.                 }
  181.             }
  182.         }
  184.         nL[metaNodeId] = {
  185.                             intraEdges: intraEdges,
  186.                             interEdges: interEdges
  187.                          };
  188.     }
  189.     return nL;
  190. }
  192. /**
  193.  * This functions draws the metanode graph and the statistics. For the metanode graph a d3 force layout is created on a
  194.  * svg. The statistic is drawn as grouped bar chart, which is also located on an svg. Also a close button is created to
  195.  * delete these two svgs.
  196.  */
  197. function drawMetaNodeGraphAndStatistic()
  198. {
  199.     var svg = d3.select("svg");
  201.     //metaNodeSVG is appended on original svg
  202.     var metaNodeSVG = svg.append("svg")
  203.         .attr("id", "metaNodeSVG")
  204.         .attr("width", svg.attr("width")*0.6) //69%
  205.         .attr("height", svg.attr("height"))
  206.         .attr("x", svg.attr("width")*0.4)
  207.         .classed("metaNodeContainer",true);
  209.     //metaNodeSVG is appended on original svg
  210.     var statisticSVG = svg.append("svg")
  211.         .attr("id", "statisticSVG")
  212.         .attr("width", svg.attr("width")*0.4)
  213.         .attr("height", svg.attr("height"))
  214.         .classed("statisticContainer",true);
  216.     drawMetaNodes(metaNodeSVG);
  217.     calculateStatistic(statisticSVG);
  219.     // Close Button
  220.     createMetaNodeCloseButton();
  221. }
  223. /**
  224.  * This function uses a given svg to draw a grouped bar chart on it. Here for every metanode the amount of belonging nodes
  225.  * is shown, as well as the amount of intra- and inter-edges.
  226.  * @param {SVG}statisticSVG contains the SVG in which the grouped bar chart is drawn
  227.  */
  228. function calculateStatistic(statisticSVG)
  229. {
  230.     //draw black border
  231.     statisticSVG.append("rect")
  232.         .attr("width", "100%")
  233.         .attr("height", "100%")
  234.         .attr("fill", "white")
  235.         .attr("stroke", "#616161")
  236.         .attr("stroke-width", 1)
  237.         .attr("fill-opacity", 1)
  238.         .attr("stroke-opacity",1);
  240.     var attributeNames = d3.keys(dataset[0]).filter(function(key) { return key !== "label"; });
  242.     dataset.forEach(function(d) {
  243.         d.amounts = attributeNames.map(function(name) { return {name: name, value: +d[name]}; });
  244.     });
  246.     // drawing
  247.     var widthP = statisticSVG.attr("width")/100;
  248.     var heightP = statisticSVG.attr("height")/100;
  250.     var margin = {top: 10*heightP, right: 10*widthP, bottom: 25*heightP, left: 10*widthP},
  251.         width = statisticSVG.attr("width")- margin.left - margin.right,
  252.         height = statisticSVG.attr("height") - margin.top - margin.bottom;
  254.     var x0 = d3.scale.ordinal()
  255.         .rangeRoundBands([margin.left*0.7, width], 0.1);
  257.     var x1 = d3.scale.ordinal();
  259.     var y = d3.scale.linear()
  260.         .range([height, margin.bottom]);
  262.     var xAxis = d3.svg.axis()
  263.         .scale(x0)
  264.         .tickSize(0)
  265.         .orient("bottom");
  267.     var yAxis = d3.svg.axis()
  268.         .scale(y)
  269.         .orient("right");
  271.     var color = d3.scale.ordinal()
  272.         .range(["#e41a1c","#377eb8","#4daf4a"]);
  274.     //give names to chart
  275.     x0.domain(dataset.map(function(d) { return d.label; }));
  276.     x1.domain(attributeNames).rangeRoundBands([0, x0.rangeBand()])
  278.     //give data to chart
  279.     y.domain([0, d3.max(dataset, function(d) { return d3.max(d.amounts, function(d) { return d.value; }); })]);
  281.     statisticSVG.append("g")
  282.         .attr("class", "x axis")
  283.         .attr("transform", "translate("+margin.left+"," + height + ")") //change here for bar width and location
  284.         .call(xAxis);
  286.     //create the y-axis and a y-axis text label
  287.     statisticSVG.append("g")
  288.         .attr("class", "y axis")
  289.         .attr("transform", "translate(" + margin.left*0.5 + ", 0)") //change black y-axis here
  290.         .call(yAxis)
  291.         .append("text")
  292.         .attr("x",-13*heightP)
  293.         .attr("y", margin.left*0.5)
  294.         .attr("transform", "rotate(-90)")
  295.         .attr("dy", ".71em")
  296.         .style("text-anchor", "end")
  297.         .text("Amount");
  299.     var bar = statisticSVG.selectAll(".bar")
  300.         .data(dataset)
  301.         .enter().append("g")
  302.         .attr("class", "rect")
  303.         .attr("transform", function(d) { return "translate(" +x0(d.label) + ",0)"; });
  305.     bar.selectAll("rect")
  306.         .data(function(d) { return d.amounts; })
  307.         .enter().append("rect")
  308.         .attr("width", x1.rangeBand())
  309.         .attr("x", function(d) { return x1(d.name); })
  310.         .attr("y", function(d) { return y(d.value); })
  311.         .attr("value", function(d){return d.name;})
  312.         .attr("height", function(d) { return height - y(d.value); })
  313.         .style("fill", function(d) { return color(d.name); })
  314.         .attr("transform", function(d) { return "translate(" +margin.left + ",0)"; });;
  317.     //right legend
  318.     var legend = statisticSVG.selectAll(".legend")
  319.         .data(attributeNames.slice())
  320.         .enter().append("g")
  321.         .attr("class", "legend")
  322.         .attr("transform", function(d, i) { return "translate(0," + i*20 + ")"; })
  324.     legend.append("rect")
  325.         .attr("x", width - 5*widthP)
  326.         .attr("y",  6.5*heightP)
  327.         .attr("width", 18)
  328.         .attr("height", 18)
  329.         .style("fill", function(d) { return color(d); });
  331.     legend.append("text")
  332.         .attr("x", width - 8*widthP)
  333.         .attr("y", 8*heightP)
  334.         .attr("dy", ".35em")
  335.         .style("text-anchor", "end")
  336.         .text(function(d) { return d; });
  338. }
  340. /**
  341.  * This functions draws the metaNode graph on a delivered svg. For every community number a meta-node is drawn with its
  342.  * related color. The size of the node is calculated according to the amount of nodes beloning to the certain community
  343.  * The strength of the links is dependent on the number of inter-edges to the respective other communities.
  344.  * @param {SVG} metaNodeSVG contains the SVG on which the graph will be drawn
  345.  */
  346. function drawMetaNodes(metaNodeSVG)
  347. {
  348.     var widthP = metaNodeSVG.attr("width")/100;
  349.     var heightP = metaNodeSVG.attr("height")/100;
  351.     var margin = {top: 0*heightP, right: 0*widthP, bottom: 0*heightP, left: 0*widthP};
  352.     var widthM = metaNodeSVG.attr("width")- margin.left - margin.right;
  353.     var heightM = metaNodeSVG.attr("height") - margin.top - margin.bottom;
  355.     //set background color of metaNodeSVG
  356.     metaNodeSVG.append("rect")
  357.         .attr("width", "100%")
  358.         .attr("height", "100%")
  359.         .attr("fill", "white");
  361.     //define layout for metaNode-graph
  362.     var force = d3.layout.forceInABox()
  363.         .groupBy("function (d) {return d.id}")
  364.         .gravityOverall(0.5)
  365.         .size([widthM, heightM])
  366.         .linkStrengthInterCluster(0.5)
  367.         .charge(-3000);
  369.     force
  370.         .nodes(d3.values(nodesD))
  371.         .links(linksD)
  372.         .on("tick", tick);
  374.     // Draw the graph lines
  375.     var link = metaNodeSVG.selectAll(".link")
  376.         .data(linksD)
  377.         .enter().append("line")
  378.         .attr("class", "link")
  379.         .attr("id", function(d,i){ return "link" + i});
  381.     // Draw node as a circle.
  382.     var node = metaNodeSVG.selectAll(".node")
  383.         .data(force.nodes())
  384.         .enter().append("g")
  386.     var circle = node.append("circle")
  387.         .attr("class", "node")
  388.         .attr("id", function(d,i){ return "node" + i});
  391.     //calculate attributes of links
  392.     var norm = Math.sqrt(Math.pow(width,2) + Math.pow(height,2));
  393.     //force.linkDistance(norm/10);
  394.     force.linkDistance(norm/7);
  395.     //calculate links according to amount of links
  396.     link.style("stroke-width", function (d)
  397.                                 {
  398.                                     var percent = 100/linksD.length;
  399.                                     var interEdges =  newLinks[d.source.id].interEdges;
  401.                                     var size = 0;
  402.                                     for(var i = 0; i < interEdges.length; i++)
  403.                                     {
  404.                                         if(interEdges[i].target == d.target.id)
  405.                                         {
  406.                                             size = size+1;
  407.                                         }
  408.                                     }
  409.                                     size = size*percent;
  410.                                     return 1+(2*size); //without additional factor
  411.                                 });
  413.     //calculate origin radius of nodes
  414.     norm = norm/300;
  415.     if(norm > 7) norm = 7;
  416.     var radius = norm;
  418.     //calculate nodes according to amount of nodes in metaNode
  419.     var color = d3.scale.category20();//color nodes according to their cluster
  420.     circle.attr("r", function(d)
  421.                     {
  422.                         var percent = 100/amountMetaN;
  423.                         var size = (newMetaNodes[d.id].amountN*percent/100); //size is between [0,1]
  425.                         //calculate radius according to amount of nodes
  426.                         //return radius + (5*size) //with additional factor
  427.                         var r = radius + (2*size);
  428.                         newMetaNodes[d.id]["radius"] = r;
  430.                         return  r;
  431.                     });
  433.     circle.style("fill", function(d){return color(d.id);})
  434.     var nodeName = node.append("svg:text")
  435.         .attr("class", "text")
  436.         .attr("dy", ".35em")
  437.         .text(function(d) {return d.id});
  439.     force.start();
  442.     function tick(e) {
  444.         circle.attr("cx", function(d) {
  445.             return d.x = Math.max(newMetaNodes[d.id].radius, Math.min(widthM - newMetaNodes[d.id].radius, d.x));
  446.         })
  447.             .attr("cy", function(d) {
  448.                 return d.y = Math.max(newMetaNodes[d.id].radius, Math.min(heightM - newMetaNodes[d.id].radius, d.y)); });
  451.         nodeName.attr("x", function (d) {return d.x;})
  452.                 .attr("y", function (d) {return d.y - 4*heightP;});
  454.         link.attr("x1", function(d) { return d.source.x; })
  455.             .attr("y1", function(d) { return d.source.y; })
  456.             .attr("x2", function(d) { return d.target.x; })
  457.             .attr("y2", function(d) { return d.target.y; });
  459.     }
  461. }
  463. /**
  464.  * This function deletes the svgs which store the meta-graph and the statistic. Therefore all existing svgs are located and
  465.  * the svgs with the id's "metaNodeSVG" and "metaNodeSVG" are removed. Also the close button is removed.
  466.  */
  467. function deleteGraphANDStatistic()
  468. {
  469.     var svgs = d3.selectAll("svg")[0];
  470.     var flagDelete = [];
  472.     for(var i = 0; i <svgs.length; i++)
  473.     {
  474.         if((svgs[i].id == "metaNodeSVG") || (svgs[i].id == "statisticSVG")) {
  475.             flagDelete[i] = 1;
  476.         } else
  477.         {
  478.             flagDelete[i] = 0;
  479.         }
  480.     }
  482.     for(var i = 0; i <svgs.length; i++)
  483.     {
  484.         if(flagDelete[i] == 1)
  485.         {
  486.             svgs[i].remove();
  487.         }
  488.     }
  490.     //remove close button
  491.     var con = document.getElementById("svgContainer");
  492.     var children = con.childNodes;
  494.     for(var c = 0; c < children.length; c++) {
  495.         if (children[c].id == "closeButton") {
  496.             con.removeChild(children[c]);
  497.         }
  498.     }
  499. }
  501. /**
  502.  * This function adds a close button to the container holding the svgs which contain the metanode graph and the statistic.
  503.  * This is done by searching this container and appending a button on it. When this button is clicked, the meta-node
  504.  * force layout and the grouped bar chart representing the statistic are deleted.
  505.   */
  506. function createMetaNodeCloseButton()
  507. {
  508.     var MetaOverlay = document.getElementById("svgContainer");
  509.     // Button
  510.     var closeButton = document.createElement("SPAN");
  511.     closeButton.classList.add("w3-button");
  512.     closeButton.classList.add("w3-theme-l2");
  513.     closeButton.classList.add("w3-display-topright");
  514.     closeButton.setAttribute("id", "closeButton");
  515.     MetaOverlay.appendChild(closeButton);
  516.     // Icon
  517.     var closeIcon = document.createElement("SPAN");
  518.     closeIcon.classList.add("fa");
  519.     closeIcon.classList.add("fa-remove");
  520.     closeIcon.classList.add("fa-lg");
  521.     closeButton.appendChild(closeIcon);
  522.     // Close function
  523.     closeButton.addEventListener("click", function() {deleteGraphANDStatistic() });
  524. }