diff --git a/Output/ToDo.txt b/Output/ToDo.txt
index 3b59953f11451e135cfe786cfccf5d95021c8748..86a1a2bc24d56bf825fc6125a6ca205754bd4d30 100644
--- a/Output/ToDo.txt
+++ b/Output/ToDo.txt
@@ -17,4 +17,8 @@ Noch offen:
- Informationsfenster an sehr lange Titel anpassen
- Ãœberlagerung von Graph und Informationsfenster verhindern
- Zurücksetzen der Markierungsfunktion
+- Skalierung an unterschiedliche Geräte anpassen
+- Schnittstelle zu Benutzeroberfläche (!)
+- Informationen zu Funktionen anzeigen (?)
- Speicherfunktion (?)
+- Suchfunktion
diff --git a/Output/bob/files.html b/Output/bob/files.html
new file mode 100644
index 0000000000000000000000000000000000000000..cfcdc0bba9dfff9662de308d07d6c8cafd9197c8
--- /dev/null
+++ b/Output/bob/files.html
@@ -0,0 +1,216 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+ <head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+
+ <title>JsDoc Reference - File Index</title>
+ <meta name="generator" content="JsDoc Toolkit" />
+
+ <style type="text/css">
+ /* default.css */
+body
+{
+ font: 12px "Lucida Grande", Tahoma, Arial, Helvetica, sans-serif;
+ width: 800px;
+}
+
+.header
+{
+ clear: both;
+ background-color: #ccc;
+ padding: 8px;
+}
+
+h1
+{
+ font-size: 150%;
+ font-weight: bold;
+ padding: 0;
+ margin: 1em 0 0 .3em;
+}
+
+hr
+{
+ border: none 0;
+ border-top: 1px solid #7F8FB1;
+ height: 1px;
+}
+
+pre.code
+{
+ display: block;
+ padding: 8px;
+ border: 1px dashed #ccc;
+}
+
+#index
+{
+ margin-top: 24px;
+ float: left;
+ width: 160px;
+ position: absolute;
+ left: 8px;
+ background-color: #F3F3F3;
+ padding: 8px;
+}
+
+#content
+{
+ margin-left: 190px;
+ width: 600px;
+}
+
+.classList
+{
+ list-style-type: none;
+ padding: 0;
+ margin: 0 0 0 8px;
+ font-family: arial, sans-serif;
+ font-size: 1em;
+ overflow: auto;
+}
+
+.classList li
+{
+ padding: 0;
+ margin: 0 0 8px 0;
+}
+
+.summaryTable { width: 100%; }
+
+h1.classTitle
+{
+ font-size:170%;
+ line-height:130%;
+}
+
+h2 { font-size: 110%; }
+caption, div.sectionTitle
+{
+ background-color: #7F8FB1;
+ color: #fff;
+ font-size:130%;
+ text-align: left;
+ padding: 2px 6px 2px 6px;
+ border: 1px #7F8FB1 solid;
+}
+
+div.sectionTitle { margin-bottom: 8px; }
+.summaryTable thead { display: none; }
+
+.summaryTable td
+{
+ vertical-align: top;
+ padding: 4px;
+ border-bottom: 1px #7F8FB1 solid;
+ border-right: 1px #7F8FB1 solid;
+}
+
+/*col#summaryAttributes {}*/
+.summaryTable td.attributes
+{
+ border-left: 1px #7F8FB1 solid;
+ width: 140px;
+ text-align: right;
+}
+
+td.attributes, .fixedFont
+{
+ line-height: 15px;
+ color: #002EBE;
+ font-family: "Courier New",Courier,monospace;
+ font-size: 13px;
+}
+
+.summaryTable td.nameDescription
+{
+ text-align: left;
+ font-size: 13px;
+ line-height: 15px;
+}
+
+.summaryTable td.nameDescription, .description
+{
+ line-height: 15px;
+ padding: 4px;
+ padding-left: 4px;
+}
+
+.summaryTable { margin-bottom: 8px; }
+
+ul.inheritsList
+{
+ list-style: square;
+ margin-left: 20px;
+ padding-left: 0;
+}
+
+.detailList {
+ margin-left: 20px;
+ line-height: 15px;
+}
+.detailList dt { margin-left: 20px; }
+
+.detailList .heading
+{
+ font-weight: bold;
+ padding-bottom: 6px;
+ margin-left: 0;
+}
+
+.light, td.attributes, .light a:link, .light a:visited
+{
+ color: #777;
+ font-style: italic;
+}
+
+.fineprint
+{
+ text-align: right;
+ font-size: 10px;
+}
+ </style>
+ </head>
+
+ <body>
+ <div id="header">
+</div>
+
+ <div id="index">
+ <div align="center"><a href="index.html">Class Index</a>
+| <a href="files.html">File Index</a></div>
+<hr />
+<h2>Classes</h2>
+<ul class="classList">
+
+ <li><i><a href="symbols/_global_.html">_global_</a></i></li>
+
+</ul>
+<hr />
+ </div>
+
+ <div id="content">
+ <h1 class="classTitle">File Index</h1>
+
+
+ <div>
+ <h2><a href="symbols/src/cn.js.html">cn.js</a></h2>
+
+ <dl>
+
+
+
+
+ </dl>
+ </div>
+ <hr />
+
+
+ </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 Fri Nov 19 2021 19:23:13 GMT+0100 (MEZ)
+ </div>
+ </body>
+</html>
\ No newline at end of file
diff --git a/Output/bob/index.html b/Output/bob/index.html
new file mode 100644
index 0000000000000000000000000000000000000000..4905a7edd15573c1f33ef3d0bd6d741620e7377b
--- /dev/null
+++ b/Output/bob/index.html
@@ -0,0 +1,210 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+ <head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+
+ <title>JsDoc Reference - Index</title>
+ <meta name="generator" content="JsDoc Toolkit" />
+
+ <style type="text/css">
+ /* default.css */
+body
+{
+ font: 12px "Lucida Grande", Tahoma, Arial, Helvetica, sans-serif;
+ width: 800px;
+}
+
+.header
+{
+ clear: both;
+ background-color: #ccc;
+ padding: 8px;
+}
+
+h1
+{
+ font-size: 150%;
+ font-weight: bold;
+ padding: 0;
+ margin: 1em 0 0 .3em;
+}
+
+hr
+{
+ border: none 0;
+ border-top: 1px solid #7F8FB1;
+ height: 1px;
+}
+
+pre.code
+{
+ display: block;
+ padding: 8px;
+ border: 1px dashed #ccc;
+}
+
+#index
+{
+ margin-top: 24px;
+ float: left;
+ width: 160px;
+ position: absolute;
+ left: 8px;
+ background-color: #F3F3F3;
+ padding: 8px;
+}
+
+#content
+{
+ margin-left: 190px;
+ width: 600px;
+}
+
+.classList
+{
+ list-style-type: none;
+ padding: 0;
+ margin: 0 0 0 8px;
+ font-family: arial, sans-serif;
+ font-size: 1em;
+ overflow: auto;
+}
+
+.classList li
+{
+ padding: 0;
+ margin: 0 0 8px 0;
+}
+
+.summaryTable { width: 100%; }
+
+h1.classTitle
+{
+ font-size:170%;
+ line-height:130%;
+}
+
+h2 { font-size: 110%; }
+caption, div.sectionTitle
+{
+ background-color: #7F8FB1;
+ color: #fff;
+ font-size:130%;
+ text-align: left;
+ padding: 2px 6px 2px 6px;
+ border: 1px #7F8FB1 solid;
+}
+
+div.sectionTitle { margin-bottom: 8px; }
+.summaryTable thead { display: none; }
+
+.summaryTable td
+{
+ vertical-align: top;
+ padding: 4px;
+ border-bottom: 1px #7F8FB1 solid;
+ border-right: 1px #7F8FB1 solid;
+}
+
+/*col#summaryAttributes {}*/
+.summaryTable td.attributes
+{
+ border-left: 1px #7F8FB1 solid;
+ width: 140px;
+ text-align: right;
+}
+
+td.attributes, .fixedFont
+{
+ line-height: 15px;
+ color: #002EBE;
+ font-family: "Courier New",Courier,monospace;
+ font-size: 13px;
+}
+
+.summaryTable td.nameDescription
+{
+ text-align: left;
+ font-size: 13px;
+ line-height: 15px;
+}
+
+.summaryTable td.nameDescription, .description
+{
+ line-height: 15px;
+ padding: 4px;
+ padding-left: 4px;
+}
+
+.summaryTable { margin-bottom: 8px; }
+
+ul.inheritsList
+{
+ list-style: square;
+ margin-left: 20px;
+ padding-left: 0;
+}
+
+.detailList {
+ margin-left: 20px;
+ line-height: 15px;
+}
+.detailList dt { margin-left: 20px; }
+
+.detailList .heading
+{
+ font-weight: bold;
+ padding-bottom: 6px;
+ margin-left: 0;
+}
+
+.light, td.attributes, .light a:link, .light a:visited
+{
+ color: #777;
+ font-style: italic;
+}
+
+.fineprint
+{
+ text-align: right;
+ font-size: 10px;
+}
+ </style>
+ </head>
+
+ <body>
+ <div id="header">
+</div>
+
+ <div id="index">
+ <div align="center"><a href="index.html">Class Index</a>
+| <a href="files.html">File Index</a></div>
+<hr />
+<h2>Classes</h2>
+<ul class="classList">
+
+ <li><i><a href="symbols/_global_.html">_global_</a></i></li>
+
+</ul>
+<hr />
+ </div>
+
+ <div id="content">
+ <h1 class="classTitle">Class Index</h1>
+
+
+ <div>
+ <h2><a href="symbols/_global_.html">_global_</a></h2>
+
+ </div>
+ <hr />
+
+
+ </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 Fri Nov 19 2021 19:23:13 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
new file mode 100644
index 0000000000000000000000000000000000000000..51764dd801838abe6fb8e8a5c2e518c0a575068e
--- /dev/null
+++ b/Output/bob/symbols/_global_.html
@@ -0,0 +1,320 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+ <head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <meta name="generator" content="JsDoc Toolkit" />
+
+ <title>JsDoc Reference - _global_</title>
+
+ <style type="text/css">
+ /* default.css */
+body
+{
+ font: 12px "Lucida Grande", Tahoma, Arial, Helvetica, sans-serif;
+ width: 800px;
+}
+
+.header
+{
+ clear: both;
+ background-color: #ccc;
+ padding: 8px;
+}
+
+h1
+{
+ font-size: 150%;
+ font-weight: bold;
+ padding: 0;
+ margin: 1em 0 0 .3em;
+}
+
+hr
+{
+ border: none 0;
+ border-top: 1px solid #7F8FB1;
+ height: 1px;
+}
+
+pre.code
+{
+ display: block;
+ padding: 8px;
+ border: 1px dashed #ccc;
+}
+
+#index
+{
+ margin-top: 24px;
+ float: left;
+ width: 160px;
+ position: absolute;
+ left: 8px;
+ background-color: #F3F3F3;
+ padding: 8px;
+}
+
+#content
+{
+ margin-left: 190px;
+ width: 600px;
+}
+
+.classList
+{
+ list-style-type: none;
+ padding: 0;
+ margin: 0 0 0 8px;
+ font-family: arial, sans-serif;
+ font-size: 1em;
+ overflow: auto;
+}
+
+.classList li
+{
+ padding: 0;
+ margin: 0 0 8px 0;
+}
+
+.summaryTable { width: 100%; }
+
+h1.classTitle
+{
+ font-size:170%;
+ line-height:130%;
+}
+
+h2 { font-size: 110%; }
+caption, div.sectionTitle
+{
+ background-color: #7F8FB1;
+ color: #fff;
+ font-size:130%;
+ text-align: left;
+ padding: 2px 6px 2px 6px;
+ border: 1px #7F8FB1 solid;
+}
+
+div.sectionTitle { margin-bottom: 8px; }
+.summaryTable thead { display: none; }
+
+.summaryTable td
+{
+ vertical-align: top;
+ padding: 4px;
+ border-bottom: 1px #7F8FB1 solid;
+ border-right: 1px #7F8FB1 solid;
+}
+
+/*col#summaryAttributes {}*/
+.summaryTable td.attributes
+{
+ border-left: 1px #7F8FB1 solid;
+ width: 140px;
+ text-align: right;
+}
+
+td.attributes, .fixedFont
+{
+ line-height: 15px;
+ color: #002EBE;
+ font-family: "Courier New",Courier,monospace;
+ font-size: 13px;
+}
+
+.summaryTable td.nameDescription
+{
+ text-align: left;
+ font-size: 13px;
+ line-height: 15px;
+}
+
+.summaryTable td.nameDescription, .description
+{
+ line-height: 15px;
+ padding: 4px;
+ padding-left: 4px;
+}
+
+.summaryTable { margin-bottom: 8px; }
+
+ul.inheritsList
+{
+ list-style: square;
+ margin-left: 20px;
+ padding-left: 0;
+}
+
+.detailList {
+ margin-left: 20px;
+ line-height: 15px;
+}
+.detailList dt { margin-left: 20px; }
+
+.detailList .heading
+{
+ font-weight: bold;
+ padding-bottom: 6px;
+ margin-left: 0;
+}
+
+.light, td.attributes, .light a:link, .light a:visited
+{
+ color: #777;
+ font-style: italic;
+}
+
+.fineprint
+{
+ text-align: right;
+ font-size: 10px;
+}
+ </style>
+ </head>
+
+ <body>
+<!-- ============================== header ================================= -->
+ <!-- begin static/header.html -->
+ <div id="header">
+</div>
+ <!-- end static/header.html -->
+
+<!-- ============================== classes index ============================ -->
+ <div id="index">
+ <!-- begin publish.classesIndex -->
+ <div align="center"><a href="../index.html">Class Index</a>
+| <a href="../files.html">File Index</a></div>
+<hr />
+<h2>Classes</h2>
+<ul class="classList">
+
+ <li><i><a href="../symbols/_global_.html">_global_</a></i></li>
+
+</ul>
+<hr />
+ <!-- end publish.classesIndex -->
+ </div>
+
+ <div id="content">
+<!-- ============================== class title ============================ -->
+ <h1 class="classTitle">
+
+ Built-In Namespace _global_
+ </h1>
+
+<!-- ============================== class summary ========================== -->
+ <p class="description">
+
+
+
+
+
+
+ </p>
+
+<!-- ============================== constructor summary ==================== -->
+
+
+<!-- ============================== properties summary ===================== -->
+
+
+<!-- ============================== methods summary ======================== -->
+
+
+
+ <table class="summaryTable" cellspacing="0" summary="A summary of the methods documented in the class _global_.">
+ <caption>Method Summary</caption>
+ <thead>
+ <tr>
+ <th scope="col">Method Attributes</th>
+ <th scope="col">Method Name and Description</th>
+ </tr>
+ </thead>
+ <tbody>
+
+ <tr>
+ <td class="attributes"> </td>
+ <td class="nameDescription">
+ <div class="fixedFont"><b><a href="../symbols/_global_.html#firstauthor">firstauthor</a></b>(authors)
+ </div>
+ <div class="description">returns last name of first author</div>
+ </td>
+ </tr>
+
+ </tbody>
+ </table>
+
+
+
+
+<!-- ============================== events summary ======================== -->
+
+
+<!-- ============================== constructor details ==================== -->
+
+
+<!-- ============================== field details ========================== -->
+
+
+<!-- ============================== method details ========================= -->
+
+ <div class="sectionTitle">
+ Method Detail
+ </div>
+
+ <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>
+
+
+
+
+
+
+
+
+
+
+
+
+<!-- ============================== event details ========================= -->
+
+
+ <hr />
+ </div>
+
+
+<!-- ============================== 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 Fri Nov 19 2021 19:23:13 GMT+0100 (MEZ)
+ </div>
+ </body>
+</html>
diff --git a/Output/bob/symbols/src/cn.js.html b/Output/bob/symbols/src/cn.js.html
new file mode 100644
index 0000000000000000000000000000000000000000..f5316759bc283bfdc20abf3e15b7bf4acf32b759
--- /dev/null
+++ b/Output/bob/symbols/src/cn.js.html
@@ -0,0 +1,209 @@
+<html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"> <style>
+ .KEYW {color: #933;}
+ .COMM {color: #bbb; font-style: italic;}
+ .NUMB {color: #393;}
+ .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">
+<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="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'> 39</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'> 40</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'> 41</span>
+<span class='line'> 42</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'> 43</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'> 44</span>
+<span class='line'> 45</span> </span><span class="COMM">//d3.json("data.json", function (error, graph) {</span><span class="WHIT">
+<span class='line'> 46</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'> 47</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'> 48</span> </span><span class="PUNC">}</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'> 49</span>
+<span class='line'> 50</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'> 51</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'> 52</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'> 53</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'> 54</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'> 55</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'> 56</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'> 57</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'> 58</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'> 59</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'> 60</span>
+<span class='line'> 61</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'> 62</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'> 63</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'> 64</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'> 65</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'> 66</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'> 67</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'> 68</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'> 69</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'> 70</span> </span><span class="WHIT"> </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">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'> 72</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'> 73</span>
+<span class='line'> 74</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'> 75</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'> 76</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'> 77</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'> 78</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'> 79</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'> 80</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'> 81</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'> 82</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'> 83</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'> 84</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'> 85</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'> 86</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'> 87</span>
+<span class='line'> 88</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'> 89</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'> 90</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'> 91</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'> 92</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'> 93</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'> 94</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'> 95</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'> 96</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'> 97</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'> 98</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'> 99</span>
+<span class='line'>100</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'>101</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'>102</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>103</span>
+<span class='line'>104</span> </span><span class="NAME">simulation</span><span class="WHIT">
+<span class='line'>105</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'>106</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'>107</span>
+<span class='line'>108</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'>109</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'>110</span> </span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>111</span>
+<span class='line'>112</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'>113</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'>114</span> </span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>115</span>
+<span class='line'>116</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'>117</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'>118</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'>119</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'>120</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'>121</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'>122</span> </span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>123</span>
+<span class='line'>124</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'>125</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'>126</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'>127</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'>128</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'>129</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'>130</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'>131</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'>132</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'>133</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'>134</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'>135</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'>136</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'>137</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'>138</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'>139</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>140</span>
+<span class='line'>141</span> </span><span class="COMM">/**
+<span class='line'>142</span> * returns last name of first author
+<span class='line'>143</span> * @param {string} authors - The comma-separated string of authors
+<span class='line'>144</span> */</span><span class="WHIT">
+<span class='line'>145</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'>146</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'>147</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'>148</span> </span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>149</span> </span><span class="KEYW">else</span><span class="PUNC">{</span><span class="WHIT">
+<span class='line'>150</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'>151</span> </span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>152</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'>153</span> </span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>154</span>
+<span class='line'>155</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'>156</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'>157</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'>158</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'>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">ticked</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
+<span class='line'>162</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'>163</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'>164</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'>165</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'>166</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'>167</span> </span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>168</span>
+<span class='line'>169</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'>170</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'>171</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'>172</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'>173</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'>174</span> </span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>175</span>
+<span class='line'>176</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'>177</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'>178</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'>179</span> </span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>180</span>
+<span class='line'>181</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'>182</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'>183</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'>184</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'>185</span> </span><span class="PUNC">}</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>186</span> </span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>187</span>
+<span class='line'>188</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'>189</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'>190</span> </span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>191</span>
+<span class='line'>192</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'>193</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'>194</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">transition</span><span class="PUNC">(</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">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'>196</span> </span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>197</span>
+<span class='line'>198</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'>199</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'>200</span> </span><span class="WHIT"> </span><span class="PUNC">.</span><span class="NAME">transition</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>201</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'>202</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
new file mode 100644
index 0000000000000000000000000000000000000000..8524901ca42e398f31e6283f0ac1b564784b41cf
--- /dev/null
+++ b/Output/cn.js
@@ -0,0 +1,202 @@
+var svg = d3.select("svg"),
+width = +svg.attr("width"),
+height = +svg.attr("height");
+
+var node,
+r=12,
+color = d3.scaleOrdinal()
+ .domain(["citing", "input", "cited"])
+ .range([' #01d7c0', ' #8b90fe ', ' #a15eb2 ']),
+yscale = d3.scaleOrdinal()
+ .domain(["citing", "input", "cited"])
+ .range([0, 200, 400]),
+toRemove;
+
+var link;
+
+var rect = svg.append("rect")
+.attr("x", 0)
+.attr("y", 0)
+.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";
+});
+
+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)}));
+
+var zoom = d3.zoom()
+ .on("zoom", zoom);
+zoom(svg);
+
+var g = svg.append("g")
+ .attr("class", "everything")
+
+//d3.json("data.json", function (error, graph) {
+d3.json("json_text.json").then(function(graph){
+ update(graph.links, graph.nodes);
+})
+
+function update(links, nodes) {
+ link = g.append("g")
+ .selectAll(".link")
+ .data(links)
+ .enter()
+ .append("line")
+ .style("stroke-width", "1px")
+ .style("stroke", "#999")
+ .attr("class", "link")
+ .attr('marker-end',marker("#999"))
+
+ node = g.append("g")
+ .selectAll(".node")
+ .data(nodes)
+ .enter()
+ .append("g")
+ .attr("class", "node")
+ .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")
+ .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)
+ });
+
+ node.append("text")
+ .attr("class", "text") //über selectAll(".text") können objs mit der klasse ausgewählt werden
+ .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);
+}
+
+function isLinkForNode(node, link){
+return link.source.index == node.index || link.target.index == node.index;
+}
+
+function marklink(node){
+d3.selectAll(".link")
+ .style("stroke", function(o) {
+ return isLinkForNode(node, o) ? "black" : "#999";})
+ .attr('marker-end', function(o) {
+ return isLinkForNode(node, o) ? marker('#000000') : marker('#999');})
+}
+
+function marker(color) {
+svg.append('defs').append('marker')//arrowhead
+ .attr('id',color.replace("#", ""))
+ .attr('viewBox','-0 -5 10 10')
+ .attr('refX',r+10)
+ .attr('refY',0)
+ .attr('orient','auto')
+ .attr('markerWidth',10)
+ .attr('markerHeight',15)
+ .attr('xoverflow','visible')
+ .append('svg:path')
+ .attr('d', 'M 0,-5 L 10 ,0 L 0,5')
+ .attr('fill', color)//arrowhead color
+ .style('stroke','none');
+return "url(" + color + ")";
+};
+
+/**
+* returns last name of first author
+* @param {string} authors - The comma-separated string of authors
+*/
+function firstauthor(authors){
+if (/,/.test(authors)==false){
+ var firstauthor=/^.*\s+([\w\-]+)[\.\s]*$/.exec(authors)
+}
+else{
+var firstauthor=/^[\s\w\.\-]*\s([\w\-]+)[\.\s]*,.*$/.exec(authors)
+}
+return firstauthor[1]
+}
+
+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 ticked() {
+link.attr("x1", function (d) {return d.source.x;})
+ .attr("y1", function (d) {return d.source.y;})
+ .attr("x2", function (d) {return d.target.x;})
+ .attr("y2", function (d) {return d.target.y;});
+node.attr("transform", function (d) {return "translate(" + d.x + ", " + d.y + ")";});
+}
+
+function dragstarted(d) {
+if (!d3.event.active)
+ simulation.alphaTarget(0.3).restart()
+d.fx = d.x;
+d.fy = d.y;
+}
+
+function dragged(d) {
+d.fx = d3.event.x;
+d.fy = d3.event.y;
+}
+
+function resetGraph(){
+d3.selectAll(".node").each(function(d) {
+ d.fx = d.initial_x;
+ d.fy = d.initial_y;
+})
+}
+
+function zoom(){
+d3.select('g').attr("transform", d3.event.transform)
+}
+
+function resetZoom() {
+d3.select('svg')
+ .transition()
+ .call(zoom.scaleTo, 1);
+}
+
+function center() {
+d3.select('svg')
+ .transition()
+ .call(zoom.translateTo, 0.5 * width, 0.5 * height);
+}
\ No newline at end of file
diff --git a/Output/index.html b/Output/index.html
index d64e13718425add2cdd19bd0dfd0f6f1ef8ef4e1..83b7465357117d4146c07e72c35eb4ca192845fd 100644
--- a/Output/index.html
+++ b/Output/index.html
@@ -2,324 +2,58 @@
<html lang="en">
<head>
<meta charset="utf-8">
- <!--- <meta http-equiv="X-UA-Compatible" content="IE=edge">-->
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <style type="text/css">
- .node {}
-
- .link { stroke: #999; stroke-opacity: .6; stroke-width: 1px; }
+ <style type="text/css">
/*
button {
- width: 150px;
- font-size: 15px;
- padding: 7px;
- border-radius: 3px;
- border: 3px solid #999;
- color: black;
- cursor: pointer;
- position : absolute;
- top: 500px;
- right: 550px;
+ width: 150px;
+ font-size: 15px;
+ padding: 7px;
+ border-radius: 3px;
+ border: 3px solid #999;
+ color: black;
+ cursor: pointer;
+ position : absolute;
+ top: 500px;
+ right: 550px;
} */
+
+ /* textbox */
div {
- width:270px;
- min-height:200px;
- max-height:370px;
- padding: 10px;
- border: 1px solid #999;
- position: absolute;
- top: 0;
- right: 440px;
- display: inline-block;
- overflow-y: scroll;
- margin: 0;
+ width:270px;
+ min-height:200px;
+ max-height:370px;
+ padding: 10px;
+ border: 1px solid #999;
+ position: absolute;
+ top: 20px;
+ right: 440px;
+ display: inline-block;
+ overflow-y: scroll;
+ margin: 0;
}
-
</style>
- <!--width: 270px;-->
- <link rel="shortcut icon" href="#">
</head>
-<body>
-<p id="id"></p> <!--for commenting with document.getElementById("id").innerHTML = "text"; -->
-<svg width="960" height="600"></svg>
-
-<script src="https://d3js.org/d3.v4.min.js" type="text/javascript"></script>
-<script src="https://d3js.org/d3-selection-multi.v1.js"></script>
-<!-- Rücksetzbuttons -->
-<button onclick="javascript:location.reload();">Reload</button>
-<button onclick="resetGraph()">Reset graph</button>
-<button onclick="resetZoom()">Reset zoom</button>
-<button onclick="center()">Center</button>
-<div id = "textbox" style="border:1px solid">Click node</div>
-
-
-<script type="text/javascript">
-// var colors = d3.scaleOrdinal(d3.schemeCategory10);
+<body>
+ <!-- for testing -->
+ <p id="id"></p> <!--for commenting with document.getElementById("id").innerHTML = "text"; -->
-// Farbgruppen
- var color = d3.scaleOrdinal()
- .domain(["citing", "input", "cited"])
- //.range([ "#F8766D", "#00BA38", "#619CFF"])
- .range([' #01d7c0', ' #8b90fe ', ' #01cd2f '])
-
- /* var x = d3.scaleOrdinal()
- .domain(["citing", "input", "cited"])
- .range([10, 200, 340])*/
-
- var yscale = d3.scaleOrdinal()
- .domain(["citing", "input", "cited"])
- .range([0, 200, 400])
-
- var svg = d3.select("svg"),
- width = +svg.attr("width"),
- height = +svg.attr("height"),
- node,
- link,
- r=12;
-
- svg.append('defs').append('marker')//arrowhead
-
- .attrs({'id':'arrowhead',
- 'viewBox':'-0 -5 10 10',
- 'refX':r+10,
- 'refY':0,
- 'orient':'auto',
- 'markerWidth':10,
- 'markerHeight':15,
- 'xoverflow':'visible'})
- .append('svg:path')
- .attr('d', 'M 0,-5 L 10 ,0 L 0,5')
- .attr('fill', '#999')//arrowhead color
- .style('stroke','none');
-
- svg.append('defs').append('marker')//arrowhead
-
- .attrs({'id':'arrowhead2',
- 'viewBox':'-0 -5 10 10',
- 'refX':r+10,
- 'refY':0,
- 'orient':'auto',
- 'markerWidth':10,
- 'markerHeight':15,
- 'xoverflow':'visible'})
- .append('svg:path')
- .attr('d', 'M 0,-5 L 10 ,0 L 0,5')
- .attr('fill', 'black')//arrowhead color
- .style('stroke','none');
-
- 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("x", d3.forceX().strength(0.5).x( function(d){ return x(d.group) } ));
- .force("yscale", d3.forceY().strength(1).y( function(d){ return yscale(d.group) } ));
-
- // Hinzufügen der Zoom-Fähigkeiten
- var zoom = d3.zoom()
- //.scaleExtent([0.25, 10])
- .on("zoom", zoom_actions);
-
- //d3.select('svg').call(zoom);
- zoom(svg);
-
- var g = svg.append("g")
- .attr("class", "everything")
- //.call(zoom);
-
- //d3.json("data.json", function (error, graph) {
- d3.json("json_text.json", function (error, graph) {
- if (error) throw error;
- update(graph.links, graph.nodes);
- })
-
- function update(links, nodes) {
- link = g.append("g")
- .selectAll(".link")
- .data(links)
- .enter()
- .append("line")
- .style("stroke-width", "1px")
- .style("stroke", "#000000")
- .attr("class", "link")
- .attr('marker-end','url(#arrowhead)')
-
- link.append("title")
- .text(function (d) {return d.author;});
-
-
- node = g.append("g") // Zoom
- .selectAll(".node")
- .data(nodes)
- .enter()
- .append("g")
- .attr("class", "node")
- .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;});
-
-
-
- var h = svg.append('g').attr("transform" ,"scale(0)");
- h.transition().duration(500).attr("transform" ,"scale(1)");
- var toRemove;
-
- node.append("circle")
- .attr("r", r)
- .attr("class", "circle")
- .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")
-
- d3.selectAll(".link").style("stroke", function(o) {
- return isLinkForNode(d, o) ? "black" : "#000000";})
-
- d3.selectAll(".link").style("stroke-opacity", function(o) {
- return isLinkForNode(d, o) ? "1" : ".6";})
-
- d3.selectAll(".link").attr('marker-end', function(o) {
- return isLinkForNode(d, o) ? 'url(#arrowhead2)' : 'url(#arrowhead)';})
-
- textfunc(d,h)
- })
-
-
- //hovertext
- /* node.append("title")
- .text(function (d) {return "Title: "+d.name+"\nAuthor: "+d.author+"\nYear: "+d.year+"\ndoi: "+d.doi;});
-*/
- node.append("text")
- .attr("class", "text") //über selectAll(".text") können objs mit der klasse ausgewählt werden
- .style("font-size", "15px")
- .text(function (d) {return author(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")
-
-
- d3.selectAll(".link").style("stroke", function(o) {
- return isLinkForNode(d, o) ? "black" : "#000000";})
-
- d3.selectAll(".link").style("stroke-opacity", function(o) {
- return isLinkForNode(d, o) ? "1" : ".6";})
-
- d3.selectAll(".link").attr('marker-end', function(o) {
- return isLinkForNode(d, o) ? 'url(#arrowhead2)' : 'url(#arrowhead)';})
-
- textfunc(d,h);
- });
-
- simulation
- .nodes(nodes)
- .on("tick", ticked);
-
- simulation.force("link")
- .links(links);
- }
-
- function isLinkForNode(node, link){
- return link.source.index == node.index || link.target.index == node.index;
- }
- function author(author){
- if (/,/.test(author)==false){
- var hmm=/^.*\s+([\w\-]+)[\.\s]*$/.exec(author)
- }
- else{
- var hmm=/^[\s\w\.\-]*\s([\w\-]+)[\.\s]*,.*$/.exec(author)
- }
- return hmm[1]
-
- }
-
-
- function textfunc(d,h){
- d3.selectAll("foreignObject").remove()
- h.append('foreignObject')
- .attr('x', width-300)
- .attr('y', 15)
- .attr('width', 300)
- .attr('height', 400)
- .style("font-size", "15px")
- .html(function(h) {
-
- 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;
- /*
- return '<div style="border:1px solid">' + "Title:" + '</br>' + d.name +
- '</br>' +'</br>'+"Author:"+ '</br>' +d.author+'</br>'+'</br>'+"Year:"+'</br>'+d.year+'</br>'+'</br>'
- +"doi:"+'</br>'+d.doi+'</div>'
- */
- })
-
- }
-
- function ticked() {
- link
- .attr("x1", function (d) {return d.source.x;})
- .attr("y1", function (d) {return d.source.y;})
- .attr("x2", function (d) {return d.target.x;})
- .attr("y2", function (d) {return d.target.y;});
-
- node
- .attr("transform", function (d) {return "translate(" + d.x + ", " + d.y + ")";});
-
- }
-
-
- function dragstarted(d) {
- if (!d3.event.active) simulation.alphaTarget(0.3).restart()//specify forces?
- d.fx = d.x;
- d.fy = d.y;
- }
-
- function dragged(d) {
- d.fx = d3.event.x;
- d.fy = d3.event.y;
- }
-
-
-function zoom_actions(){
- d3.select('g').attr("transform", d3.event.transform)
-}
-
-function resetZoom() {
- d3.select('svg')
- .transition()
- .call(zoom.scaleTo, 1);
-}
+ <!-- graph -->
+ <svg width="960" height="600"></svg>
-function center() {
- d3.select('svg')
- .transition()
- .call(zoom.translateTo, 0.5 * width, 0.5 * height);
-}
+ <!-- textbox -->
+ <div id = "textbox" style="border:1px solid">Click node</div>
-function resetGraph(){
- d3.selectAll(".node").each(function(d) {
- d.fx = d.initial_x;
- d.fy = d.initial_y;
- })
-}
+ <!-- reset-buttons -->
+ <button onclick="javascript:location.reload();">Reload</button>
+ <button onclick="resetGraph()">Reset graph</button>
+ <button onclick="resetZoom()">Reset zoom</button>
+ <button onclick="center()">Center</button>
-</script>
+ <!-- link D3 (version 5) -->
+ <script src="https://d3js.org/d3.v5.min.js"></script>
+ <script type="text/javascript" src="cn.js"></script>
</body>
</html>
\ No newline at end of file