From 1835979a647d2bd1adc4bcd116b03a967c35e670 Mon Sep 17 00:00:00 2001
From: Merle Stahl <merle.stahl@studium.uni-hamburg.de>
Date: Tue, 23 Nov 2021 23:47:36 +0100
Subject: [PATCH] Dokumentation
---
Output/bob/files.html | 2 +-
Output/bob/index.html | 2 +-
Output/bob/symbols/_global_.html | 828 +++++++++++++++++++++++++++++-
Output/bob/symbols/src/cn.js.html | 490 ++++++++++--------
Output/cn.js | 205 +++++---
data.json | 23 +
6 files changed, 1249 insertions(+), 301 deletions(-)
create mode 100644 data.json
diff --git a/Output/bob/files.html b/Output/bob/files.html
index 1bda2af..4be3f10 100644
--- a/Output/bob/files.html
+++ b/Output/bob/files.html
@@ -210,7 +210,7 @@ ul.inheritsList
</div>
<div class="fineprint" style="clear:both">
- Documentation generated by <a href="http://code.google.com/p/jsdoc-toolkit/" target="_blankt">JsDoc Toolkit</a> 2.4.0 on Tue Nov 23 2021 18:11:38 GMT+0100 (MEZ)
+ Documentation generated by <a href="http://code.google.com/p/jsdoc-toolkit/" target="_blankt">JsDoc Toolkit</a> 2.4.0 on Tue Nov 23 2021 23:46:32 GMT+0100 (MEZ)
</div>
</body>
</html>
\ No newline at end of file
diff --git a/Output/bob/index.html b/Output/bob/index.html
index ba5a2d4..1dcd212 100644
--- a/Output/bob/index.html
+++ b/Output/bob/index.html
@@ -204,7 +204,7 @@ ul.inheritsList
</div>
<div class="fineprint" style="clear:both">
- Documentation generated by <a href="http://code.google.com/p/jsdoc-toolkit/" target="_blankt">JsDoc Toolkit</a> 2.4.0 on Tue Nov 23 2021 18:11:38 GMT+0100 (MEZ)
+ Documentation generated by <a href="http://code.google.com/p/jsdoc-toolkit/" target="_blankt">JsDoc Toolkit</a> 2.4.0 on Tue Nov 23 2021 23:46:32 GMT+0100 (MEZ)
</div>
</body>
</html>
\ No newline at end of file
diff --git a/Output/bob/symbols/_global_.html b/Output/bob/symbols/_global_.html
index fb8ad69..987500e 100644
--- a/Output/bob/symbols/_global_.html
+++ b/Output/bob/symbols/_global_.html
@@ -236,7 +236,51 @@ ul.inheritsList
<div class="fixedFont">
<b><a href="../symbols/_global_.html#g">g</a></b>
</div>
- <div class="description">create group element</div>
+ <div class="description">creates group element</div>
+ </td>
+ </tr>
+
+ <tr>
+ <td class="attributes"> </td>
+ <td class="nameDescription">
+ <div class="fixedFont">
+ <b><a href="../symbols/_global_.html#link">link</a></b>
+ </div>
+ <div class="description">creates link object</div>
+ </td>
+ </tr>
+
+ <tr>
+ <td class="attributes"> </td>
+ <td class="nameDescription">
+ <div class="fixedFont">
+ <b><a href="../symbols/_global_.html#rect">rect</a></b>
+ </div>
+ <div class="description">creates a background
+creates a click functionality of the background</div>
+ </td>
+ </tr>
+
+ <tr>
+ <td class="attributes"> </td>
+ <td class="nameDescription">
+ <div class="fixedFont">
+ <b><a href="../symbols/_global_.html#simulation">simulation</a></b>
+ </div>
+ <div class="description">creates a new simulation
+updates the positions of the links and nodes when the
+ state of the layout has changed (simulation has advanced by a tick)</div>
+ </td>
+ </tr>
+
+ <tr>
+ <td class="attributes"> </td>
+ <td class="nameDescription">
+ <div class="fixedFont">
+ <b><a href="../symbols/_global_.html#svg">svg</a></b>
+ </div>
+ <div class="description">creates svg object and associated attributes
+applies the zoom behavior to svg</div>
</td>
</tr>
@@ -246,7 +290,7 @@ ul.inheritsList
<div class="fixedFont">
<b><a href="../symbols/_global_.html#zoom">zoom</a></b>
</div>
- <div class="description">create a new zoom behavior and apply it to svg</div>
+ <div class="description">creates a new zoom behavior</div>
</td>
</tr>
@@ -276,7 +320,43 @@ ul.inheritsList
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/_global_.html#center">center</a></b>()
</div>
- <div class="description">sets the transform such that svg is centered</div>
+ <div class="description">transforms svg so that it is centered</div>
+ </td>
+ </tr>
+
+ <tr>
+ <td class="attributes"> </td>
+ <td class="nameDescription">
+ <div class="fixedFont"><b><a href="../symbols/_global_.html#clickNode">clickNode</a></b>(node)
+ </div>
+ <div class="description">colors the circle and its links black and removes the previous markings</div>
+ </td>
+ </tr>
+
+ <tr>
+ <td class="attributes"> </td>
+ <td class="nameDescription">
+ <div class="fixedFont"><b><a href="../symbols/_global_.html#clickRect">clickRect</a></b>()
+ </div>
+ <div class="description">removes the markings of the circles and their links</div>
+ </td>
+ </tr>
+
+ <tr>
+ <td class="attributes"> </td>
+ <td class="nameDescription">
+ <div class="fixedFont"><b><a href="../symbols/_global_.html#dragged">dragged</a></b>(node)
+ </div>
+ <div class="description">applies the dragging to the node</div>
+ </td>
+ </tr>
+
+ <tr>
+ <td class="attributes"> </td>
+ <td class="nameDescription">
+ <div class="fixedFont"><b><a href="../symbols/_global_.html#dragstarted">dragstarted</a></b>(node)
+ </div>
+ <div class="description">initializes the dragging of the node</div>
</td>
</tr>
@@ -289,12 +369,106 @@ ul.inheritsList
</td>
</tr>
+ <tr>
+ <td class="attributes"> </td>
+ <td class="nameDescription">
+ <div class="fixedFont"><b><a href="../symbols/_global_.html#isLinkForNode">isLinkForNode</a></b>(node, link)
+ </div>
+ <div class="description">returns true if link is directly connected to node and false if it is not</div>
+ </td>
+ </tr>
+
+ <tr>
+ <td class="attributes"> </td>
+ <td class="nameDescription">
+ <div class="fixedFont"><b><a href="../symbols/_global_.html#marker">marker</a></b>(color)
+ </div>
+ <div class="description">creates arrowhead and returns its url</div>
+ </td>
+ </tr>
+
+ <tr>
+ <td class="attributes"> </td>
+ <td class="nameDescription">
+ <div class="fixedFont"><b><a href="../symbols/_global_.html#marklink">marklink</a></b>(node)
+ </div>
+ <div class="description">sets color of link (line and arrowhead) to black if it is directly connected to node
+and to grey otherwise</div>
+ </td>
+ </tr>
+
+ <tr>
+ <td class="attributes"> </td>
+ <td class="nameDescription">
+ <div class="fixedFont"><b><a href="../symbols/_global_.html#resetGraph">resetGraph</a></b>()
+ </div>
+ <div class="description">resets the positions of the nodes</div>
+ </td>
+ </tr>
+
<tr>
<td class="attributes"> </td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/_global_.html#resetZoom">resetZoom</a></b>()
</div>
- <div class="description">sets the</div>
+ <div class="description">transforms svg so that that the zoom is reset</div>
+ </td>
+ </tr>
+
+ <tr>
+ <td class="attributes"> </td>
+ <td class="nameDescription">
+ <div class="fixedFont"><b><a href="../symbols/_global_.html#textfunc">textfunc</a></b>(node)
+ </div>
+ <div class="description">outputs node info to textbox</div>
+ </td>
+ </tr>
+
+ <tr>
+ <td class="attributes"> </td>
+ <td class="nameDescription">
+ <div class="fixedFont"><b><a href="../symbols/_global_.html#tickHandler">tickHandler</a></b>()
+ </div>
+ <div class="description">updates the positions of the links and nodes</div>
+ </td>
+ </tr>
+
+ <tr>
+ <td class="attributes"> </td>
+ <td class="nameDescription">
+ <div class="fixedFont"><b><a href="../symbols/_global_.html#update">update</a></b>(nodes, links)
+ </div>
+ <div class="description">calls update functions for links and nodes
+adds the nodes and links to the simulation</div>
+ </td>
+ </tr>
+
+ <tr>
+ <td class="attributes"> </td>
+ <td class="nameDescription">
+ <div class="fixedFont"><b><a href="../symbols/_global_.html#updateLinks">updateLinks</a></b>(links)
+ </div>
+ <div class="description">initializes and shows links</div>
+ </td>
+ </tr>
+
+ <tr>
+ <td class="attributes"> </td>
+ <td class="nameDescription">
+ <div class="fixedFont"><b><a href="../symbols/_global_.html#updateNodes">updateNodes</a></b>(nodes)
+ </div>
+ <div class="description">initializes and shows nodes with circles and texts
+creates a new drag behavior and applies it to the circles
+creates a click functionality of the circles and texts</div>
+ </td>
+ </tr>
+
+ <tr>
+ <td class="attributes"> </td>
+ <td class="nameDescription">
+ <div class="fixedFont"><b><a href="../symbols/_global_.html#zoomHandler">zoomHandler</a></b>()
+ </div>
+ <div class="description">applies the transformation (zooming or dragging) to the g element</div>
</td>
</tr>
@@ -324,7 +498,111 @@ ul.inheritsList
</div>
<div class="description">
- create group element
+ creates group element
+
+ <br />
+ <i>Defined in: </i> <a href="../symbols/src/cn.js.html">cn.js</a>.
+
+
+ </div>
+
+
+
+
+
+
+
+
+ <hr />
+
+ <a name="link"> </a>
+ <div class="fixedFont">
+
+
+ <b>link</b>
+
+ </div>
+ <div class="description">
+ creates link object
+
+ <br />
+ <i>Defined in: </i> <a href="../symbols/src/cn.js.html">cn.js</a>.
+
+
+ </div>
+
+
+
+
+
+
+
+
+ <hr />
+
+ <a name="rect"> </a>
+ <div class="fixedFont">
+
+
+ <b>rect</b>
+
+ </div>
+ <div class="description">
+ creates a background
+creates a click functionality of the background
+
+ <br />
+ <i>Defined in: </i> <a href="../symbols/src/cn.js.html">cn.js</a>.
+
+
+ </div>
+
+
+
+
+
+
+
+
+ <hr />
+
+ <a name="simulation"> </a>
+ <div class="fixedFont">
+
+
+ <b>simulation</b>
+
+ </div>
+ <div class="description">
+ creates a new simulation
+updates the positions of the links and nodes when the
+ state of the layout has changed (simulation has advanced by a tick)
+
+ <br />
+ <i>Defined in: </i> <a href="../symbols/src/cn.js.html">cn.js</a>.
+
+
+ </div>
+
+
+
+
+
+
+
+
+ <hr />
+
+ <a name="svg"> </a>
+ <div class="fixedFont">
+
+
+ <b>svg</b>
+
+ </div>
+ <div class="description">
+ creates svg object and associated attributes
+applies the zoom behavior to svg
<br />
<i>Defined in: </i> <a href="../symbols/src/cn.js.html">cn.js</a>.
@@ -349,7 +627,7 @@ ul.inheritsList
</div>
<div class="description">
- create a new zoom behavior and apply it to svg
+ creates a new zoom behavior
<br />
<i>Defined in: </i> <a href="../symbols/src/cn.js.html">cn.js</a>.
@@ -382,7 +660,7 @@ ul.inheritsList
</div>
<div class="description">
- sets the transform such that svg is centered
+ transforms svg so that it is centered
<br />
<i>Defined in: </i> <a href="../symbols/src/cn.js.html">cn.js</a>.
@@ -402,15 +680,15 @@ ul.inheritsList
<hr />
- <a name="firstauthor"> </a>
+ <a name="clickNode"> </a>
<div class="fixedFont">
- <b>firstauthor</b>(authors)
+ <b>clickNode</b>(node)
</div>
<div class="description">
- returns last name of first author
+ colors the circle and its links black and removes the previous markings
<br />
<i>Defined in: </i> <a href="../symbols/src/cn.js.html">cn.js</a>.
@@ -425,10 +703,10 @@ ul.inheritsList
<dt class="heading">Parameters:</dt>
<dt>
- <span class="light fixedFont">{string}</span> <b>authors</b>
+ <span class="light fixedFont">{object}</span> <b>node</b>
</dt>
- <dd>- The comma-separated string of authors</dd>
+ <dd>- node</dd>
</dl>
@@ -441,15 +719,533 @@ ul.inheritsList
<hr />
- <a name="resetZoom"> </a>
+ <a name="clickRect"> </a>
<div class="fixedFont">
- <b>resetZoom</b>()
+ <b>clickRect</b>()
+
+ </div>
+ <div class="description">
+ removes the markings of the circles and their links
+
+ <br />
+ <i>Defined in: </i> <a href="../symbols/src/cn.js.html">cn.js</a>.
+
+
+ </div>
+
+
+
+
+
+
+
+
+
+
+
+ <hr />
+
+ <a name="dragged"> </a>
+ <div class="fixedFont">
+
+
+ <b>dragged</b>(node)
+
+ </div>
+ <div class="description">
+ applies the dragging to the node
+
+ <br />
+ <i>Defined in: </i> <a href="../symbols/src/cn.js.html">cn.js</a>.
+
+
+ </div>
+
+
+
+
+ <dl class="detailList">
+ <dt class="heading">Parameters:</dt>
+
+ <dt>
+ <span class="light fixedFont">{object}</span> <b>node</b>
+
+ </dt>
+ <dd>- data of current node</dd>
+
+ </dl>
+
+
+
+
+
+
+
+
+ <hr />
+
+ <a name="dragstarted"> </a>
+ <div class="fixedFont">
+
+
+ <b>dragstarted</b>(node)
+
+ </div>
+ <div class="description">
+ initializes the dragging of the node
+
+ <br />
+ <i>Defined in: </i> <a href="../symbols/src/cn.js.html">cn.js</a>.
+
+
+ </div>
+
+
+
+
+ <dl class="detailList">
+ <dt class="heading">Parameters:</dt>
+
+ <dt>
+ <span class="light fixedFont">{object}</span> <b>node</b>
+
+ </dt>
+ <dd>- data of current node</dd>
+
+ </dl>
+
+
+
+
+
+
+
+
+ <hr />
+
+ <a name="firstauthor"> </a>
+ <div class="fixedFont">
+
+
+ <b>firstauthor</b>(authors)
+
+ </div>
+ <div class="description">
+ returns last name of first author
+
+ <br />
+ <i>Defined in: </i> <a href="../symbols/src/cn.js.html">cn.js</a>.
+
+
+ </div>
+
+
+
+
+ <dl class="detailList">
+ <dt class="heading">Parameters:</dt>
+
+ <dt>
+ <span class="light fixedFont">{string}</span> <b>authors</b>
+
+ </dt>
+ <dd>- the comma-separated string of authors</dd>
+
+ </dl>
+
+
+
+
+
+
+
+
+ <hr />
+
+ <a name="isLinkForNode"> </a>
+ <div class="fixedFont">
+
+
+ <b>isLinkForNode</b>(node, link)
+
+ </div>
+ <div class="description">
+ returns true if link is directly connected to node and false if it is not
+
+ <br />
+ <i>Defined in: </i> <a href="../symbols/src/cn.js.html">cn.js</a>.
+
+
+ </div>
+
+
+
+
+ <dl class="detailList">
+ <dt class="heading">Parameters:</dt>
+
+ <dt>
+ <span class="light fixedFont">{object}</span> <b>node</b>
+
+ </dt>
+ <dd>- node</dd>
+
+ <dt>
+ <span class="light fixedFont">{object}</span> <b>link</b>
+
+ </dt>
+ <dd>- link</dd>
+
+ </dl>
+
+
+
+
+
+
+
+
+ <hr />
+
+ <a name="marker"> </a>
+ <div class="fixedFont">
+
+
+ <b>marker</b>(color)
+
+ </div>
+ <div class="description">
+ creates arrowhead and returns its url
+
+ <br />
+ <i>Defined in: </i> <a href="../symbols/src/cn.js.html">cn.js</a>.
+
+
+ </div>
+
+
+
+
+ <dl class="detailList">
+ <dt class="heading">Parameters:</dt>
+
+ <dt>
+ <span class="light fixedFont">{string}</span> <b>color</b>
+
+ </dt>
+ <dd>- color of arrowhead</dd>
+
+ </dl>
+
+
+
+
+
+
+
+
+ <hr />
+
+ <a name="marklink"> </a>
+ <div class="fixedFont">
+
+
+ <b>marklink</b>(node)
+
+ </div>
+ <div class="description">
+ sets color of link (line and arrowhead) to black if it is directly connected to node
+and to grey otherwise
+
+ <br />
+ <i>Defined in: </i> <a href="../symbols/src/cn.js.html">cn.js</a>.
+
+
+ </div>
+
+
+
+
+ <dl class="detailList">
+ <dt class="heading">Parameters:</dt>
+
+ <dt>
+ <span class="light fixedFont">{object}</span> <b>node</b>
+
+ </dt>
+ <dd>- node</dd>
+
+ </dl>
+
+
+
+
+
+
+
+
+ <hr />
+
+ <a name="resetGraph"> </a>
+ <div class="fixedFont">
+
+
+ <b>resetGraph</b>()
+
+ </div>
+ <div class="description">
+ resets the positions of the nodes
+
+ <br />
+ <i>Defined in: </i> <a href="../symbols/src/cn.js.html">cn.js</a>.
+
+
+ </div>
+
+
+
+
+
+
+
+
+
+
+
+ <hr />
+
+ <a name="resetZoom"> </a>
+ <div class="fixedFont">
+
+
+ <b>resetZoom</b>()
+
+ </div>
+ <div class="description">
+ transforms svg so that that the zoom is reset
+
+ <br />
+ <i>Defined in: </i> <a href="../symbols/src/cn.js.html">cn.js</a>.
+
+
+ </div>
+
+
+
+
+
+
+
+
+
+
+
+ <hr />
+
+ <a name="textfunc"> </a>
+ <div class="fixedFont">
+
+
+ <b>textfunc</b>(node)
+
+ </div>
+ <div class="description">
+ outputs node info to textbox
+
+ <br />
+ <i>Defined in: </i> <a href="../symbols/src/cn.js.html">cn.js</a>.
+
+
+ </div>
+
+
+
+
+ <dl class="detailList">
+ <dt class="heading">Parameters:</dt>
+
+ <dt>
+ <span class="light fixedFont">{object}</span> <b>node</b>
+
+ </dt>
+ <dd>- data of current node</dd>
+
+ </dl>
+
+
+
+
+
+
+
+
+ <hr />
+
+ <a name="tickHandler"> </a>
+ <div class="fixedFont">
+
+
+ <b>tickHandler</b>()
+
+ </div>
+ <div class="description">
+ updates the positions of the links and nodes
+
+ <br />
+ <i>Defined in: </i> <a href="../symbols/src/cn.js.html">cn.js</a>.
+
+
+ </div>
+
+
+
+
+
+
+
+
+
+
+
+ <hr />
+
+ <a name="update"> </a>
+ <div class="fixedFont">
+
+
+ <b>update</b>(nodes, links)
+
+ </div>
+ <div class="description">
+ calls update functions for links and nodes
+adds the nodes and links to the simulation
+
+ <br />
+ <i>Defined in: </i> <a href="../symbols/src/cn.js.html">cn.js</a>.
+
+
+ </div>
+
+
+
+
+ <dl class="detailList">
+ <dt class="heading">Parameters:</dt>
+
+ <dt>
+ <span class="light fixedFont">{object}</span> <b>nodes</b>
+
+ </dt>
+ <dd>- nodes</dd>
+
+ <dt>
+ <span class="light fixedFont">{object}</span> <b>links</b>
+
+ </dt>
+ <dd>- links</dd>
+
+ </dl>
+
+
+
+
+
+
+
+
+ <hr />
+
+ <a name="updateLinks"> </a>
+ <div class="fixedFont">
+
+
+ <b>updateLinks</b>(links)
+
+ </div>
+ <div class="description">
+ initializes and shows links
+
+ <br />
+ <i>Defined in: </i> <a href="../symbols/src/cn.js.html">cn.js</a>.
+
+
+ </div>
+
+
+
+
+ <dl class="detailList">
+ <dt class="heading">Parameters:</dt>
+
+ <dt>
+ <span class="light fixedFont">{object}</span> <b>links</b>
+
+ </dt>
+ <dd>- links</dd>
+
+ </dl>
+
+
+
+
+
+
+
+
+ <hr />
+
+ <a name="updateNodes"> </a>
+ <div class="fixedFont">
+
+
+ <b>updateNodes</b>(nodes)
+
+ </div>
+ <div class="description">
+ initializes and shows nodes with circles and texts
+creates a new drag behavior and applies it to the circles
+creates a click functionality of the circles and texts
+
+ <br />
+ <i>Defined in: </i> <a href="../symbols/src/cn.js.html">cn.js</a>.
+
+
+ </div>
+
+
+
+
+ <dl class="detailList">
+ <dt class="heading">Parameters:</dt>
+
+ <dt>
+ <span class="light fixedFont">{object}</span> <b>nodes</b>
+
+ </dt>
+ <dd>- nodes</dd>
+
+ </dl>
+
+
+
+
+
+
+
+
+ <hr />
+
+ <a name="zoomHandler"> </a>
+ <div class="fixedFont">
+
+
+ <b>zoomHandler</b>()
</div>
<div class="description">
- sets the
+ applies the transformation (zooming or dragging) to the g element
<br />
<i>Defined in: </i> <a href="../symbols/src/cn.js.html">cn.js</a>.
@@ -481,7 +1277,7 @@ ul.inheritsList
<!-- ============================== footer ================================= -->
<div class="fineprint" style="clear:both">
- Documentation generated by <a href="http://code.google.com/p/jsdoc-toolkit/" target="_blank">JsDoc Toolkit</a> 2.4.0 on Tue Nov 23 2021 18:11:38 GMT+0100 (MEZ)
+ Documentation generated by <a href="http://code.google.com/p/jsdoc-toolkit/" target="_blank">JsDoc Toolkit</a> 2.4.0 on Tue Nov 23 2021 23:46:32 GMT+0100 (MEZ)
</div>
</body>
</html>
diff --git a/Output/bob/symbols/src/cn.js.html b/Output/bob/symbols/src/cn.js.html
index 3a629bb..afaf24c 100644
--- a/Output/bob/symbols/src/cn.js.html
+++ b/Output/bob/symbols/src/cn.js.html
@@ -5,215 +5,293 @@
.STRN {color: #393;}
.REGX {color: #339;}
.line {border-right: 1px dotted #666; color: #666; font-style: normal;}
- </style></head><body><pre><span class='line'> 1</span> <span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">svg</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">d3.select</span><span class="PUNC">(</span><span class="STRN">"svg"</span><span class="PUNC">)</span><span class="PUNC">,</span><span class="WHIT">
-<span class='line'> 2</span> </span><span class="NAME">width</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="NAME">svg.attr</span><span class="PUNC">(</span><span class="STRN">"width"</span><span class="PUNC">)</span><span class="PUNC">,</span><span class="WHIT">
-<span class='line'> 3</span> </span><span class="NAME">height</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="NAME">svg.attr</span><span class="PUNC">(</span><span class="STRN">"height"</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
-<span class='line'> 4</span>
-<span class='line'> 5</span> </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">node</span><span class="PUNC">,</span><span class="WHIT">
-<span class='line'> 6</span> </span><span class="NAME">r</span><span class="PUNC">=</span><span class="NUMB">12</span><span class="PUNC">,</span><span class="WHIT">
-<span class='line'> 7</span> </span><span class="NAME">color</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">d3.scaleOrdinal</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT">
-<span class='line'> 8</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">domain</span><span class="PUNC">(</span><span class="PUNC">[</span><span class="STRN">"citing"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">"input"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">"cited"</span><span class="PUNC">]</span><span class="PUNC">)</span><span class="WHIT">
-<span class='line'> 9</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">range</span><span class="PUNC">(</span><span class="PUNC">[</span><span class="STRN">' #01d7c0'</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">' #8b90fe '</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">' #a15eb2 '</span><span class="PUNC">]</span><span class="PUNC">)</span><span class="PUNC">,</span><span class="WHIT">
-<span class='line'> 10</span> </span><span class="NAME">yscale</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">d3.scaleOrdinal</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT">
-<span class='line'> 11</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">domain</span><span class="PUNC">(</span><span class="PUNC">[</span><span class="STRN">"citing"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">"input"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">"cited"</span><span class="PUNC">]</span><span class="PUNC">)</span><span class="WHIT">
-<span class='line'> 12</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">range</span><span class="PUNC">(</span><span class="PUNC">[</span><span class="NUMB">0</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NUMB">200</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NUMB">400</span><span class="PUNC">]</span><span class="PUNC">)</span><span class="PUNC">,</span><span class="WHIT">
-<span class='line'> 13</span> </span><span class="NAME">toRemove</span><span class="PUNC">;</span><span class="WHIT">
+ </style></head><body><pre><span class='line'> 1</span> <span class="COMM">/**
+<span class='line'> 2</span> * creates a new zoom behavior
+<span class='line'> 3</span> */</span><span class="WHIT">
+<span class='line'> 4</span> </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">zoom</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">d3.zoom</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">.</span><span class="NAME">on</span><span class="PUNC">(</span><span class="STRN">"zoom"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">zoomHandler</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'> 5</span>
+<span class='line'> 6</span> </span><span class="COMM">/**
+<span class='line'> 7</span> * creates svg object and associated attributes
+<span class='line'> 8</span> * applies the zoom behavior to svg
+<span class='line'> 9</span> */</span><span class="WHIT">
+<span class='line'> 10</span> </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">svg</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">d3.select</span><span class="PUNC">(</span><span class="STRN">"svg"</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'> 11</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">call</span><span class="PUNC">(</span><span class="NAME">zoom</span><span class="PUNC">)</span><span class="PUNC">,</span><span class="WHIT">
+<span class='line'> 12</span> </span><span class="NAME">width</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">svg.attr</span><span class="PUNC">(</span><span class="STRN">"width"</span><span class="PUNC">)</span><span class="PUNC">,</span><span class="WHIT">
+<span class='line'> 13</span> </span><span class="NAME">height</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">svg.attr</span><span class="PUNC">(</span><span class="STRN">"height"</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 14</span>
-<span class='line'> 15</span> </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">link</span><span class="PUNC">;</span><span class="WHIT">
-<span class='line'> 16</span>
-<span class='line'> 17</span> </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">rect</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">svg.append</span><span class="PUNC">(</span><span class="STRN">"rect"</span><span class="PUNC">)</span><span class="WHIT">
-<span class='line'> 18</span> </span><span class="PUNC">.</span><span class="NAME">attr</span><span class="PUNC">(</span><span class="STRN">"x"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">)</span><span class="WHIT">
-<span class='line'> 19</span> </span><span class="PUNC">.</span><span class="NAME">attr</span><span class="PUNC">(</span><span class="STRN">"y"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">)</span><span class="WHIT">
-<span class='line'> 20</span> </span><span class="PUNC">.</span><span class="NAME">attr</span><span class="PUNC">(</span><span class="STRN">"height"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">height</span><span class="PUNC">)</span><span class="WHIT">
-<span class='line'> 21</span> </span><span class="PUNC">.</span><span class="NAME">attr</span><span class="PUNC">(</span><span class="STRN">"width"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">width</span><span class="PUNC">)</span><span class="WHIT">
-<span class='line'> 22</span> </span><span class="PUNC">.</span><span class="NAME">style</span><span class="PUNC">(</span><span class="STRN">"fill"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">'white'</span><span class="PUNC">)</span><span class="WHIT">
-<span class='line'> 23</span> </span><span class="PUNC">.</span><span class="NAME">on</span><span class="PUNC">(</span><span class="STRN">'click'</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">d</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
-<span class='line'> 24</span> </span><span class="WHIT"> </span><span class="NAME">d3.selectAll</span><span class="PUNC">(</span><span class="STRN">".circle"</span><span class="PUNC">)</span><span class="PUNC">.</span><span class="NAME">style</span><span class="PUNC">(</span><span class="STRN">"stroke"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">"none"</span><span class="PUNC">)</span><span class="WHIT">
-<span class='line'> 25</span> </span><span class="WHIT"> </span><span class="NAME">d3.selectAll</span><span class="PUNC">(</span><span class="STRN">".link"</span><span class="PUNC">)</span><span class="WHIT">
-<span class='line'> 26</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">style</span><span class="PUNC">(</span><span class="STRN">"stroke"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">"#999"</span><span class="PUNC">)</span><span class="WHIT">
-<span class='line'> 27</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">attr</span><span class="PUNC">(</span><span class="STRN">'marker-end'</span><span class="PUNC">,</span><span class="NAME">marker</span><span class="PUNC">(</span><span class="STRN">'#999'</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="WHIT">
-<span class='line'> 28</span> </span><span class="WHIT"> </span><span class="NAME">document.getElementById</span><span class="PUNC">(</span><span class="STRN">'textbox'</span><span class="PUNC">)</span><span class="PUNC">.</span><span class="NAME">innerHTML</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"Click node"</span><span class="PUNC">;</span><span class="WHIT">
-<span class='line'> 29</span> </span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
-<span class='line'> 30</span>
-<span class='line'> 31</span> </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">simulation</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">d3.forceSimulation</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT">
-<span class='line'> 32</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">force</span><span class="PUNC">(</span><span class="STRN">"link"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">d3.forceLink</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">.</span><span class="NAME">id</span><span class="PUNC">(</span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">d</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">d.doi</span><span class="PUNC">;</span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">.</span><span class="NAME">distance</span><span class="PUNC">(</span><span class="NUMB">100</span><span class="PUNC">)</span><span class="PUNC">.</span><span class="NAME">strength</span><span class="PUNC">(</span><span class="NUMB">1</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="WHIT">
-<span class='line'> 33</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">force</span><span class="PUNC">(</span><span class="STRN">"collide"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">d3.forceCollide</span><span class="PUNC">(</span><span class="NUMB">50</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="WHIT">
-<span class='line'> 34</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">force</span><span class="PUNC">(</span><span class="STRN">"charge"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">d3.forceManyBody</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">.</span><span class="NAME">strength</span><span class="PUNC">(</span><span class="PUNC">-</span><span class="NUMB">30</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="WHIT">
-<span class='line'> 35</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">force</span><span class="PUNC">(</span><span class="STRN">"center"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">d3.forceCenter</span><span class="PUNC">(</span><span class="NAME">width</span><span class="PUNC">/</span><span class="NUMB">2</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">height</span><span class="PUNC">/</span><span class="NUMB">2</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="WHIT">
-<span class='line'> 36</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">force</span><span class="PUNC">(</span><span class="STRN">"yscale"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">d3.forceY</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">.</span><span class="NAME">strength</span><span class="PUNC">(</span><span class="NUMB">1</span><span class="PUNC">)</span><span class="PUNC">.</span><span class="NAME">y</span><span class="PUNC">(</span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">d</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">yscale</span><span class="PUNC">(</span><span class="NAME">d.group</span><span class="PUNC">)</span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
-<span class='line'> 37</span>
-<span class='line'> 38</span> </span><span class="COMM">/**
-<span class='line'> 39</span> * create a new zoom behavior and apply it to svg
-<span class='line'> 40</span> */</span><span class="WHIT">
-<span class='line'> 41</span> </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">zoom</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">d3.zoom</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT">
-<span class='line'> 42</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">on</span><span class="PUNC">(</span><span class="STRN">"zoom"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">zoom</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
-<span class='line'> 43</span> </span><span class="NAME">zoom</span><span class="PUNC">(</span><span class="NAME">svg</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'> 15</span> </span><span class="COMM">/**
+<span class='line'> 16</span> * creates node object and associated attributes
+<span class='line'> 17</span> */</span><span class="WHIT">
+<span class='line'> 18</span> </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">node</span><span class="PUNC">,</span><span class="WHIT">
+<span class='line'> 19</span> </span><span class="NAME">r</span><span class="PUNC">=</span><span class="NUMB">12</span><span class="PUNC">,</span><span class="WHIT">
+<span class='line'> 20</span> </span><span class="NAME">color</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">d3.scaleOrdinal</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'> 21</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">domain</span><span class="PUNC">(</span><span class="PUNC">[</span><span class="STRN">"citing"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">"input"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">"cited"</span><span class="PUNC">]</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'> 22</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">range</span><span class="PUNC">(</span><span class="PUNC">[</span><span class="STRN">' #01d7c0'</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">' #8b90fe '</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">' #a15eb2 '</span><span class="PUNC">]</span><span class="PUNC">)</span><span class="PUNC">,</span><span class="WHIT">
+<span class='line'> 23</span> </span><span class="NAME">yscale</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">d3.scaleOrdinal</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'> 24</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">domain</span><span class="PUNC">(</span><span class="PUNC">[</span><span class="STRN">"citing"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">"input"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">"cited"</span><span class="PUNC">]</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'> 25</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">range</span><span class="PUNC">(</span><span class="PUNC">[</span><span class="NUMB">0</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NUMB">200</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NUMB">400</span><span class="PUNC">]</span><span class="PUNC">)</span><span class="PUNC">,</span><span class="WHIT">
+<span class='line'> 26</span> </span><span class="NAME">toRemove</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'> 27</span>
+<span class='line'> 28</span> </span><span class="COMM">/**
+<span class='line'> 29</span> * creates link object
+<span class='line'> 30</span> */</span><span class="WHIT">
+<span class='line'> 31</span> </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">link</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'> 32</span>
+<span class='line'> 33</span> </span><span class="COMM">/**
+<span class='line'> 34</span> * creates a background
+<span class='line'> 35</span> * creates a click functionality of the background
+<span class='line'> 36</span> */</span><span class="WHIT">
+<span class='line'> 37</span> </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">rect</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">svg.append</span><span class="PUNC">(</span><span class="STRN">"rect"</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'> 38</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">attr</span><span class="PUNC">(</span><span class="STRN">"x"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'> 39</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">attr</span><span class="PUNC">(</span><span class="STRN">"y"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'> 40</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">attr</span><span class="PUNC">(</span><span class="STRN">"height"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">height</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'> 41</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">attr</span><span class="PUNC">(</span><span class="STRN">"width"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">width</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'> 42</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">style</span><span class="PUNC">(</span><span class="STRN">"fill"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">'white'</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'> 43</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">on</span><span class="PUNC">(</span><span class="STRN">'click'</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">clickRect</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 44</span>
<span class='line'> 45</span> </span><span class="COMM">/**
-<span class='line'> 46</span> * create group element
-<span class='line'> 47</span> */</span><span class="WHIT">
-<span class='line'> 48</span> </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">g</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">svg.append</span><span class="PUNC">(</span><span class="STRN">"g"</span><span class="PUNC">)</span><span class="WHIT">
-<span class='line'> 49</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">attr</span><span class="PUNC">(</span><span class="STRN">"class"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">"everything"</span><span class="PUNC">)</span><span class="WHIT">
-<span class='line'> 50</span>
-<span class='line'> 51</span> </span><span class="COMM">//d3.json("data.json", function (error, graph) {</span><span class="WHIT">
-<span class='line'> 52</span> </span><span class="NAME">d3.json</span><span class="PUNC">(</span><span class="STRN">"json_text.json"</span><span class="PUNC">)</span><span class="PUNC">.</span><span class="NAME">then</span><span class="PUNC">(</span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">graph</span><span class="PUNC">)</span><span class="PUNC">{</span><span class="WHIT">
-<span class='line'> 53</span> </span><span class="WHIT"> </span><span class="NAME">update</span><span class="PUNC">(</span><span class="NAME">graph.links</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">graph.nodes</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
-<span class='line'> 54</span> </span><span class="PUNC">}</span><span class="PUNC">)</span><span class="WHIT">
-<span class='line'> 55</span>
-<span class='line'> 56</span> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="NAME">update</span><span class="PUNC">(</span><span class="NAME">links</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">nodes</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
-<span class='line'> 57</span> </span><span class="WHIT"> </span><span class="NAME">link</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">g.append</span><span class="PUNC">(</span><span class="STRN">"g"</span><span class="PUNC">)</span><span class="WHIT">
-<span class='line'> 58</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">selectAll</span><span class="PUNC">(</span><span class="STRN">".link"</span><span class="PUNC">)</span><span class="WHIT">
-<span class='line'> 59</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">data</span><span class="PUNC">(</span><span class="NAME">links</span><span class="PUNC">)</span><span class="WHIT">
-<span class='line'> 60</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">enter</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT">
-<span class='line'> 61</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">append</span><span class="PUNC">(</span><span class="STRN">"line"</span><span class="PUNC">)</span><span class="WHIT">
-<span class='line'> 62</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">style</span><span class="PUNC">(</span><span class="STRN">"stroke-width"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">"1px"</span><span class="PUNC">)</span><span class="WHIT">
-<span class='line'> 63</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">style</span><span class="PUNC">(</span><span class="STRN">"stroke"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">"#999"</span><span class="PUNC">)</span><span class="WHIT">
-<span class='line'> 64</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">attr</span><span class="PUNC">(</span><span class="STRN">"class"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">"link"</span><span class="PUNC">)</span><span class="WHIT">
-<span class='line'> 65</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">attr</span><span class="PUNC">(</span><span class="STRN">'marker-end'</span><span class="PUNC">,</span><span class="NAME">marker</span><span class="PUNC">(</span><span class="STRN">"#999"</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="WHIT">
-<span class='line'> 66</span>
-<span class='line'> 67</span> </span><span class="WHIT"> </span><span class="NAME">node</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">g.append</span><span class="PUNC">(</span><span class="STRN">"g"</span><span class="PUNC">)</span><span class="WHIT">
-<span class='line'> 68</span> </span><span class="PUNC">.</span><span class="NAME">selectAll</span><span class="PUNC">(</span><span class="STRN">".node"</span><span class="PUNC">)</span><span class="WHIT">
-<span class='line'> 69</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">data</span><span class="PUNC">(</span><span class="NAME">nodes</span><span class="PUNC">)</span><span class="WHIT">
-<span class='line'> 70</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">enter</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT">
-<span class='line'> 71</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">append</span><span class="PUNC">(</span><span class="STRN">"g"</span><span class="PUNC">)</span><span class="WHIT">
-<span class='line'> 72</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">attr</span><span class="PUNC">(</span><span class="STRN">"class"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">"node"</span><span class="PUNC">)</span><span class="WHIT">
-<span class='line'> 73</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">call</span><span class="PUNC">(</span><span class="NAME">d3.drag</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT">
-<span class='line'> 74</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">on</span><span class="PUNC">(</span><span class="STRN">"start"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">dragstarted</span><span class="PUNC">)</span><span class="WHIT">
-<span class='line'> 75</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">on</span><span class="PUNC">(</span><span class="STRN">"drag"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">dragged</span><span class="PUNC">)</span><span class="WHIT">
-<span class='line'> 76</span> </span><span class="WHIT"> </span><span class="PUNC">)</span><span class="WHIT">
-<span class='line'> 77</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">attr</span><span class="PUNC">(</span><span class="STRN">"initial_x"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">d</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">d.dx</span><span class="PUNC">;</span><span class="PUNC">}</span><span class="PUNC">)</span><span class="WHIT">
-<span class='line'> 78</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">attr</span><span class="PUNC">(</span><span class="STRN">"initial_y"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">d</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">d.dy</span><span class="PUNC">;</span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
-<span class='line'> 79</span>
-<span class='line'> 80</span> </span><span class="WHIT"> </span><span class="NAME">node.append</span><span class="PUNC">(</span><span class="STRN">"circle"</span><span class="PUNC">)</span><span class="WHIT">
-<span class='line'> 81</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">attr</span><span class="PUNC">(</span><span class="STRN">"r"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">r</span><span class="PUNC">)</span><span class="WHIT">
-<span class='line'> 82</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">attr</span><span class="PUNC">(</span><span class="STRN">"class"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">"circle"</span><span class="PUNC">)</span><span class="WHIT">
-<span class='line'> 83</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">style</span><span class="PUNC">(</span><span class="STRN">"fill"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">d</span><span class="PUNC">)</span><span class="PUNC">{</span><span class="WHIT"> </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">color</span><span class="PUNC">(</span><span class="NAME">d.group</span><span class="PUNC">)</span><span class="PUNC">}</span><span class="PUNC">)</span><span class="WHIT">
-<span class='line'> 84</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">on</span><span class="PUNC">(</span><span class="STRN">'click'</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">d</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
-<span class='line'> 85</span> </span><span class="WHIT"> </span><span class="KEYW">if</span><span class="PUNC">(</span><span class="NAME">toRemove</span><span class="PUNC">)</span><span class="PUNC">{</span><span class="WHIT">
-<span class='line'> 86</span> </span><span class="WHIT"> </span><span class="NAME">d3.select</span><span class="PUNC">(</span><span class="NAME">toRemove</span><span class="PUNC">)</span><span class="PUNC">.</span><span class="NAME">selectAll</span><span class="PUNC">(</span><span class="STRN">".circle"</span><span class="PUNC">)</span><span class="PUNC">.</span><span class="NAME">style</span><span class="PUNC">(</span><span class="STRN">"stroke"</span><span class="PUNC">,</span><span class="STRN">"none"</span><span class="PUNC">)</span><span class="WHIT">
-<span class='line'> 87</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
-<span class='line'> 88</span> </span><span class="WHIT"> </span><span class="NAME">toRemove</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.parentNode</span><span class="PUNC">;</span><span class="WHIT">
-<span class='line'> 89</span> </span><span class="WHIT"> </span><span class="NAME">d3.select</span><span class="PUNC">(</span><span class="KEYW">this</span><span class="PUNC">)</span><span class="PUNC">.</span><span class="NAME">style</span><span class="PUNC">(</span><span class="STRN">"stroke"</span><span class="PUNC">,</span><span class="STRN">"black"</span><span class="PUNC">)</span><span class="WHIT">
-<span class='line'> 90</span> </span><span class="WHIT"> </span><span class="NAME">marklink</span><span class="PUNC">(</span><span class="NAME">d</span><span class="PUNC">)</span><span class="WHIT">
-<span class='line'> 91</span> </span><span class="WHIT"> </span><span class="NAME">textfunc</span><span class="PUNC">(</span><span class="NAME">d</span><span class="PUNC">)</span><span class="WHIT">
-<span class='line'> 92</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
-<span class='line'> 93</span>
-<span class='line'> 94</span> </span><span class="WHIT"> </span><span class="NAME">node.append</span><span class="PUNC">(</span><span class="STRN">"text"</span><span class="PUNC">)</span><span class="WHIT">
-<span class='line'> 95</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">attr</span><span class="PUNC">(</span><span class="STRN">"class"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">"text"</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="COMM">//über selectAll(".text") können objs mit der klasse ausgewählt werden</span><span class="WHIT">
-<span class='line'> 96</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">style</span><span class="PUNC">(</span><span class="STRN">"font-size"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">"15px"</span><span class="PUNC">)</span><span class="WHIT">
-<span class='line'> 97</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">text</span><span class="PUNC">(</span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">d</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">firstauthor</span><span class="PUNC">(</span><span class="NAME">d.author</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="PUNC">}</span><span class="PUNC">)</span><span class="WHIT">
-<span class='line'> 98</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">style</span><span class="PUNC">(</span><span class="STRN">'pointer-events'</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">'auto'</span><span class="PUNC">)</span><span class="WHIT">
-<span class='line'> 99</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">on</span><span class="PUNC">(</span><span class="STRN">'click'</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">d</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
-<span class='line'>100</span> </span><span class="WHIT"> </span><span class="KEYW">if</span><span class="PUNC">(</span><span class="NAME">toRemove</span><span class="PUNC">)</span><span class="PUNC">{</span><span class="WHIT">
-<span class='line'>101</span> </span><span class="WHIT"> </span><span class="NAME">d3.select</span><span class="PUNC">(</span><span class="NAME">toRemove</span><span class="PUNC">)</span><span class="PUNC">.</span><span class="NAME">selectAll</span><span class="PUNC">(</span><span class="STRN">".circle"</span><span class="PUNC">)</span><span class="PUNC">.</span><span class="NAME">style</span><span class="PUNC">(</span><span class="STRN">"stroke"</span><span class="PUNC">,</span><span class="STRN">"none"</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
-<span class='line'>102</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
-<span class='line'>103</span> </span><span class="WHIT"> </span><span class="NAME">toRemove</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.parentNode</span><span class="PUNC">;</span><span class="WHIT">
-<span class='line'>104</span> </span><span class="WHIT"> </span><span class="NAME">d3.select</span><span class="PUNC">(</span><span class="NAME">this.parentNode</span><span class="PUNC">)</span><span class="PUNC">.</span><span class="NAME">selectAll</span><span class="PUNC">(</span><span class="STRN">".circle"</span><span class="PUNC">)</span><span class="PUNC">.</span><span class="NAME">style</span><span class="PUNC">(</span><span class="STRN">"stroke"</span><span class="PUNC">,</span><span class="STRN">"black"</span><span class="PUNC">)</span><span class="WHIT">
-<span class='line'>105</span>
-<span class='line'>106</span> </span><span class="WHIT"> </span><span class="NAME">marklink</span><span class="PUNC">(</span><span class="NAME">d</span><span class="PUNC">)</span><span class="WHIT">
-<span class='line'>107</span> </span><span class="WHIT"> </span><span class="NAME">textfunc</span><span class="PUNC">(</span><span class="NAME">d</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
-<span class='line'>108</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
-<span class='line'>109</span>
-<span class='line'>110</span> </span><span class="NAME">simulation</span><span class="WHIT">
-<span class='line'>111</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">nodes</span><span class="PUNC">(</span><span class="NAME">nodes</span><span class="PUNC">)</span><span class="WHIT">
-<span class='line'>112</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">on</span><span class="PUNC">(</span><span class="STRN">"tick"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">ticked</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
-<span class='line'>113</span>
-<span class='line'>114</span> </span><span class="NAME">simulation.force</span><span class="PUNC">(</span><span class="STRN">"link"</span><span class="PUNC">)</span><span class="WHIT">
-<span class='line'>115</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">links</span><span class="PUNC">(</span><span class="NAME">links</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
-<span class='line'>116</span> </span><span class="PUNC">}</span><span class="WHIT">
-<span class='line'>117</span>
-<span class='line'>118</span> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="NAME">isLinkForNode</span><span class="PUNC">(</span><span class="NAME">node</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">link</span><span class="PUNC">)</span><span class="PUNC">{</span><span class="WHIT">
-<span class='line'>119</span> </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">link.source.index</span><span class="WHIT"> </span><span class="PUNC">==</span><span class="WHIT"> </span><span class="NAME">node.index</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="NAME">link.target.index</span><span class="WHIT"> </span><span class="PUNC">==</span><span class="WHIT"> </span><span class="NAME">node.index</span><span class="PUNC">;</span><span class="WHIT">
-<span class='line'>120</span> </span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'> 46</span> * creates a new simulation
+<span class='line'> 47</span> * updates the positions of the links and nodes when the
+<span class='line'> 48</span> state of the layout has changed (simulation has advanced by a tick)
+<span class='line'> 49</span> */</span><span class="WHIT">
+<span class='line'> 50</span> </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">simulation</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">d3.forceSimulation</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'> 51</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">force</span><span class="PUNC">(</span><span class="STRN">"link"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">d3.forceLink</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">.</span><span class="NAME">id</span><span class="PUNC">(</span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">d</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">d.doi</span><span class="PUNC">;</span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">.</span><span class="NAME">distance</span><span class="PUNC">(</span><span class="NUMB">100</span><span class="PUNC">)</span><span class="PUNC">.</span><span class="NAME">strength</span><span class="PUNC">(</span><span class="NUMB">1</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'> 52</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">force</span><span class="PUNC">(</span><span class="STRN">"collide"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">d3.forceCollide</span><span class="PUNC">(</span><span class="NUMB">50</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'> 53</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">force</span><span class="PUNC">(</span><span class="STRN">"charge"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">d3.forceManyBody</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">.</span><span class="NAME">strength</span><span class="PUNC">(</span><span class="PUNC">-</span><span class="NUMB">30</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'> 54</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">force</span><span class="PUNC">(</span><span class="STRN">"center"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">d3.forceCenter</span><span class="PUNC">(</span><span class="NAME">width</span><span class="PUNC">/</span><span class="NUMB">2</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">height</span><span class="PUNC">/</span><span class="NUMB">2</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'> 55</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">force</span><span class="PUNC">(</span><span class="STRN">"yscale"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">d3.forceY</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">.</span><span class="NAME">strength</span><span class="PUNC">(</span><span class="NUMB">1</span><span class="PUNC">)</span><span class="PUNC">.</span><span class="NAME">y</span><span class="PUNC">(</span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">d</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">yscale</span><span class="PUNC">(</span><span class="NAME">d.group</span><span class="PUNC">)</span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'> 56</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">on</span><span class="PUNC">(</span><span class="STRN">"tick"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">tickHandler</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'> 57</span>
+<span class='line'> 58</span> </span><span class="COMM">/**
+<span class='line'> 59</span> * creates group element
+<span class='line'> 60</span> */</span><span class="WHIT">
+<span class='line'> 61</span> </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">g</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">svg.append</span><span class="PUNC">(</span><span class="STRN">"g"</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'> 62</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">attr</span><span class="PUNC">(</span><span class="STRN">"class"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">"everything"</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'> 63</span>
+<span class='line'> 64</span> </span><span class="COMM">/**
+<span class='line'> 65</span> * loads JSON data and calls the update function
+<span class='line'> 66</span> */</span><span class="WHIT">
+<span class='line'> 67</span> </span><span class="NAME">d3.json</span><span class="PUNC">(</span><span class="STRN">"json_text.json"</span><span class="PUNC">)</span><span class="PUNC">.</span><span class="NAME">then</span><span class="PUNC">(</span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">graph</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
+<span class='line'> 68</span> </span><span class="WHIT"> </span><span class="NAME">update</span><span class="PUNC">(</span><span class="NAME">graph.links</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">graph.nodes</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'> 69</span> </span><span class="PUNC">}</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'> 70</span>
+<span class='line'> 71</span> </span><span class="COMM">/**
+<span class='line'> 72</span> * calls update functions for links and nodes
+<span class='line'> 73</span> * adds the nodes and links to the simulation
+<span class='line'> 74</span> * @param {object} nodes - nodes
+<span class='line'> 75</span> * @param {object} links - links
+<span class='line'> 76</span> */</span><span class="WHIT">
+<span class='line'> 77</span> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="NAME">update</span><span class="PUNC">(</span><span class="NAME">links</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">nodes</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
+<span class='line'> 78</span> </span><span class="WHIT"> </span><span class="NAME">updateLinks</span><span class="PUNC">(</span><span class="NAME">links</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'> 79</span> </span><span class="WHIT"> </span><span class="NAME">updateNodes</span><span class="PUNC">(</span><span class="NAME">nodes</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'> 80</span>
+<span class='line'> 81</span> </span><span class="WHIT"> </span><span class="NAME">simulation</span><span class="WHIT">
+<span class='line'> 82</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">nodes</span><span class="PUNC">(</span><span class="NAME">nodes</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'> 83</span> </span><span class="WHIT"> </span><span class="NAME">simulation.force</span><span class="PUNC">(</span><span class="STRN">"link"</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'> 84</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">links</span><span class="PUNC">(</span><span class="NAME">links</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'> 85</span> </span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'> 86</span>
+<span class='line'> 87</span> </span><span class="COMM">/**
+<span class='line'> 88</span> * initializes and shows links
+<span class='line'> 89</span> * @param {object} links - links
+<span class='line'> 90</span> */</span><span class="WHIT">
+<span class='line'> 91</span> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="NAME">updateLinks</span><span class="PUNC">(</span><span class="NAME">links</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
+<span class='line'> 92</span> </span><span class="WHIT"> </span><span class="NAME">link</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">g.append</span><span class="PUNC">(</span><span class="STRN">"g"</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'> 93</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">selectAll</span><span class="PUNC">(</span><span class="STRN">".link"</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'> 94</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">data</span><span class="PUNC">(</span><span class="NAME">links</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'> 95</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">enter</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'> 96</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">append</span><span class="PUNC">(</span><span class="STRN">"line"</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'> 97</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">style</span><span class="PUNC">(</span><span class="STRN">"stroke-width"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">"1px"</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'> 98</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">style</span><span class="PUNC">(</span><span class="STRN">"stroke"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">"#999"</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'> 99</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">attr</span><span class="PUNC">(</span><span class="STRN">'marker-end'</span><span class="PUNC">,</span><span class="NAME">marker</span><span class="PUNC">(</span><span class="STRN">"#999"</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>100</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">attr</span><span class="PUNC">(</span><span class="STRN">"class"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">"link"</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>101</span> </span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>102</span>
+<span class='line'>103</span> </span><span class="COMM">/**
+<span class='line'>104</span> * initializes and shows nodes with circles and texts
+<span class='line'>105</span> * creates a new drag behavior and applies it to the circles
+<span class='line'>106</span> * creates a click functionality of the circles and texts
+<span class='line'>107</span> * @param {object} nodes - nodes
+<span class='line'>108</span> */</span><span class="WHIT">
+<span class='line'>109</span> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="NAME">updateNodes</span><span class="PUNC">(</span><span class="NAME">nodes</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
+<span class='line'>110</span> </span><span class="WHIT"> </span><span class="NAME">node</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">g.selectAll</span><span class="PUNC">(</span><span class="STRN">".node"</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>111</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">data</span><span class="PUNC">(</span><span class="NAME">nodes</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>112</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">enter</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>113</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">append</span><span class="PUNC">(</span><span class="STRN">"g"</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>114</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">attr</span><span class="PUNC">(</span><span class="STRN">"class"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">"node"</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>115</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">attr</span><span class="PUNC">(</span><span class="STRN">"initial_x"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">d</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">d.dx</span><span class="PUNC">;</span><span class="PUNC">}</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>116</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">attr</span><span class="PUNC">(</span><span class="STRN">"initial_y"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">d</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">d.dy</span><span class="PUNC">;</span><span class="PUNC">}</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>117</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">call</span><span class="PUNC">(</span><span class="NAME">d3.drag</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>118</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">on</span><span class="PUNC">(</span><span class="STRN">"start"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">dragstarted</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>119</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">on</span><span class="PUNC">(</span><span class="STRN">"drag"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">dragged</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>120</span> </span><span class="WHIT"> </span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>121</span>
-<span class='line'>122</span> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="NAME">marklink</span><span class="PUNC">(</span><span class="NAME">node</span><span class="PUNC">)</span><span class="PUNC">{</span><span class="WHIT">
-<span class='line'>123</span> </span><span class="NAME">d3.selectAll</span><span class="PUNC">(</span><span class="STRN">".link"</span><span class="PUNC">)</span><span class="WHIT">
-<span class='line'>124</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">style</span><span class="PUNC">(</span><span class="STRN">"stroke"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">o</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
-<span class='line'>125</span> </span><span class="WHIT"> </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">isLinkForNode</span><span class="PUNC">(</span><span class="NAME">node</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">o</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT"> </span><span class="STRN">"black"</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="STRN">"#999"</span><span class="PUNC">;</span><span class="PUNC">}</span><span class="PUNC">)</span><span class="WHIT">
-<span class='line'>126</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">attr</span><span class="PUNC">(</span><span class="STRN">'marker-end'</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">o</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
-<span class='line'>127</span> </span><span class="WHIT"> </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">isLinkForNode</span><span class="PUNC">(</span><span class="NAME">node</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">o</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT"> </span><span class="NAME">marker</span><span class="PUNC">(</span><span class="STRN">'#000000'</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">marker</span><span class="PUNC">(</span><span class="STRN">'#999'</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="PUNC">}</span><span class="PUNC">)</span><span class="WHIT">
-<span class='line'>128</span> </span><span class="PUNC">}</span><span class="WHIT">
-<span class='line'>129</span>
-<span class='line'>130</span> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="NAME">marker</span><span class="PUNC">(</span><span class="NAME">color</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
-<span class='line'>131</span> </span><span class="NAME">svg.append</span><span class="PUNC">(</span><span class="STRN">'defs'</span><span class="PUNC">)</span><span class="PUNC">.</span><span class="NAME">append</span><span class="PUNC">(</span><span class="STRN">'marker'</span><span class="PUNC">)</span><span class="COMM">//arrowhead</span><span class="WHIT">
-<span class='line'>132</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">attr</span><span class="PUNC">(</span><span class="STRN">'id'</span><span class="PUNC">,</span><span class="NAME">color.replace</span><span class="PUNC">(</span><span class="STRN">"#"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">""</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="WHIT">
-<span class='line'>133</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">attr</span><span class="PUNC">(</span><span class="STRN">'viewBox'</span><span class="PUNC">,</span><span class="STRN">'-0 -5 10 10'</span><span class="PUNC">)</span><span class="WHIT">
-<span class='line'>134</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">attr</span><span class="PUNC">(</span><span class="STRN">'refX'</span><span class="PUNC">,</span><span class="NAME">r</span><span class="PUNC">+</span><span class="NUMB">10</span><span class="PUNC">)</span><span class="WHIT">
-<span class='line'>135</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">attr</span><span class="PUNC">(</span><span class="STRN">'refY'</span><span class="PUNC">,</span><span class="NUMB">0</span><span class="PUNC">)</span><span class="WHIT">
-<span class='line'>136</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">attr</span><span class="PUNC">(</span><span class="STRN">'orient'</span><span class="PUNC">,</span><span class="STRN">'auto'</span><span class="PUNC">)</span><span class="WHIT">
-<span class='line'>137</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">attr</span><span class="PUNC">(</span><span class="STRN">'markerWidth'</span><span class="PUNC">,</span><span class="NUMB">10</span><span class="PUNC">)</span><span class="WHIT">
-<span class='line'>138</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">attr</span><span class="PUNC">(</span><span class="STRN">'markerHeight'</span><span class="PUNC">,</span><span class="NUMB">15</span><span class="PUNC">)</span><span class="WHIT">
-<span class='line'>139</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">attr</span><span class="PUNC">(</span><span class="STRN">'xoverflow'</span><span class="PUNC">,</span><span class="STRN">'visible'</span><span class="PUNC">)</span><span class="WHIT">
-<span class='line'>140</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">append</span><span class="PUNC">(</span><span class="STRN">'svg:path'</span><span class="PUNC">)</span><span class="WHIT">
-<span class='line'>141</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">attr</span><span class="PUNC">(</span><span class="STRN">'d'</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">'M 0,-5 L 10 ,0 L 0,5'</span><span class="PUNC">)</span><span class="WHIT">
-<span class='line'>142</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">attr</span><span class="PUNC">(</span><span class="STRN">'fill'</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">color</span><span class="PUNC">)</span><span class="COMM">//arrowhead color</span><span class="WHIT">
-<span class='line'>143</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">style</span><span class="PUNC">(</span><span class="STRN">'stroke'</span><span class="PUNC">,</span><span class="STRN">'none'</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
-<span class='line'>144</span> </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="STRN">"url("</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">color</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">")"</span><span class="PUNC">;</span><span class="WHIT">
-<span class='line'>145</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
-<span class='line'>146</span>
-<span class='line'>147</span> </span><span class="COMM">/**
-<span class='line'>148</span> * returns last name of first author
-<span class='line'>149</span> * @param {string} authors - The comma-separated string of authors
-<span class='line'>150</span> */</span><span class="WHIT">
-<span class='line'>151</span> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="NAME">firstauthor</span><span class="PUNC">(</span><span class="NAME">authors</span><span class="PUNC">)</span><span class="PUNC">{</span><span class="WHIT">
-<span class='line'>152</span> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="REGX">/,/</span><span class="PUNC">.</span><span class="NAME">test</span><span class="PUNC">(</span><span class="NAME">authors</span><span class="PUNC">)</span><span class="PUNC">==</span><span class="KEYW">false</span><span class="PUNC">)</span><span class="PUNC">{</span><span class="WHIT">
-<span class='line'>153</span> </span><span class="WHIT"> </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">firstauthor</span><span class="PUNC">=</span><span class="REGX">/^.*\s+([\w\-]+)[\.\s]*$/</span><span class="PUNC">.</span><span class="NAME">exec</span><span class="PUNC">(</span><span class="NAME">authors</span><span class="PUNC">)</span><span class="WHIT">
-<span class='line'>154</span> </span><span class="PUNC">}</span><span class="WHIT">
-<span class='line'>155</span> </span><span class="KEYW">else</span><span class="PUNC">{</span><span class="WHIT">
-<span class='line'>156</span> </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">firstauthor</span><span class="PUNC">=</span><span class="REGX">/^[\s\w\.\-]*\s([\w\-]+)[\.\s]*,.*$/</span><span class="PUNC">.</span><span class="NAME">exec</span><span class="PUNC">(</span><span class="NAME">authors</span><span class="PUNC">)</span><span class="WHIT">
-<span class='line'>157</span> </span><span class="PUNC">}</span><span class="WHIT">
-<span class='line'>158</span> </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">firstauthor</span><span class="PUNC">[</span><span class="NUMB">1</span><span class="PUNC">]</span><span class="WHIT">
+<span class='line'>122</span> </span><span class="WHIT"> </span><span class="NAME">node.append</span><span class="PUNC">(</span><span class="STRN">"circle"</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>123</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">attr</span><span class="PUNC">(</span><span class="STRN">"class"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">"circle"</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>124</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">attr</span><span class="PUNC">(</span><span class="STRN">"r"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">r</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>125</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">style</span><span class="PUNC">(</span><span class="STRN">"fill"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">d</span><span class="PUNC">)</span><span class="PUNC">{</span><span class="WHIT"> </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">color</span><span class="PUNC">(</span><span class="NAME">d.group</span><span class="PUNC">)</span><span class="PUNC">}</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>126</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">on</span><span class="PUNC">(</span><span class="STRN">'click'</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">clickNode</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>127</span>
+<span class='line'>128</span> </span><span class="WHIT"> </span><span class="NAME">node.append</span><span class="PUNC">(</span><span class="STRN">"text"</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>129</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">attr</span><span class="PUNC">(</span><span class="STRN">"class"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">"text"</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>130</span> </span><span class="PUNC">.</span><span class="NAME">style</span><span class="PUNC">(</span><span class="STRN">"font-size"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">"15px"</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>131</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">style</span><span class="PUNC">(</span><span class="STRN">'pointer-events'</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">'auto'</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>132</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">text</span><span class="PUNC">(</span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">d</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">firstauthor</span><span class="PUNC">(</span><span class="NAME">d.author</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="PUNC">}</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>133</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">on</span><span class="PUNC">(</span><span class="STRN">'click'</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">clickNode</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>134</span> </span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>135</span>
+<span class='line'>136</span> </span><span class="COMM">/**
+<span class='line'>137</span> * colors the circle and its links black and removes the previous markings
+<span class='line'>138</span> * @param {object} node - node
+<span class='line'>139</span> */</span><span class="WHIT">
+<span class='line'>140</span> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="NAME">clickNode</span><span class="PUNC">(</span><span class="NAME">node</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
+<span class='line'>141</span> </span><span class="WHIT"> </span><span class="KEYW">if</span><span class="PUNC">(</span><span class="NAME">toRemove</span><span class="PUNC">)</span><span class="PUNC">{</span><span class="WHIT">
+<span class='line'>142</span> </span><span class="WHIT"> </span><span class="NAME">d3.select</span><span class="PUNC">(</span><span class="NAME">toRemove</span><span class="PUNC">)</span><span class="PUNC">.</span><span class="NAME">selectAll</span><span class="PUNC">(</span><span class="STRN">".circle"</span><span class="PUNC">)</span><span class="PUNC">.</span><span class="NAME">style</span><span class="PUNC">(</span><span class="STRN">"stroke"</span><span class="PUNC">,</span><span class="STRN">"none"</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>143</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>144</span> </span><span class="WHIT"> </span><span class="NAME">toRemove</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.parentNode</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>145</span> </span><span class="WHIT"> </span><span class="NAME">d3.select</span><span class="PUNC">(</span><span class="NAME">this.parentNode</span><span class="PUNC">)</span><span class="PUNC">.</span><span class="NAME">selectAll</span><span class="PUNC">(</span><span class="STRN">".circle"</span><span class="PUNC">)</span><span class="PUNC">.</span><span class="NAME">style</span><span class="PUNC">(</span><span class="STRN">"stroke"</span><span class="PUNC">,</span><span class="STRN">"black"</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>146</span> </span><span class="WHIT"> </span><span class="NAME">marklink</span><span class="PUNC">(</span><span class="NAME">node</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>147</span> </span><span class="WHIT"> </span><span class="NAME">textfunc</span><span class="PUNC">(</span><span class="NAME">node</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>148</span> </span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>149</span>
+<span class='line'>150</span> </span><span class="COMM">/**
+<span class='line'>151</span> * removes the markings of the circles and their links
+<span class='line'>152</span> */</span><span class="WHIT">
+<span class='line'>153</span> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="NAME">clickRect</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
+<span class='line'>154</span> </span><span class="WHIT"> </span><span class="NAME">d3.selectAll</span><span class="PUNC">(</span><span class="STRN">".circle"</span><span class="PUNC">)</span><span class="PUNC">.</span><span class="NAME">style</span><span class="PUNC">(</span><span class="STRN">"stroke"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">"none"</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>155</span> </span><span class="WHIT"> </span><span class="NAME">d3.selectAll</span><span class="PUNC">(</span><span class="STRN">".link"</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>156</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">style</span><span class="PUNC">(</span><span class="STRN">"stroke"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">"#999"</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>157</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">attr</span><span class="PUNC">(</span><span class="STRN">'marker-end'</span><span class="PUNC">,</span><span class="NAME">marker</span><span class="PUNC">(</span><span class="STRN">'#999'</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>158</span> </span><span class="WHIT"> </span><span class="NAME">document.getElementById</span><span class="PUNC">(</span><span class="STRN">'textbox'</span><span class="PUNC">)</span><span class="PUNC">.</span><span class="NAME">innerHTML</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"Click node"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>159</span> </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>160</span>
-<span class='line'>161</span> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="NAME">textfunc</span><span class="PUNC">(</span><span class="NAME">d</span><span class="PUNC">)</span><span class="PUNC">{</span><span class="WHIT">
-<span class='line'>162</span> </span><span class="NAME">document.getElementById</span><span class="PUNC">(</span><span class="STRN">'textbox'</span><span class="PUNC">)</span><span class="PUNC">.</span><span class="NAME">innerHTML</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"Title:"</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">'</br>'</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">d.name</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT">
-<span class='line'>163</span> </span><span class="STRN">'</br>'</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="STRN">'</br>'</span><span class="PUNC">+</span><span class="STRN">"Author:"</span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">'</br>'</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="NAME">d.author</span><span class="PUNC">+</span><span class="STRN">'</br>'</span><span class="PUNC">+</span><span class="STRN">'</br>'</span><span class="PUNC">+</span><span class="STRN">"Year:"</span><span class="PUNC">+</span><span class="STRN">'</br>'</span><span class="PUNC">+</span><span class="NAME">d.year</span><span class="PUNC">+</span><span class="STRN">'</br>'</span><span class="PUNC">+</span><span class="STRN">'</br>'</span><span class="WHIT">
-<span class='line'>164</span> </span><span class="PUNC">+</span><span class="STRN">"doi:"</span><span class="PUNC">+</span><span class="STRN">'</br>'</span><span class="PUNC">+</span><span class="NAME">d.doi</span><span class="PUNC">;</span><span class="WHIT">
-<span class='line'>165</span> </span><span class="PUNC">}</span><span class="WHIT">
-<span class='line'>166</span>
-<span class='line'>167</span> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="NAME">ticked</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
-<span class='line'>168</span> </span><span class="NAME">link.attr</span><span class="PUNC">(</span><span class="STRN">"x1"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">d</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">d.source.x</span><span class="PUNC">;</span><span class="PUNC">}</span><span class="PUNC">)</span><span class="WHIT">
-<span class='line'>169</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">attr</span><span class="PUNC">(</span><span class="STRN">"y1"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">d</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">d.source.y</span><span class="PUNC">;</span><span class="PUNC">}</span><span class="PUNC">)</span><span class="WHIT">
-<span class='line'>170</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">attr</span><span class="PUNC">(</span><span class="STRN">"x2"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">d</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">d.target.x</span><span class="PUNC">;</span><span class="PUNC">}</span><span class="PUNC">)</span><span class="WHIT">
-<span class='line'>171</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">attr</span><span class="PUNC">(</span><span class="STRN">"y2"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">d</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">d.target.y</span><span class="PUNC">;</span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
-<span class='line'>172</span> </span><span class="NAME">node.attr</span><span class="PUNC">(</span><span class="STRN">"transform"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">d</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="KEYW">return</span><span class="WHIT"> </span><span class="STRN">"translate("</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">d.x</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">", "</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">d.y</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">")"</span><span class="PUNC">;</span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
-<span class='line'>173</span> </span><span class="PUNC">}</span><span class="WHIT">
-<span class='line'>174</span>
-<span class='line'>175</span> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="NAME">dragstarted</span><span class="PUNC">(</span><span class="NAME">d</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
-<span class='line'>176</span> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">d3.event.active</span><span class="PUNC">)</span><span class="WHIT">
-<span class='line'>177</span> </span><span class="NAME">simulation.alphaTarget</span><span class="PUNC">(</span><span class="NUMB">0.3</span><span class="PUNC">)</span><span class="PUNC">.</span><span class="NAME">restart</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT">
-<span class='line'>178</span> </span><span class="NAME">d.fx</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">d.x</span><span class="PUNC">;</span><span class="WHIT">
-<span class='line'>179</span> </span><span class="NAME">d.fy</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">d.y</span><span class="PUNC">;</span><span class="WHIT">
-<span class='line'>180</span> </span><span class="PUNC">}</span><span class="WHIT">
-<span class='line'>181</span>
-<span class='line'>182</span> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="NAME">dragged</span><span class="PUNC">(</span><span class="NAME">d</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
-<span class='line'>183</span> </span><span class="NAME">d.fx</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">d3.event.x</span><span class="PUNC">;</span><span class="WHIT">
-<span class='line'>184</span> </span><span class="NAME">d.fy</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">d3.event.y</span><span class="PUNC">;</span><span class="WHIT">
-<span class='line'>185</span> </span><span class="PUNC">}</span><span class="WHIT">
-<span class='line'>186</span>
-<span class='line'>187</span> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="NAME">resetGraph</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">{</span><span class="WHIT">
-<span class='line'>188</span> </span><span class="NAME">d3.selectAll</span><span class="PUNC">(</span><span class="STRN">".node"</span><span class="PUNC">)</span><span class="PUNC">.</span><span class="NAME">each</span><span class="PUNC">(</span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">d</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
-<span class='line'>189</span> </span><span class="WHIT"> </span><span class="NAME">d.fx</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">d.initial_x</span><span class="PUNC">;</span><span class="WHIT">
-<span class='line'>190</span> </span><span class="WHIT"> </span><span class="NAME">d.fy</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">d.initial_y</span><span class="PUNC">;</span><span class="WHIT">
-<span class='line'>191</span> </span><span class="PUNC">}</span><span class="PUNC">)</span><span class="WHIT">
-<span class='line'>192</span> </span><span class="PUNC">}</span><span class="WHIT">
-<span class='line'>193</span>
-<span class='line'>194</span> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="NAME">zoom</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">{</span><span class="WHIT">
-<span class='line'>195</span> </span><span class="NAME">d3.select</span><span class="PUNC">(</span><span class="STRN">'g'</span><span class="PUNC">)</span><span class="PUNC">.</span><span class="NAME">attr</span><span class="PUNC">(</span><span class="STRN">"transform"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">d3.event.transform</span><span class="PUNC">)</span><span class="WHIT">
-<span class='line'>196</span> </span><span class="PUNC">}</span><span class="WHIT">
-<span class='line'>197</span>
-<span class='line'>198</span> </span><span class="COMM">/**
-<span class='line'>199</span> * sets the
-<span class='line'>200</span> */</span><span class="WHIT">
-<span class='line'>201</span> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="NAME">resetZoom</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
-<span class='line'>202</span> </span><span class="NAME">d3.select</span><span class="PUNC">(</span><span class="STRN">'svg'</span><span class="PUNC">)</span><span class="WHIT">
-<span class='line'>203</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">call</span><span class="PUNC">(</span><span class="NAME">zoom.scaleTo</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NUMB">1</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
-<span class='line'>204</span> </span><span class="PUNC">}</span><span class="WHIT">
-<span class='line'>205</span>
-<span class='line'>206</span> </span><span class="COMM">/**
-<span class='line'>207</span> * sets the transform such that svg is centered
-<span class='line'>208</span> */</span><span class="WHIT">
-<span class='line'>209</span> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="NAME">center</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
-<span class='line'>210</span> </span><span class="NAME">d3.select</span><span class="PUNC">(</span><span class="STRN">'svg'</span><span class="PUNC">)</span><span class="WHIT">
-<span class='line'>211</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">call</span><span class="PUNC">(</span><span class="NAME">zoom.translateTo</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NUMB">0.5</span><span class="WHIT"> </span><span class="PUNC">*</span><span class="WHIT"> </span><span class="NAME">width</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NUMB">0.5</span><span class="WHIT"> </span><span class="PUNC">*</span><span class="WHIT"> </span><span class="NAME">height</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
-<span class='line'>212</span> </span><span class="PUNC">}</span></pre></body></html>
\ No newline at end of file
+<span class='line'>161</span> </span><span class="COMM">/**
+<span class='line'>162</span> * sets color of link (line and arrowhead) to black if it is directly connected to node
+<span class='line'>163</span> * and to grey otherwise
+<span class='line'>164</span> * @param {object} node - node
+<span class='line'>165</span> */</span><span class="WHIT">
+<span class='line'>166</span> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="NAME">marklink</span><span class="PUNC">(</span><span class="NAME">node</span><span class="PUNC">)</span><span class="PUNC">{</span><span class="WHIT">
+<span class='line'>167</span> </span><span class="WHIT"> </span><span class="NAME">d3.selectAll</span><span class="PUNC">(</span><span class="STRN">".link"</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>168</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">style</span><span class="PUNC">(</span><span class="STRN">"stroke"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">o</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
+<span class='line'>169</span> </span><span class="WHIT"> </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">isLinkForNode</span><span class="PUNC">(</span><span class="NAME">node</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">o</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT"> </span><span class="STRN">"black"</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="STRN">"#999"</span><span class="PUNC">;</span><span class="PUNC">}</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>170</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">attr</span><span class="PUNC">(</span><span class="STRN">'marker-end'</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">o</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
+<span class='line'>171</span> </span><span class="WHIT"> </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">isLinkForNode</span><span class="PUNC">(</span><span class="NAME">node</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">o</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT"> </span><span class="NAME">marker</span><span class="PUNC">(</span><span class="STRN">'#000000'</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">marker</span><span class="PUNC">(</span><span class="STRN">'#999'</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="PUNC">}</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>172</span> </span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>173</span>
+<span class='line'>174</span> </span><span class="COMM">/**
+<span class='line'>175</span> * returns true if link is directly connected to node and false if it is not
+<span class='line'>176</span> * @param {object} node - node
+<span class='line'>177</span> * @param {object} link - link
+<span class='line'>178</span> */</span><span class="WHIT">
+<span class='line'>179</span> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="NAME">isLinkForNode</span><span class="PUNC">(</span><span class="NAME">node</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">link</span><span class="PUNC">)</span><span class="PUNC">{</span><span class="WHIT">
+<span class='line'>180</span> </span><span class="WHIT"> </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">link.source.index</span><span class="WHIT"> </span><span class="PUNC">==</span><span class="WHIT"> </span><span class="NAME">node.index</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="NAME">link.target.index</span><span class="WHIT"> </span><span class="PUNC">==</span><span class="WHIT"> </span><span class="NAME">node.index</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>181</span> </span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>182</span>
+<span class='line'>183</span> </span><span class="COMM">/**
+<span class='line'>184</span> * creates arrowhead and returns its url
+<span class='line'>185</span> * @param {string} color - color of arrowhead
+<span class='line'>186</span> */</span><span class="WHIT">
+<span class='line'>187</span> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="NAME">marker</span><span class="PUNC">(</span><span class="NAME">color</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
+<span class='line'>188</span> </span><span class="WHIT"> </span><span class="NAME">svg.append</span><span class="PUNC">(</span><span class="STRN">'defs'</span><span class="PUNC">)</span><span class="PUNC">.</span><span class="NAME">append</span><span class="PUNC">(</span><span class="STRN">'marker'</span><span class="PUNC">)</span><span class="COMM">//arrowhead</span><span class="WHIT">
+<span class='line'>189</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">attr</span><span class="PUNC">(</span><span class="STRN">'id'</span><span class="PUNC">,</span><span class="NAME">color.replace</span><span class="PUNC">(</span><span class="STRN">"#"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">""</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>190</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">attr</span><span class="PUNC">(</span><span class="STRN">'viewBox'</span><span class="PUNC">,</span><span class="STRN">'-0 -5 10 10'</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>191</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">attr</span><span class="PUNC">(</span><span class="STRN">'refX'</span><span class="PUNC">,</span><span class="NAME">r</span><span class="PUNC">+</span><span class="NUMB">10</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>192</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">attr</span><span class="PUNC">(</span><span class="STRN">'refY'</span><span class="PUNC">,</span><span class="NUMB">0</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>193</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">attr</span><span class="PUNC">(</span><span class="STRN">'orient'</span><span class="PUNC">,</span><span class="STRN">'auto'</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>194</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">attr</span><span class="PUNC">(</span><span class="STRN">'markerWidth'</span><span class="PUNC">,</span><span class="NUMB">10</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>195</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">attr</span><span class="PUNC">(</span><span class="STRN">'markerHeight'</span><span class="PUNC">,</span><span class="NUMB">15</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>196</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">attr</span><span class="PUNC">(</span><span class="STRN">'xoverflow'</span><span class="PUNC">,</span><span class="STRN">'visible'</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>197</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">append</span><span class="PUNC">(</span><span class="STRN">'svg:path'</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>198</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">attr</span><span class="PUNC">(</span><span class="STRN">'d'</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">'M 0,-5 L 10 ,0 L 0,5'</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>199</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">attr</span><span class="PUNC">(</span><span class="STRN">'fill'</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">color</span><span class="PUNC">)</span><span class="COMM">//arrowhead color</span><span class="WHIT">
+<span class='line'>200</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">style</span><span class="PUNC">(</span><span class="STRN">'stroke'</span><span class="PUNC">,</span><span class="STRN">'none'</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>201</span> </span><span class="WHIT"> </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="STRN">"url("</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">color</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">")"</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>202</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>203</span>
+<span class='line'>204</span> </span><span class="COMM">/**
+<span class='line'>205</span> * returns last name of first author
+<span class='line'>206</span> * @param {string} authors - the comma-separated string of authors
+<span class='line'>207</span> */</span><span class="WHIT">
+<span class='line'>208</span> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="NAME">firstauthor</span><span class="PUNC">(</span><span class="NAME">authors</span><span class="PUNC">)</span><span class="PUNC">{</span><span class="WHIT">
+<span class='line'>209</span> </span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="REGX">/,/</span><span class="PUNC">.</span><span class="NAME">test</span><span class="PUNC">(</span><span class="NAME">authors</span><span class="PUNC">)</span><span class="PUNC">==</span><span class="KEYW">false</span><span class="PUNC">)</span><span class="PUNC">{</span><span class="WHIT">
+<span class='line'>210</span> </span><span class="WHIT"> </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">firstauthor</span><span class="PUNC">=</span><span class="REGX">/^.*\s+([\w\-]+)[\.\s]*$/</span><span class="PUNC">.</span><span class="NAME">exec</span><span class="PUNC">(</span><span class="NAME">authors</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>211</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>212</span> </span><span class="WHIT"> </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
+<span class='line'>213</span> </span><span class="WHIT"> </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">firstauthor</span><span class="PUNC">=</span><span class="REGX">/^[\s\w\.\-]*\s([\w\-]+)[\.\s]*,.*$/</span><span class="PUNC">.</span><span class="NAME">exec</span><span class="PUNC">(</span><span class="NAME">authors</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>214</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>215</span> </span><span class="WHIT"> </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">firstauthor</span><span class="PUNC">[</span><span class="NUMB">1</span><span class="PUNC">]</span><span class="WHIT">
+<span class='line'>216</span> </span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>217</span>
+<span class='line'>218</span> </span><span class="COMM">/**
+<span class='line'>219</span> * outputs node info to textbox
+<span class='line'>220</span> * @param {object} node - data of current node
+<span class='line'>221</span> */</span><span class="WHIT">
+<span class='line'>222</span> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="NAME">textfunc</span><span class="PUNC">(</span><span class="NAME">node</span><span class="PUNC">)</span><span class="PUNC">{</span><span class="WHIT">
+<span class='line'>223</span> </span><span class="WHIT"> </span><span class="NAME">document.getElementById</span><span class="PUNC">(</span><span class="STRN">'textbox'</span><span class="PUNC">)</span><span class="PUNC">.</span><span class="NAME">innerHTML</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"Title:"</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">'</br>'</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">node.name</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT">
+<span class='line'>224</span> </span><span class="WHIT"> </span><span class="STRN">'</br>'</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="STRN">'</br>'</span><span class="PUNC">+</span><span class="STRN">"Author:"</span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">'</br>'</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="NAME">node.author</span><span class="PUNC">+</span><span class="STRN">'</br>'</span><span class="PUNC">+</span><span class="STRN">'</br>'</span><span class="PUNC">+</span><span class="STRN">"Year:"</span><span class="PUNC">+</span><span class="STRN">'</br>'</span><span class="WHIT">
+<span class='line'>225</span> </span><span class="WHIT"> </span><span class="PUNC">+</span><span class="NAME">node.year</span><span class="PUNC">+</span><span class="STRN">'</br>'</span><span class="PUNC">+</span><span class="STRN">'</br>'</span><span class="PUNC">+</span><span class="STRN">"doi:"</span><span class="PUNC">+</span><span class="STRN">'</br>'</span><span class="PUNC">+</span><span class="NAME">node.doi</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>226</span> </span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>227</span>
+<span class='line'>228</span> </span><span class="COMM">/**
+<span class='line'>229</span> * updates the positions of the links and nodes
+<span class='line'>230</span> */</span><span class="WHIT">
+<span class='line'>231</span> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="NAME">tickHandler</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
+<span class='line'>232</span> </span><span class="WHIT"> </span><span class="NAME">link.attr</span><span class="PUNC">(</span><span class="STRN">"x1"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">d</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">d.source.x</span><span class="PUNC">;</span><span class="PUNC">}</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>233</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">attr</span><span class="PUNC">(</span><span class="STRN">"y1"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">d</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">d.source.y</span><span class="PUNC">;</span><span class="PUNC">}</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>234</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">attr</span><span class="PUNC">(</span><span class="STRN">"x2"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">d</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">d.target.x</span><span class="PUNC">;</span><span class="PUNC">}</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>235</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">attr</span><span class="PUNC">(</span><span class="STRN">"y2"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">d</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">d.target.y</span><span class="PUNC">;</span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>236</span> </span><span class="WHIT"> </span><span class="NAME">node.attr</span><span class="PUNC">(</span><span class="STRN">"transform"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">d</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="KEYW">return</span><span class="WHIT"> </span><span class="STRN">"translate("</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">d.x</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">", "</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">d.y</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">")"</span><span class="PUNC">;</span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>237</span> </span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>238</span>
+<span class='line'>239</span> </span><span class="COMM">/**
+<span class='line'>240</span> * initializes the dragging of the node
+<span class='line'>241</span> * @param {object} node - data of current node
+<span class='line'>242</span> */</span><span class="WHIT">
+<span class='line'>243</span> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="NAME">dragstarted</span><span class="PUNC">(</span><span class="NAME">node</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
+<span class='line'>244</span> </span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">d3.event.active</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>245</span> </span><span class="NAME">simulation.alphaTarget</span><span class="PUNC">(</span><span class="NUMB">0.3</span><span class="PUNC">)</span><span class="PUNC">.</span><span class="NAME">restart</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>246</span> </span><span class="WHIT"> </span><span class="NAME">node.fx</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">node.x</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>247</span> </span><span class="WHIT"> </span><span class="NAME">node.fy</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">node.y</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>248</span> </span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>249</span>
+<span class='line'>250</span> </span><span class="COMM">/**
+<span class='line'>251</span> * applies the dragging to the node
+<span class='line'>252</span> * @param {object} node - data of current node
+<span class='line'>253</span> */</span><span class="WHIT">
+<span class='line'>254</span> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="NAME">dragged</span><span class="PUNC">(</span><span class="NAME">node</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
+<span class='line'>255</span> </span><span class="WHIT"> </span><span class="NAME">node.fx</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">d3.event.x</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>256</span> </span><span class="WHIT"> </span><span class="NAME">node.fy</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">d3.event.y</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>257</span> </span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>258</span>
+<span class='line'>259</span> </span><span class="COMM">/**
+<span class='line'>260</span> * resets the positions of the nodes
+<span class='line'>261</span> */</span><span class="WHIT">
+<span class='line'>262</span> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="NAME">resetGraph</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
+<span class='line'>263</span> </span><span class="WHIT"> </span><span class="NAME">d3.selectAll</span><span class="PUNC">(</span><span class="STRN">".node"</span><span class="PUNC">)</span><span class="PUNC">.</span><span class="NAME">each</span><span class="PUNC">(</span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">d</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
+<span class='line'>264</span> </span><span class="WHIT"> </span><span class="NAME">d.fx</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">d.initial_x</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>265</span> </span><span class="WHIT"> </span><span class="NAME">d.fy</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">d.initial_y</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>266</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>267</span> </span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>268</span>
+<span class='line'>269</span> </span><span class="COMM">/**
+<span class='line'>270</span> * applies the transformation (zooming or dragging) to the g element
+<span class='line'>271</span> */</span><span class="WHIT">
+<span class='line'>272</span> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="NAME">zoomHandler</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
+<span class='line'>273</span> </span><span class="WHIT"> </span><span class="NAME">d3.select</span><span class="PUNC">(</span><span class="STRN">'g'</span><span class="PUNC">)</span><span class="PUNC">.</span><span class="NAME">attr</span><span class="PUNC">(</span><span class="STRN">"transform"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">d3.event.transform</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>274</span> </span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>275</span>
+<span class='line'>276</span> </span><span class="COMM">/**
+<span class='line'>277</span> * transforms svg so that that the zoom is reset
+<span class='line'>278</span> */</span><span class="WHIT">
+<span class='line'>279</span> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="NAME">resetZoom</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
+<span class='line'>280</span> </span><span class="WHIT"> </span><span class="NAME">d3.select</span><span class="PUNC">(</span><span class="STRN">'svg'</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>281</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">call</span><span class="PUNC">(</span><span class="NAME">zoom.scaleTo</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NUMB">1</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>282</span> </span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>283</span>
+<span class='line'>284</span> </span><span class="COMM">/**
+<span class='line'>285</span> * transforms svg so that it is centered
+<span class='line'>286</span> */</span><span class="WHIT">
+<span class='line'>287</span> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="NAME">center</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
+<span class='line'>288</span> </span><span class="WHIT"> </span><span class="NAME">d3.select</span><span class="PUNC">(</span><span class="STRN">'svg'</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>289</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">call</span><span class="PUNC">(</span><span class="NAME">zoom.translateTo</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NUMB">0.5</span><span class="WHIT"> </span><span class="PUNC">*</span><span class="WHIT"> </span><span class="NAME">width</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NUMB">0.5</span><span class="WHIT"> </span><span class="PUNC">*</span><span class="WHIT"> </span><span class="NAME">height</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>290</span> </span><span class="PUNC">}</span></pre></body></html>
\ No newline at end of file
diff --git a/Output/cn.js b/Output/cn.js
index fc0d4f6..8392659 100644
--- a/Output/cn.js
+++ b/Output/cn.js
@@ -1,7 +1,20 @@
-var svg = d3.select("svg"),
-width = +svg.attr("width"),
-height = +svg.attr("height");
+/**
+* creates a new zoom behavior
+*/
+var zoom = d3.zoom().on("zoom", zoomHandler);
+
+/**
+* creates svg object and associated attributes
+* applies the zoom behavior to svg
+*/
+var svg = d3.select("svg")
+ .call(zoom),
+width = svg.attr("width"),
+height = svg.attr("height");
+/**
+* creates node object and associated attributes
+*/
var node,
r=12,
color = d3.scaleOrdinal()
@@ -12,10 +25,14 @@ yscale = d3.scaleOrdinal()
.range([0, 200, 400]),
toRemove;
+/**
+* creates link object
+*/
var link;
/**
-* create a background
+* creates a background
+* creates a click functionality of the background
*/
var rect = svg.append("rect")
.attr("x", 0)
@@ -23,46 +40,55 @@ var rect = svg.append("rect")
.attr("height", height)
.attr("width", width)
.style("fill", 'white')
- .on('click', function(d) {
- d3.selectAll(".circle").style("stroke", "none")
- d3.selectAll(".link")
- .style("stroke", "#999")
- .attr('marker-end',marker('#999'))
- document.getElementById('textbox').innerHTML = "Click node";
-});
+ .on('click', clickRect);
+/**
+* creates a new simulation
+* updates the positions of the links and nodes when the
+ state of the layout has changed (simulation has advanced by a tick)
+*/
var simulation = d3.forceSimulation()
.force("link", d3.forceLink().id(function(d) {return d.doi;}).distance(100).strength(1))
.force("collide", d3.forceCollide(50))
.force("charge", d3.forceManyBody().strength(-30))
.force("center", d3.forceCenter(width/2, height/2))
- .force("yscale", d3.forceY().strength(1).y(function(d) {return yscale(d.group)}));
-
-/**
-* create a new zoom behavior and apply it to svg
-*/
-var zoom = d3.zoom()
- .on("zoom", zoom);
-zoom(svg);
+ .force("yscale", d3.forceY().strength(1).y(function(d) {return yscale(d.group)}))
+ .on("tick", tickHandler);
/**
-* create group element
+* creates group element
*/
var g = svg.append("g")
.attr("class", "everything")
-//d3.json("data.json", function (error, graph) {
+/**
+* loads JSON data and calls the update function
+*/
d3.json("json_text.json").then(function(graph) {
update(graph.links, graph.nodes);
})
/**
-* display links and nodes (with circle and text)
-* initialises link, node objects
+* calls update functions for links and nodes
+* adds the nodes and links to the simulation
* @param {object} nodes - nodes
* @param {object} links - links
*/
function update(links, nodes) {
+ updateLinks(links);
+ updateNodes(nodes);
+
+ simulation
+ .nodes(nodes);
+ simulation.force("link")
+ .links(links);
+}
+
+/**
+* initializes and shows links
+* @param {object} links - links
+*/
+function updateLinks(links) {
link = g.append("g")
.selectAll(".link")
.data(links)
@@ -70,67 +96,66 @@ function update(links, nodes) {
.append("line")
.style("stroke-width", "1px")
.style("stroke", "#999")
- .attr("class", "link")
.attr('marker-end',marker("#999"))
+ .attr("class", "link");
+}
- node = g.append("g")
- .selectAll(".node")
+/**
+* initializes and shows nodes with circles and texts
+* creates a new drag behavior and applies it to the circles
+* creates a click functionality of the circles and texts
+* @param {object} nodes - nodes
+*/
+function updateNodes(nodes) {
+ node = g.selectAll(".node")
.data(nodes)
.enter()
.append("g")
.attr("class", "node")
+ .attr("initial_x", function(d) {return d.dx;})
+ .attr("initial_y", function(d) {return d.dy;})
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
- )
- .attr("initial_x", function(d) {return d.dx;})
- .attr("initial_y", function(d) {return d.dy;});
+ );
node.append("circle")
- .attr("r", r)
.attr("class", "circle")
+ .attr("r", r)
.style("fill", function(d){ return color(d.group)})
- .on('click', function (d) {
- if(toRemove){
- d3.select(toRemove).selectAll(".circle").style("stroke","none")
- }
- toRemove = this.parentNode;
- d3.select(this).style("stroke","black")
- marklink(d)
- textfunc(d)
- });
+ .on('click', clickNode);
node.append("text")
- .attr("class", "text") //über selectAll(".text") können objs mit der klasse ausgewählt werden
+ .attr("class", "text")
.style("font-size", "15px")
- .text(function (d) {return firstauthor(d.author);})
.style('pointer-events', 'auto')
- .on('click', function(d) {
- if(toRemove){
- d3.select(toRemove).selectAll(".circle").style("stroke","none");
- }
- toRemove = this.parentNode;
- d3.select(this.parentNode).selectAll(".circle").style("stroke","black")
-
- marklink(d)
- textfunc(d);
- });
-
-simulation
- .nodes(nodes)
- .on("tick", ticked);
-
-simulation.force("link")
- .links(links);
+ .text(function (d) {return firstauthor(d.author);})
+ .on('click', clickNode);
}
/**
-* returns true if link is directly connected to node and false if it is not
+* colors the circle and its links black and removes the previous markings
* @param {object} node - node
-* @param {object} link - link
*/
-function isLinkForNode(node, link){
-return link.source.index == node.index || link.target.index == node.index;
+function clickNode(node) {
+ if(toRemove){
+ d3.select(toRemove).selectAll(".circle").style("stroke","none")
+ }
+ toRemove = this.parentNode;
+ d3.select(this.parentNode).selectAll(".circle").style("stroke","black")
+ marklink(node)
+ textfunc(node)
+}
+
+/**
+* removes the markings of the circles and their links
+*/
+function clickRect() {
+ d3.selectAll(".circle").style("stroke", "none")
+ d3.selectAll(".link")
+ .style("stroke", "#999")
+ .attr('marker-end',marker('#999'))
+ document.getElementById('textbox').innerHTML = "Click node";
}
/**
@@ -146,6 +171,15 @@ function marklink(node){
return isLinkForNode(node, o) ? marker('#000000') : marker('#999');})
}
+/**
+* returns true if link is directly connected to node and false if it is not
+* @param {object} node - node
+* @param {object} link - link
+*/
+function isLinkForNode(node, link){
+ return link.source.index == node.index || link.target.index == node.index;
+}
+
/**
* creates arrowhead and returns its url
* @param {string} color - color of arrowhead
@@ -183,15 +217,18 @@ function firstauthor(authors){
/**
* outputs node info to textbox
-* @param {object} d - data of current node
+* @param {object} node - data of current node
*/
-function textfunc(d){
- document.getElementById('textbox').innerHTML = "Title:" + '</br>' + d.name +
- '</br>' +'</br>'+"Author:"+ '</br>' +d.author+'</br>'+'</br>'+"Year:"+'</br>'+d.year+'</br>'+'</br>'
- +"doi:"+'</br>'+d.doi;
+function textfunc(node){
+ document.getElementById('textbox').innerHTML = "Title:" + '</br>' + node.name +
+ '</br>' +'</br>'+"Author:"+ '</br>' +node.author+'</br>'+'</br>'+"Year:"+'</br>'
+ +node.year+'</br>'+'</br>'+"doi:"+'</br>'+node.doi;
}
-function ticked() {
+/**
+* updates the positions of the links and nodes
+*/
+function tickHandler() {
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;})
@@ -199,18 +236,29 @@ function ticked() {
node.attr("transform", function (d) {return "translate(" + d.x + ", " + d.y + ")";});
}
-function dragstarted(d) {
+/**
+* initializes the dragging of the node
+* @param {object} node - data of current node
+*/
+function dragstarted(node) {
if (!d3.event.active)
simulation.alphaTarget(0.3).restart()
- d.fx = d.x;
- d.fy = d.y;
+ node.fx = node.x;
+ node.fy = node.y;
}
-function dragged(d) {
- d.fx = d3.event.x;
- d.fy = d3.event.y;
+/**
+* applies the dragging to the node
+* @param {object} node - data of current node
+*/
+function dragged(node) {
+ node.fx = d3.event.x;
+ node.fy = d3.event.y;
}
+/**
+* resets the positions of the nodes
+*/
function resetGraph() {
d3.selectAll(".node").each(function(d) {
d.fx = d.initial_x;
@@ -218,12 +266,15 @@ function resetGraph() {
})
}
-function zoom() {
+/**
+* applies the transformation (zooming or dragging) to the g element
+*/
+function zoomHandler() {
d3.select('g').attr("transform", d3.event.transform);
}
/**
-* transforms svg such that the zoom is reset
+* transforms svg so that that the zoom is reset
*/
function resetZoom() {
d3.select('svg')
@@ -231,7 +282,7 @@ function resetZoom() {
}
/**
-* transforms svg such that it is centered
+* transforms svg so that it is centered
*/
function center() {
d3.select('svg')
diff --git a/data.json b/data.json
new file mode 100644
index 0000000..419abd7
--- /dev/null
+++ b/data.json
@@ -0,0 +1,23 @@
+{"nodes":[{"name":"StudieA","author":"MenschA","year":"JahrA","doi":"doiA","group":"input"},
+ {"name":"StudieB","author":"MenschB","year":"JahrB","doi":"doiB","group":"cited"},
+ {"name":"StudieC","author":"MenschC","year":"JahrC","doi":"doiC","group":"input"},
+ {"name":"StudieD","author":"MenschD","year":"JahrD","doi":"doiD","group":"cited"},
+ {"name":"StudieE","author":"MenschE","year":"JahrE","doi":"doiE","group":"cited"},
+ {"name":"StudieF","author":"MenschF","year":"JahrF","doi":"doiF","group":"cited"},
+ {"name":"StudieG","author":"MenschG","year":"JahrG","doi":"doiG","group":"citing"},
+ {"name":"StudieH","author":"MenschH","year":"JahrH","doi":"doiH","group":"cited"},
+ {"name":"StudieI","author":"MenschI","year":"JahrI","doi":"doiI","group":"citing"}],
+"links":[{"source":"doiA","target":"doiB"},
+ {"source":"doiA","target":"doiC"},
+ {"source":"doiC","target":"doiE"},
+ {"source":"doiD","target":"doiB"},
+ {"source":"doiC","target":"doiB"},
+ {"source":"doiA","target":"doiH"},
+ {"source":"doiA","target":"doiI"},
+ {"source":"doiI","target":"doiC"},
+ {"source":"doiH","target":"doiC"},
+ {"source":"doiG","target":"doiA"},
+ {"source":"doiH","target":"doiI"},
+ {"source":"doiE","target":"doiF"}
+
+ ]}
--
GitLab