Global

Members

Array of all links in the graph
Source:

alpha

Weight of the Distance
Source:

beta

Weight of the edge length
Source:

calculationsReady

Indicates when the calculations are finished
Source:

community_autocorrelationMetric

Result of the autocorrelation metric
Source:

community_entropyMetric

Result of the entropy metric
Source:

community_result

Array of all nodes and its communities
Source:

communityCount

Amount of communities
Source:

EdgeBundling

Result of the EdgeBundling metric for every link
Source:

filterArea

Size of the filter area for some Metrics
Source:

gamma

Weight of the parallelism
Source:

metanodes

Result of the metanode metric
Source:

radiusHeatmap

Defines the radius of the marks on the Heatmap
Source:

result_Array

Array of numbers which defines how many nodes of an community exists
Source:
Array of all links which the user has selected
Source:

Methods

addNode(node)

Adds a Node to the node array if it is not contained already
Parameters:
Name Type Description
node Object A node of the graph
Source:

arrayMax(arr) → {number}

Returns the maximum value of an given array
Parameters:
Name Type Description
arr Array Array of numbers
Source:
Returns:
max Returns the maximum number from the array
Type
number

arrayMax(arr) → {number}

Returns the maximum value of an given array
Parameters:
Name Type Description
arr Array Array of numbers
Source:
Returns:
max Returns the maximum number from the array
Type
number

arrayMin(arr) → {number}

Returns the minimum value of an given array
Parameters:
Name Type Description
arr Array Array of numbers
Source:
Returns:
min Returns the minimum number from the array
Type
number

averageOfArray(array) → {number}

Returns the Average value of an given array
Parameters:
Name Type Description
array Array Array of numbers
Source:
Returns:
avg Returns the average number calculated from the array
Type
number

CalculateMetric(metricNumber, links, steps) → {Array}

Calculates the chosen Metric for every given link against each other link and returns an Array with the result for each link. To get only one result for each link, the average over all values for the respective link is taken as final result.
Parameters:
Name Type Description
metricNumber number Defines which Metric should be used 1 = Distance --> The Average Distance is taken 2 = Edge length similarity 3 = Parallelism
links Array The selected links
steps number The amount of samples, for an link, which some metrics need
Source:
Returns:
result Array with the average result for each link in the size of all selected links
Type
Array

calculateStatistic(statisticSVG)

This function uses a given svg to draw a grouped bar chart on it. Here for every metanode the amount of belonging nodes is shown, as well as the amount of intra- and inter-edges.
Parameters:
Name Type Description
statisticSVG SVG contains the SVG in which the grouped bar chart is drawn
Source:

checkValidWeight()

Checks the Validity of the three weight input fields. All three values in the range of [0,1] should add up to 1. Because of the precision of two digits the sum has to add up to 0.99, everything below is invalid. Every value above 1 is also invalid. If the sum is invalid the three fields are marked red and a error message is displayed.
Source:

Community_AutocorrelationBased(nodes, N, filterArea) → {Array}

This function calculates the autocorrelation based metric for communities. This metric measures the amount of visual overlap between the different communities by taking the community label of the central node into account. It is calculated for every node of the graph and all neighboring nodes inside a given square determined by the filerArea are taken into account for the calculation. When all the nodes, surrounding the currently chosen node, come from the same community, then the calculated metric value is 0, which indicates a perfect preservation of the community structure. However, when nodes, surrounding the currently chosen node, come from different communities, the closer the nodes are to the chosen one, the more community structure degrades.
Parameters:
Name Type Description
nodes Array contains all nodes of the graph

var nodes = [

id: "id1"

index: 0

​​​

module: 0

​​​​px: 453.8701275147519

​​​​py: 136.9204945170503

​​​​weight: 13

​​​​x: 453.8623762824847

​​​​y: 136.32544736132093;

]

any type of string can be used as id
N number is the amount of nodes in the graph
filterArea number is the size of the area around the node
Source:
Returns:
array of objects which contains the calculated metric for every node
Type
Array

Community_EntropyBased(N, M, C, nodes, filterArea) → {Array}

This function calculates a measure to determine the degree of visual overlap between the communities. The area considered around a specific node is a square and determined by the filerArea. If this region contains nodes from only one community, the entropy value is 0, which means that the community structure is represented perfectly. If the region contains an equal mixture of all communities, the entropy value reaches a maximum, meaning that the community structure is not represented at all. This value is calculated for each node of the graph. For every node the entropy is starting at 0.
Parameters:
Name Type Description
N number Amount of nodes in the graph
M number Amount of communities in the graph
C Array Amount of nodes in a specific community
nodes Array contains the nodes of the original graph
filterArea number is the size of the area around the node
Source:
Returns:
array of objects, H[0] contains the global value, H[i != 0] contains local values for all other nodes.
Type
Array

Consistency(selectedLinks, distance, edgeLength, parallelism, alpha, beta, gamma) → {Array}

Aggregated consistency Consistency of two edges is defined by the three metrics Distance, EdgeLengthSimilarity and Parallelism which have different weights alpha, beta and gamma which hold -> alpha + beta + gamma = 1. The Distance Metric gets normalized based on the maximum of the distances.
Parameters:
Name Type Description
selectedLinks Array The links which should be compared by the metrics
distance Array Results of the distance metric of all selected links
edgeLength Array Results of the EdgeLengthSimilarity metric of all selected links
parallelism Array Results of the parallelism metric of all selected links
alpha number The weight for the Distance Metric
beta number The weight for the Edge length similarity Metric
gamma number The weight for the Parallelism Metric
Source:
Returns:
consistency Returns the result array of the aggregated consistency for all selected links
Type
Array

createCloseButton()

This function adds a close Button to the heatmap-canvas. Looks for the container of the canvas and creates a button in right corner. When pressed it deletes all heatmap-canvases, since it calls the function deleteCanvas().
Source:

createHeatmapLegend()

This function adds a legend to the heatmap. It looks for the parent container of the heatmap and gives him a canvas as childNode. The canvas contains the gradient-color which is used in the heatmap.
Source:

createInterANDIntraNodes() → {Array}

This function creates inter- and intra-edges according to the current metanode. The intra-edges are calculated for every metanode by using the links in the original node and looking through every stored node of the metanode, if there is a connection to another node with the same community number. For inter-edges the same is done, with the difference that connections to nodes with other communitiy numbers are sought.
Source:
Returns:
nL is an array of objects which contains the inter- and intra-links of all metanodes.
Type
Array

createLoadingIcon()

Displays an Loading Icon in the top-right edge of the svg
Source:

createMetaNode(communityNr, nodes_communitys) → {Object}

This function creates one metanode to the given community number. For every metanode the amount of belonging nodes is calculated and their id's are stored.
Parameters:
Name Type Description
communityNr number current community number which forms a metanode
nodes_communitys Array contains all nodes with its community
Source:
Returns:
result which contains as properties the overall amount of belonging nodes and an array of ids the belonging nodes
Type
Object

createMetaNodeCloseButton()

This function adds a close button to the container holding the svgs which contain the metanode graph and the statistic. This is done by searching this container and appending a button on it. When this button is clicked, the meta-node force layout and the grouped bar chart representing the statistic are deleted.
Source:

createMetanodes(nodesV, linksV, result, communityCount)

This function creates metanodes out of nodes according to their community attribute. This is done by creating for every community a node and the size of the node is determined by the number of associated nodes. The strength of the links between these new nodes, which represent the metanodes, is determined by the number of links between the original nodes. The more connections between a pair of communities exists, the bigger the link is drawn.
Parameters:
Name Type Description
nodesV Array contains all nodes of the original graph
linksV Array contains all links of the original graph
result Array contains the id's of all nodes with its community number
communityCount number contains the overall number of communities
Source:

deleteCanvas()

This function deletes all heatmap - canvases, which have been drawn. It searches the parent container of the heatmap and deletes all canvases which are labelled "heatmap-canvas"
Source:

deleteGraphANDStatistic()

This function deletes the svgs which store the meta-graph and the statistic. Therefore all existing svgs are located and the svgs with the id's "metaNodeSVG" and "metaNodeSVG" are removed. Also the close button is removed.
Source:

destroyLoadingIcon()

Destroys all Loading Icons which are placed in the svg
Source:

Distance(link1, link2, steps)

METRIC 1: Distance Calculates the distance between the sample points of two edges. First the minimum of all distances between the first point on the first edge, and the second edge are taken and the maxiumum of all distances from the first edge is taken as result. (We compare each point on the first edge repeatedly against all points on the second edge)
Parameters:
Name Type Description
link1 Object First link which should be compared against the second link
link2 Object Second link which should be compared against the first link
steps number steps at which the line is sampled
Source:

drawHeatMap(dataPoints, radius)

This function sets the required properties to draw the heatmap. The heatmap itself is drawn by the javascript file "heatmap.js". This file needs a container of a canvas, where the heatmap-canvas is appended as a child. Furthermore a legend and a close-button are created.
Parameters:
Name Type Description
dataPoints Array contains the data in the following form:

var nodes = [

x: 1

y: 0

​​​

comDistr: 0

]
radius number is the number which determines the radius of the drawn points in the heatmap
Source:

drawMetaNodeGraphAndStatistic()

This functions draws the metanode graph and the statistics. For the metanode graph a d3 force layout is created on a svg. The statistic is drawn as grouped bar chart, which is also located on an svg. Also a close button is created to delete these two svgs.
Source:

drawMetaNodes(metaNodeSVG)

This functions draws the metaNode graph on a delivered svg. For every community number a meta-node is drawn with its related color. The size of the node is calculated according to the amount of nodes beloning to the certain community The strength of the links is dependent on the number of inter-edges to the respective other communities.
Parameters:
Name Type Description
metaNodeSVG SVG contains the SVG on which the graph will be drawn
Source:

EdgeBundlingMetrics(selectedLinks, alpha, beta, gamma) → {Array}

Function calculates Different Edge-Bundling Metrics. Therefore some chosen edges get compared against each other edge with 3 different metrics. --> Distance, Edge length similarity, Parallelism The result of these 3 Metrics get aggregated to an consistency value. The Function returns the consistency value for each link which gets sampled for the heatmap. The Lines get sampled in 4 Steps and in 8 steps for the display on the svg
Parameters:
Name Type Description
selectedLinks Array The links which should be compared by the metrics
alpha number The weight for the Distance Metric
beta number The weight for the Edge length similarity Metric
gamma number The weight for the Parallelism Metric
Source:
Returns:
result Array of objects for the Heatmap -> {x, y, value}
Type
Array

EdgeLengthSimilarity(link1, link2)

METRIC 2: Edge length similarity The edge length similarity between link1 and link2 is the minimum between the length of link1 and link2 divided by the maximum between the length of link1 and link2.
Parameters:
Name Type Description
link1 Object First link which should be compared against the second link
link2 Object Second link which should be compared against the first link
Source:

EdgeSampling(selectedLinks, steps, linkValues) → {Array}

The function uses the given links ans samples it in defined steps. It returns an Array with the coordinates and the value of the link.
Parameters:
Name Type Description
selectedLinks Array The links which should be sampled
steps number Steps (amount) in which the lines should be sampled
linkValues Array Array of Values which the respective line should get (in Example the result of a Metric which can be used by the Heatmap)
Source:
Returns:
structure Array of objects with coordinates on the a svg and the corresponding value (comDistr) {x, y, comDistr}
Type
Array
Getter for the selected links
Source:
Returns:
Array of all selected links in a svg
Type
Array

normalizeData(dataP) → {Object}

This functions normalizes the data, which means that all values are set between 0 and 100.
Parameters:
Name Type Description
dataP Array is the dataset which should be normalized
Source:
Returns:
dataArray is the nomalized dataset

var datapoint = [

x: 1

y: 0

​​​

value: 0

]

The final data needed by heatmap.js is:

var dataset = [

max: //maximum value

min: //minimum value

​​​

datapoint[]: /datapoint array

]

Type
Object

occurrence(array) → {Array}

Function iterates over all nodes and their communities in the given array and adds up the amount for every community Result is an Array of how many nodes are in the different communities
Parameters:
Name Type Description
array Array Array of all nodes and an number to which community they belong
Source:
Returns:
occurrences Array with numbers which define how many nodes are in a community (0,..,n)
Type
Array

Parallelism(link1, link2)

METRIC 3: Parallelism The parallelism of two links is measured as the minimum between: (projection of link1 on link2) /link2 and (projection of link2 on link1) /link1
Parameters:
Name Type Description
link1 Object First link which should be compared against the second link
link2 Object Second link which should be compared against the first link
Source:

Events

onclick Activates after clicking onto the Aggregate Button

The function calculates the Meta Nodes and draws the Statistic and Graph for it. The calculation only starts if the graph drawing is finished (calculationsReady = true). Before drawing the new Heatmap, old canvas, statistics and other heatmaps are deleted.
Source:

onclick Activates after clicking onto the AutocorrelationBased Button

The function calculates the Autocorrelation Community Metric and draws the Heatmap for it. The calculation only starts if the graph drawing is finished (calculationsReady = true). Before drawing the new Heatmap, old canvas, statistics and other heatmaps are deleted.
Source:

onclick Activates after clicking onto the EdgeBundling Button

The function calculates the EdgeBundling Metric and draws the Heatmap for it. The calculation only starts if the graph drawing is finished (calculationsReady = true) and the user has selected at least 2 links on the graph (svg). Before drawing the new Heatmap, old canvas, statistics and other heatmaps are deleted.
Source:

onclick Activates after clicking onto the EntropyBased Button

The function calculates the EntropyBased Community Metric and draws the Heatmap for it. The calculation only starts if the graph drawing is finished (calculationsReady = true). Before drawing the new Heatmap, old canvas, statistics and other heatmaps are deleted.
Source:

oninput Activates after changing the Distance Weight value

Gets the Weight for the Distance from the input field and stores it in the global variable "alpha" Calls @checkValidWeight function
Source:

oninput Activates after changing the EdgeLength Weight value

Gets the Weight for the EdgeLength from the input field and stores it in the global variable "beta" Calls @checkValidWeight function
Source:

oninput Activates after changing the Parallelism Weight value

Gets the Weight for the Parallelism from the input field and stores it in the global variable "beta" Calls @checkValidWeight function
Source:

oninput Activates after changing the slider value

Writes out the Range Slider Value to a label and the global variable "filterArea"
Source:

onmouseout Ends the drawing of the Rect

Function for the Selection of Edges. The Function initializes a mousedown, mousemove, mouseup, mousout Event on the svg.
Parameters:
Name Type Description
svg Object The SVg in which the graph gets drawn
link Array All links which are generated by d3 [Array of Objects]
Source: