diff --git a/README.md b/README.md
index d3a7e438ee56b341db5d7a1eabcb996e154f103f..c109cc8df99fda480c5ac4b666d258c53c6e46c8 100644
--- a/README.md
+++ b/README.md
@@ -1,38 +1,47 @@
-# Projekt CiS-Biochemie 2021-22 UI
+# Projekt CiS-Biochemie 2021-22 
 
-# Benötigt:
-- Dash 
-- Pandas
-- beautifulsoup4
-- requests
+# Requirements:
+
+- Alle requirements sind in der 'requirements' Datei im Hauptverzeichnis zu
+  finden.
+- Installation: pip3 install -r requirements
 
 # Starten des Programms:
 
-Ausführen von citation_parser_ui.py und einfügen des entstandenen Liks in einen Browser.
-Danach müsste sich die Benutzeroberfläche im Browser öffnen.
+Um das Programm nutzen zu können muss zuerst \grqq citation\_parser\_ui.py\grqq \, ausgeführt werden und der entstandene Lik in einen Browser eingefügt werden. Danach öffnet sich die Benutzeroberfläche im Browser.
 
 
 # Übersicht der Benutzeroberfläche:
 
 - Show Info: Durch wiederholtes klicken kann das Fenster ein und aus geblendet werden.
 
-- Input: Die Eingabe erfolgt in Form eines DOI ("Digital Object Identifier") 
+- Input: Die Eingabe erfolgt in Form eines DOI ("Digital Object Identifier") oder Hyperlink
+
+- Drag and drop or click to select a file to upload: Mehrere DOI oder Hyperlinks in einem .txt-Dokument (genau ein Link pro Zeile).
 
-- Drag and drop or click to select a file to upload: Mehrere DOI in einem txt-Dokument (genau ein DOI pro Zeile).
+- Reference Depth: die Tiefe der Artikel welche von der Eingabe zitiert werden.
 
-- Recursion: die beiden noch unbeschrifteten Felder rechts neben Input sind für die Rekursionstiefen in beide Richtungen
+- Cited-by Depth: die Tiefe derjenigen welche de Eingegebenen Artikel Zitieren. 
 
 - Clear All: alle Eingaben werden gelöscht
 
 - Clear Selected: alle markierten Eingaben werden gelöscht
 
-- Generate Graph: generiert den zugehörigen Graphen (generiert momentan nur einen string)
+- Generate Graph: generiert den zugehörigen Graphen 
 
 - Update Automatically: automatische Aktualisierung des Graphen bei jeder neuen Eingabe
 
-- Smart Input: direkte Überprüfung der Eingabe auf Richtigkeit zudem wird nicht mehr der DOI angezeigt sondern: 
+- Smart Input: direkte Überprüfung der Eingabe auf Richtigkeit zudem wird nicht mehr der DOI oder Hyperlink angezeigt sondern: 
   Der Autor, Das Journal, Das Veröffentlichungsdatum. (muss vor Hinzufügen aktiviert worden sein)
 
 ## Autoren
 - Isabelle Siebels
 - Sebastian David
+- Florian Jochens
+- Julius Schenk
+- Samuel Ockenden
+- Alina Molkentin
+- Donna Löding
+- Malte Schokolowski
+- Katja Ehlers
+- Merle Stahl
diff --git a/assets/README.md b/assets/README.md
index 418fdbecc82cdc61979325e9ca7a5e87604a3a7a..c3751f197ff365ccf458954c1d90c63c5ea0eb7e 100644
--- a/assets/README.md
+++ b/assets/README.md
@@ -1,20 +1,20 @@
 # Projekt CiS-Projekt 2021/22
 
-Citation network made with **d3.js**
+Zitierungsnetzwerk erstellt mit **D3.js**
 
-## Usage
-### Input 
-Json file **json\_text.json** in directory
+## Verwendung des Porgramms
+### Eingabe
+Json-Datei **json\_text.json** im Verzeichnis mit folgendem Format
 ```json
 {
     "nodes": [
         {
             "name": <title: string>,
             "author": [<author1: string>, <author2: string>, ...],
-            "year": <date: tring>,
+            "year": <date: string>,
             "journal": <journal: string>,
             "doi": <doi: string>,
-            "group": <"input"/"height"/"depth">,
+            "group": <"Input"/"Citedby"/"Reference">,
             "citations": <citation: int>
         }, ...
     ],
@@ -27,20 +27,20 @@ Json file **json\_text.json** in directory
 }
 ```
 
-### Display the Citation Network
-Starting a python web server:
+### Anzeigen des Zitierungsnetzwerks
+Starten eines Python Web Servers:
 ```sh
    cd <path to file> &&python3 -m http.server <port>
 ```
-Access to the server:
+Zugriff auf den Server:
 [http://0.0.0.0/:\<port\>](http://0.0.0.0/:<port>)
 
-## Files in Directory
-- **index.html**: webpage
-- **cn.js**: javascript code for force-directed graph, text elements and legend
-- **json_text.json**: example data
+## Dateien im Verzeichnis
+- **index.html**: Webseite
+- **cn_default.js**: JavaScript-Code für den Graphen in Standardansicht
+- **cn_timeline.js**: JavaScript-Code für den Graphen in Zeitstrahlansicht
 
 
-## Authors
+## Authoren
 - Katja Ehlers
 - Merle Stahl
\ No newline at end of file
diff --git a/assets/cn_default.js b/assets/cn_default.js
index efa888526d9b244937a4ebe334d4e9bd198e9756..60c302a0cd8711c269ffbdd11f9d5ff0fe19f4c6 100644
--- a/assets/cn_default.js
+++ b/assets/cn_default.js
@@ -1,7 +1,7 @@
 /**
 * creates a new zoom behavior
 */
-var zoom = d3.zoom().on("zoom", handle_zoom);
+var zoom = d3.zoom().on("zoom", handle_transformation);
 
 /**
 * creates svg object and associated attributes
@@ -11,7 +11,7 @@ var svg = d3.select("svg.graph")
     .call(zoom),
 width = svg.attr("width"),
 height = svg.attr("height"),
-perc;
+zoom_perc;
 
 /**
 * scale functions that return y coordinate/color of node depending on group
@@ -21,8 +21,7 @@ var color = d3.scaleOrdinal()
     .range(['#01d7c0', '#7fa9d4', '#a15eb2']),
 y_scale = d3.scaleOrdinal()
     .domain(["Citedby", "Input", "Reference"])
-    .range([0, 200, 400]),
-to_remove;
+    .range([0, 200, 400]);
 
 /**
 * creates node object and (default) radius
@@ -30,6 +29,11 @@ to_remove;
 var node,
 r = 10;
 
+/**
+* saves highlighted node for click functionality
+*/
+var to_remove;
+
 /**
 * creates link object
 */
@@ -44,11 +48,10 @@ var rect = svg.append("rect")
     .attr("height", height)
     .attr("width", width)
     .style("fill", 'white')
-    .on('click', click_rect);
+    .on('click', click_background);
 
 /**
-* creates svg object (legend) and associated attributes
-* transform
+* creates svg object (legend) with text, circles and arrows
 */
 var svg_legend = d3.select("svg.legendsvg"),
 legend_position = [65,95,125],
@@ -85,7 +88,7 @@ var legend_arrow = svg_legend.selectAll(".legendarr")
     .enter()
     .append("g")
     .attr("class","legendarr")
-    .attr("transform", function(d) { return "translate(0," + d  + ")"; });
+    .attr("transform", function(d) {return "translate(0," + d  + ")";});
     
 legend_arrow.append("line")
     .attr("x1", 10)
@@ -111,22 +114,25 @@ legend_arrow.append("text")
   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(50).strength(function(d) {
+    .force("link", d3.forceLink().id(function(d) {return d.doi;}).distance(50)
+        .strength(function(d) {
             if (d.group == "Input") {return 0;}
             else {return 5;}
         }))
-        .force("collide", d3.forceCollide(function(d) {
-            if (d.group == "Input") {return 70;}
-            else {return 70;}
+    .force("collide", d3.forceCollide(function(d) {
+        if (d.group == "Input") {return 70;}
+        else {return 70;}
         }).strength(0.5))
     .force("charge", d3.forceManyBody().strength(0.001))
     .force("center", d3.forceCenter(width/2-20, height/2+20))
-    .force("yscale", d3.forceY().strength(function(d) {
-        if (d.group == "Input") {return 300;}
-        else {return 200;}
-    }).y(function(d) {return y_scale(d.group)}))
+    .force("yscale", d3.forceY()
+        .strength(function(d) {
+            if (d.group == "Input") {return 300;}
+            else {return 200;}
+        }).y(function(d) {return y_scale(d.group)}))
     .alpha(0.004)
-    .on("end",  zoom_to);
+    .velocityDecay(0.65)
+    .on("end", zoom_to_graph);
 
 /**
 * creates group element
@@ -138,17 +144,21 @@ var g = svg.append("g")
 * loads JSON data and calls the update function
 */
 d3.json("json_text.json").then(success,failure)
-function success(graph){
+function success(graph) {
     update(graph.links, graph.nodes);
-
 }
-function failure(graph){
-    localStorage.setItem("oldjson","irgendwaswasimmergespeichertwirdwennkeinejsondaist")
+function failure(graph) {
+    localStorage.setItem("oldjson","keineJson")
 }
 
-var intervalId=window.setInterval(function(){
+/**
+* checks at a fixed interval whether the contents of the JSON file have changed 
+  and reloads the program if necessary
+*/
+var intervalId = window.setInterval(check_if_json_changed, 500)
+function check_if_json_changed() {
     d3.json("json_text.json").then(function(graph) {
-        newjson_string=JSON.stringify(graph) 
+        newjson_string = JSON.stringify(graph) 
         var newjson = CryptoJS.MD5(newjson_string).toString();
         oldjson=localStorage.getItem("oldjson")
         if(newjson !== oldjson){
@@ -156,7 +166,7 @@ var intervalId=window.setInterval(function(){
             window.location.reload()
         }
     })
-},5000);
+}
 
 /**
 * calls update functions for links and nodes
@@ -168,14 +178,13 @@ function update(links, nodes) {
     update_links(links);
     update_nodes(nodes);
     
-    simulation
-        .nodes(nodes)
+    simulation.nodes(nodes)
         .on("tick", handle_tick);
     simulation.force("link")
         .links(links);
     
     link.attr('marker-end', function(d) {return update_marker("#999", d.target);})
-        .style("stroke-dasharray",function(d){return self_citation(d.source,d.target)? ("8,8"): ("1,0")});
+        .style("stroke-dasharray",function(d) {return self_citation(d.source,d.target)? ("8,8"): ("1,0")});
 }
 
 /**
@@ -205,8 +214,8 @@ function update_nodes(nodes) {
         .append("g")
         .attr("class", "node")
         .call(d3.drag()
-            .on("start", start_drag)
-            .on("drag", dragged)
+            .on("start", start_drag_node)
+            .on("drag", dragged_node)
         );
 
     node.append("circle")
@@ -219,7 +228,7 @@ function update_nodes(nodes) {
         .attr("class", "text") 
         .style("font-size", "15px")
         .style('pointer-events', 'auto')
-        .text(function (d) {const first_author=d.author[0].split(" ")
+        .text(function (d) {const first_author = d.author[0].split(" ")
         return first_author[first_author.length-1];})
         .on('click', click_node);
 }
@@ -269,14 +278,14 @@ function click_node(node) {
 /**
 * removes the highlights of the circles and their links
 */
-function click_rect() {
+function click_background() {
     fix_nodes(node);
     d3.selectAll(".circle").style("stroke", "none")
     d3.selectAll(".link")
         .style("stroke", "#999")
         .attr('marker-end', function(d) {return update_marker('#999', d.target);})
-    text_abstract='';
-    text_info='';
+    text_abstract = '';
+    text_info = '';
     reset_button_highlight()
     document.getElementById('textbox').innerHTML = "Click node";
 }
@@ -354,7 +363,7 @@ function reset_button_highlight() {
 */
 function display_abstract(a) {
     if (text_abstract == '' && text_info == '') {
-        document.getElementById('textbox').innerHTML="Click node";
+        document.getElementById('textbox').innerHTML = "Click node";
     }
     else {
         if (a == true) {
@@ -381,7 +390,7 @@ function handle_tick() {
 * initializes dragging of the node
 * @param {object} node - node
 */
-function start_drag(node) {
+function start_drag_node(node) {
     d3.select(this).raise();
     if (!d3.event.active) 
         simulation.alphaTarget(0.3).restart()
@@ -394,7 +403,7 @@ function start_drag(node) {
 * applies dragging to the node
 * @param {object} node - node
 */
-function dragged(node) {
+function dragged_node(node) {
     node.fx = d3.event.x;
     node.fy = d3.event.y;
     fix_nodes(node);
@@ -416,23 +425,23 @@ function fix_nodes(this_node) {
 /**
 * applies the transformation (zooming or dragging) to the g element
 */
-function handle_zoom() {
+function handle_transformation() {
     d3.select('g').attr("transform", d3.event.transform);
 }
 
 /**
 * transforms svg so that the zoom is adapted to the size of the graph
 */
-function zoom_to() {
+function zoom_to_graph() {
     node_bounds = d3.selectAll("svg.graph").node().getBBox();
     svg_bounds = d3.select("rect").node().getBBox();
 
     perc_x = width/(node_bounds.width+100);
     perc_y = height/(node_bounds.height+100);
-    perc = d3.min([perc_x, perc_y])
+    zoom_perc = d3.min([perc_x, perc_y])
     
     d3.select('svg')
-		.call(zoom.scaleBy, perc);
+		.call(zoom.scaleBy, zoom_perc);
 }
 
 /**
@@ -444,7 +453,7 @@ function reset_view() {
     d3.select('svg')
         .call(zoom.translateTo, 0.5 * width, 0.5 * height);
     d3.select('svg')
-		.call(zoom.scaleBy, perc);
+		.call(zoom.scaleBy, zoom_perc);
 }
 
 /**
@@ -504,9 +513,10 @@ function get_svg_string(svgNode) {
 			
 			try {
 			    if(!s.cssRules) continue;
-			} catch(e) {
-		    		if(e.name !== 'SecurityError') throw e; // for Firefox
-		    		continue;
+			} 
+            catch(e) {
+		    	if(e.name !== 'SecurityError') throw e; // for Firefox
+		    	continue;
 		    	}
 
 			var cssRules = s.cssRules;
@@ -515,14 +525,11 @@ function get_svg_string(svgNode) {
 					extractedCSSText += cssRules[r].cssText;
 			}
 		}
-		
-
 		return extractedCSSText;
 
 		function contains(str,arr) {
 			return arr.indexOf(str) === -1 ? false : true;
 		}
-
 	}
 
 	function append_css(cssText, element) {
@@ -562,8 +569,6 @@ function svg_string_to_image( svgString, width, height, format, callback ) {
 			var filesize = Math.round(blob.length/1024) + ' KB';
 			if (callback) callback(blob, filesize);
 		});
-		
 	};
-
 	image.src = imgsrc;
-}
+}
\ No newline at end of file
diff --git a/assets/cn_timeline.js b/assets/cn_timeline.js
index 900cc2ab968572a4b9ccad7e0cb34233802f6891..15e4f60051f51084dd2278efee058c9030d94574 100644
--- a/assets/cn_timeline.js
+++ b/assets/cn_timeline.js
@@ -1,7 +1,7 @@
 /**
 * creates a new zoom behavior
 */
-var zoom = d3.zoom().on("zoom", handle_zoom);
+var zoom = d3.zoom().on("zoom", handle_transformation);
 
 /**
 * creates svg object and associated attributes
@@ -11,7 +11,7 @@ var svg = d3.select("svg.graph")
     .call(zoom),
 width = svg.attr("width"),
 height = svg.attr("height"),
-perc;
+zoom_perc;
 
 /**
 * scale functions that return y coordinate/color of node depending on group
@@ -21,8 +21,7 @@ var color = d3.scaleOrdinal()
     .range(['#01d7c0', '#7fa9d4', '#a15eb2']),
 y_scale = d3.scaleOrdinal()
     .domain(["Citedby", "Input", "Reference"])
-    .range([0, 200, 400]),
-to_remove;
+    .range([0, 200, 400]);
 
 /**
 * creates node object and (default) radius
@@ -30,6 +29,11 @@ to_remove;
 var node,
 r = 10;
 
+/**
+* saves highlighted node for click functionality
+*/
+var to_remove;
+
 /**
 * creates link object
 */
@@ -44,11 +48,10 @@ var rect = svg.append("rect")
     .attr("height", height)
     .attr("width", width)
     .style("fill", 'white')
-    .on('click', click_rect);
+    .on('click', click_background);
 
 /**
-* creates svg object (legend) and associated attributes
-* transform
+* creates svg object (legend) with text, circles and arrows
 */
 var svg_legend = d3.select("svg.legendsvg"),
 legend_position = [65,95,125],
@@ -85,7 +88,7 @@ var legend_arrow = svg_legend.selectAll(".legendarr")
     .enter()
     .append("g")
     .attr("class","legendarr")
-    .attr("transform", function(d) { return "translate(0," + d  + ")"; });
+    .attr("transform", function(d) {return "translate(0," + d  + ")";});
     
 legend_arrow.append("line")
     .attr("x1", 10)
@@ -110,21 +113,21 @@ legend_arrow.append("text")
 * 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(50).strength(function(d) {
+    .force("link", d3.forceLink().id(function(d) {return d.doi;}).distance(50)
+        .strength(function(d) {
             if (d.group == "Input") {return 0;}
             else {return 5;}
         }))
-        .force("collide", d3.forceCollide(function(d) {
-            if (d.group == "Input") {return 70;}
-            else {return 75;}
+    .force("collide", d3.forceCollide(function(d) {
+        if (d.group == "Input") {return 70;}
+        else {return 75;}
         }).strength(1))
     .force("charge", d3.forceManyBody().strength(0.001))
     .force("center", d3.forceCenter(width/2-20, height/2+40))
     .alpha(0.004)
     .velocityDecay(0.65)
-    .on("end",  zoom_to);
+    .on("end", zoom_to_graph);
 
 /**
 * creates group element
@@ -133,41 +136,45 @@ var g = svg.append("g")
     .attr("class", "everything")
 
 /**
-* creates xAxis element
+* creates x-axis element
 */
 var xAxis = d3.axisBottom()
     .tickFormat(function(d) {if (d%1==0) return d;})
     .ticks(10);
 
 /**
-* draw xAxis
+* draws x-axis
 */
 var gX = svg.append("g")
-        .attr("class", "axis axis--x")
-        .attr("transform", "translate(0,25)")
-    gX.append("text")
-        .attr("y", -5)
-        .attr("x", 85)
-        .attr("text-anchor", "end")
-        .style('fill', 'black')
-        .text("Year")
-        .style("font-size", "15px");
+    .attr("class", "axis axis--x")
+    .attr("transform", "translate(0,25)")
+gX.append("text")
+    .attr("y", -5)
+    .attr("x", 85)
+    .attr("text-anchor", "end")
+    .style('fill', 'black')
+    .text("Year")
+    .style("font-size", "15px");
 
 /**
 * loads JSON data and calls the update function
 */
 d3.json("json_text.json").then(success,failure)
-function success(graph){
+function success(graph) {
     update(graph.links, graph.nodes);
 }
-
-function failure(graph){
-    localStorage.setItem("oldjson","irgendwaswasimmergespeichertwirdwennkeinejsondaist")
+function failure(graph) {
+    localStorage.setItem("oldjson","keineJson")
 }
 
-var intervalId=window.setInterval(function(){
+/**
+* checks at a fixed interval whether the contents of the JSON file have changed 
+  and reloads the program if necessary
+*/
+var intervalId = window.setInterval(check_if_json_changed, 500)
+function check_if_json_changed() {
     d3.json("json_text.json").then(function(graph) {
-        newjson_string=JSON.stringify(graph) 
+        newjson_string = JSON.stringify(graph) 
         var newjson = CryptoJS.MD5(newjson_string).toString();
         oldjson=localStorage.getItem("oldjson")
         if(newjson !== oldjson){
@@ -175,34 +182,33 @@ var intervalId=window.setInterval(function(){
             window.location.reload()
         }
     })
-},5000);
+}
 
 /**
-* calls update functions for links and nodes
+* calls update functions for links, nodes and x-axis
 * adds the nodes, links and tick functionality to the simulation
 * @param {object} nodes - nodes
 * @param {object} links - links
 */
 function update(links, nodes) {
-    updateXAxis(nodes);
+    update_xaxis(nodes);
     update_links(links);
     update_nodes(nodes);
     
-    simulation
-        .nodes(nodes)
+    simulation.nodes(nodes)
         .on("tick", handle_tick);
     simulation.force("link")
         .links(links);
     
     link.attr('marker-end', function(d) {return update_marker("#999", d.target);})
-        .style("stroke-dasharray",function(d){return self_citation(d.source,d.target)? ("8,8"): ("1,0")});
+        .style("stroke-dasharray",function(d) {return self_citation(d.source,d.target)? ("8,8"): ("1,0")});
 }
 
 /**
-* initializes and shows xAxis
+* initializes and shows x-axis
 * @param {object} nodes - nodes
 */
-function updateXAxis(nodes) {
+function update_xaxis(nodes) {
     years = [];
     for (i = 0; i < nodes.length; i++) {
         years.push(parseInt(parseInt(/\d{4}\s*$/.exec(nodes[i]["year"]))));
@@ -243,8 +249,8 @@ function update_nodes(nodes) {
         .append("g")
         .attr("class", "node")
         .call(d3.drag()
-            .on("start", start_drag)
-            .on("drag", dragged)
+            .on("start", start_drag_node)
+            .on("drag", dragged_node)
         );
 
     node.append("circle")
@@ -257,7 +263,7 @@ function update_nodes(nodes) {
         .attr("class", "text") 
         .style("font-size", "15px")
         .style('pointer-events', 'auto')
-        .text(function (d) {const first_author=d.author[0].split(" ")
+        .text(function (d) {const first_author = d.author[0].split(" ")
         return first_author[first_author.length-1];})
         .on('click', click_node);
 }
@@ -291,7 +297,6 @@ function update_marker(color, target) {
 * @param {object} node - node
 */
 function click_node(node) {
-
     d3.select(this.parentNode).raise();
     fix_nodes(node);
     if(to_remove){
@@ -308,14 +313,14 @@ function click_node(node) {
 /**
 * removes the highlights of the circles and their links
 */
-function click_rect() {
+function click_background() {
     fix_nodes(node);
     d3.selectAll(".circle").style("stroke", "none")
     d3.selectAll(".link")
         .style("stroke", "#999")
         .attr('marker-end', function(d) {return update_marker('#999', d.target);})
-    text_abstract='';
-    text_info='';
+    text_abstract = '';
+    text_info = '';
     reset_button_highlight()
     document.getElementById('textbox').innerHTML = "Click node";
 }
@@ -351,15 +356,11 @@ function is_link_for_node(node, link) {
     return link.source.index == node.index || link.target.index == node.index;
 }
 
-
-
 /**
 * saves text for overview and abstract of node
 * outputs node info to textbox
 * @param {object} node - node
 */
-
-
 function textbox_content(node) {
     authors = node.author[0]
     for (i = 1; i < node.author.length; i++) {
@@ -397,7 +398,7 @@ function reset_button_highlight() {
 */
 function display_abstract(a) {
     if (text_abstract == '' && text_info == '') {
-        document.getElementById('textbox').innerHTML="Click node";
+        document.getElementById('textbox').innerHTML = "Click node";
     }
     else {
         if (a == true) {
@@ -424,11 +425,10 @@ function handle_tick() {
 * initializes the dragging of the node
 * @param {object} node - node
 */
-function start_drag(node) {
+function start_drag_node(node) {
     d3.select(this).raise();
     if (!d3.event.active) 
         simulation.alphaTarget(0.3).restart()
-    //node.fx = node.x;
     node.fy = node.y;
     fix_nodes(node);
 }
@@ -437,8 +437,7 @@ function start_drag(node) {
 * applies the dragging to the node
 * @param {object} node - node
 */
-function dragged(node) {
-    //node.fx = d3.event.x;
+function dragged_node(node) {
     node.fy = d3.event.y;
     fix_nodes(node);
 }
@@ -459,7 +458,7 @@ function fix_nodes(this_node) {
 /**
 * applies the transformation (zooming or dragging) to the g element
 */
-function handle_zoom() {
+function handle_transformation() {
     d3.select('g').attr("transform", d3.event.transform);
     var new_xScale = d3.event.transform.rescaleX(xscale)
     gX.call(xAxis.scale(new_xScale));
@@ -468,16 +467,16 @@ function handle_zoom() {
 /**
 * transforms svg so that the zoom is adapted to the size of the graph
 */
-function zoom_to() {
+function zoom_to_graph() {
     node_bounds = d3.selectAll("svg.graph").node().getBBox();
     svg_bounds = d3.select("rect").node().getBBox();
 
     perc_x = width/(node_bounds.width+100);
     perc_y = height/(node_bounds.height+100);
-    perc = d3.min([perc_x, perc_y])
+    zoom_perc = d3.min([perc_x, perc_y])
     
     d3.select('svg')
-		.call(zoom.scaleBy, perc);
+		.call(zoom.scaleBy, zoom_perc);
 }
 
 /**
@@ -489,7 +488,7 @@ function reset_view() {
     d3.select('svg')
         .call(zoom.translateTo, 0.5 * width, 0.5 * height);
     d3.select('svg')
-		.call(zoom.scaleBy, perc);
+		.call(zoom.scaleBy, zoom_perc);
 }
 
 /**
@@ -549,10 +548,11 @@ function get_svg_string(svgNode) {
 			
 			try {
 			    if(!s.cssRules) continue;
-			} catch(e) {
-		    		if(e.name !== 'SecurityError') throw e; // for Firefox
-		    		continue;
-		    	}
+			} 
+            catch(e) {
+		    	if(e.name !== 'SecurityError') throw e; // for Firefox
+		    	continue;
+		    }
 
 			var cssRules = s.cssRules;
 			for (var r = 0; r < cssRules.length; r++) {
@@ -560,14 +560,11 @@ function get_svg_string(svgNode) {
 					extractedCSSText += cssRules[r].cssText;
 			}
 		}
-		
-
 		return extractedCSSText;
 
 		function contains(str,arr) {
 			return arr.indexOf(str) === -1 ? false : true;
 		}
-
 	}
 
 	function append_css(cssText, element) {
@@ -607,8 +604,6 @@ function svg_string_to_image( svgString, width, height, format, callback ) {
 			var filesize = Math.round(blob.length/1024) + ' KB';
 			if (callback) callback(blob, filesize);
 		});
-		
 	};
-
 	image.src = imgsrc;
-}
+}
\ No newline at end of file
diff --git a/assets/documentation/documentation_cn_default/files.html b/assets/documentation/documentation_cn_default/files.html
new file mode 100644
index 0000000000000000000000000000000000000000..10a01d06df51fa659a399bf4777cbf7ef22c9f70
--- /dev/null
+++ b/assets/documentation/documentation_cn_default/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_default.js.html">cn_default.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 Jan 28 2022 12:32:45 GMT+0100 (MEZ)
+		</div>
+	</body>
+</html>
\ No newline at end of file
diff --git a/assets/documentation/documentation_cn_default/index.html b/assets/documentation/documentation_cn_default/index.html
new file mode 100644
index 0000000000000000000000000000000000000000..57bfd68225c7da0ab21ab15495f671b64f88f56c
--- /dev/null
+++ b/assets/documentation/documentation_cn_default/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 Jan 28 2022 12:32:45 GMT+0100 (MEZ)
+		</div>
+	</body>
+</html>
\ No newline at end of file
diff --git a/assets/documentation/documentation_cn_default/symbols/_global_.html b/assets/documentation/documentation_cn_default/symbols/_global_.html
new file mode 100644
index 0000000000000000000000000000000000000000..98e9070e89925a6ba626cedfa6a033b0f3c072c2
--- /dev/null
+++ b/assets/documentation/documentation_cn_default/symbols/_global_.html
@@ -0,0 +1,1738 @@
+<!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 ===================== -->
+			
+				
+				
+				<table class="summaryTable" cellspacing="0" summary="A summary of the fields documented in the class _global_.">
+					<caption>Field Summary</caption>
+					<thead>
+						<tr>
+							<th scope="col">Field Attributes</th>
+							<th scope="col">Field Name and Description</th>
+						</tr>
+					</thead>
+					<tbody>
+					
+						<tr>
+							<td class="attributes">&nbsp;</td>
+							<td class="nameDescription">
+								<div class="fixedFont">
+								<b><a href="../symbols/_global_.html#color">color</a></b>
+								</div>
+								<div class="description">scale functions that return y coordinate/color of node depending on group</div>
+							</td>
+						</tr>
+					
+						<tr>
+							<td class="attributes">&nbsp;</td>
+							<td class="nameDescription">
+								<div class="fixedFont">
+								<b><a href="../symbols/_global_.html#g">g</a></b>
+								</div>
+								<div class="description">creates group element</div>
+							</td>
+						</tr>
+					
+						<tr>
+							<td class="attributes">&nbsp;</td>
+							<td class="nameDescription">
+								<div class="fixedFont">
+								<b><a href="../symbols/_global_.html#intervalId">intervalId</a></b>
+								</div>
+								<div class="description">checks at a fixed interval whether the contents of the JSON file have changed 
+  and reloads the program if necessary</div>
+							</td>
+						</tr>
+					
+						<tr>
+							<td class="attributes">&nbsp;</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">&nbsp;</td>
+							<td class="nameDescription">
+								<div class="fixedFont">
+								<b><a href="../symbols/_global_.html#rect">rect</a></b>
+								</div>
+								<div class="description">creates a background with a click functionality</div>
+							</td>
+						</tr>
+					
+						<tr>
+							<td class="attributes">&nbsp;</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">&nbsp;</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>
+					
+						<tr>
+							<td class="attributes">&nbsp;</td>
+							<td class="nameDescription">
+								<div class="fixedFont">
+								<b><a href="../symbols/_global_.html#svg_legend">svg_legend</a></b>
+								</div>
+								<div class="description">creates svg object (legend) with text, circles and arrows</div>
+							</td>
+						</tr>
+					
+						<tr>
+							<td class="attributes">&nbsp;</td>
+							<td class="nameDescription">
+								<div class="fixedFont">
+								<b><a href="../symbols/_global_.html#to_remove">to_remove</a></b>
+								</div>
+								<div class="description">saves highlighted node for click functionality</div>
+							</td>
+						</tr>
+					
+						<tr>
+							<td class="attributes">&nbsp;</td>
+							<td class="nameDescription">
+								<div class="fixedFont">
+								<b><a href="../symbols/_global_.html#zoom">zoom</a></b>
+								</div>
+								<div class="description">creates a new zoom behavior</div>
+							</td>
+						</tr>
+					
+					</tbody>
+				</table>
+				
+				
+				
+			
+
+<!-- ============================== 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">&nbsp;</td>
+							<td class="nameDescription">
+								<div class="fixedFont"><b><a href="../symbols/_global_.html#click_background">click_background</a></b>()
+								</div>
+								<div class="description">removes the highlights of the circles and their links</div>
+							</td>
+						</tr>
+					
+						<tr>
+							<td class="attributes">&nbsp;</td>
+							<td class="nameDescription">
+								<div class="fixedFont"><b><a href="../symbols/_global_.html#click_node">click_node</a></b>(node)
+								</div>
+								<div class="description">sets color of circle and its links to black and removes the previous highlights
+displays overview info of node in textbox</div>
+							</td>
+						</tr>
+					
+						<tr>
+							<td class="attributes">&nbsp;</td>
+							<td class="nameDescription">
+								<div class="fixedFont"><b><a href="../symbols/_global_.html#display_abstract">display_abstract</a></b>(a-)
+								</div>
+								<div class="description">displays abstract in textbox if a is true, overview text otherwise</div>
+							</td>
+						</tr>
+					
+						<tr>
+							<td class="attributes">&nbsp;</td>
+							<td class="nameDescription">
+								<div class="fixedFont"><b><a href="../symbols/_global_.html#dragged_node">dragged_node</a></b>(node)
+								</div>
+								<div class="description">applies dragging to the node</div>
+							</td>
+						</tr>
+					
+						<tr>
+							<td class="attributes">&nbsp;</td>
+							<td class="nameDescription">
+								<div class="fixedFont"><b><a href="../symbols/_global_.html#fix_nodes">fix_nodes</a></b>(this_node)
+								</div>
+								<div class="description">fix positions of all nodes except for the current node</div>
+							</td>
+						</tr>
+					
+						<tr>
+							<td class="attributes">&nbsp;</td>
+							<td class="nameDescription">
+								<div class="fixedFont"><b><a href="../symbols/_global_.html#get_svg_string">get_svg_string</a></b>(svgNode)
+								</div>
+								<div class="description">generate svgString</div>
+							</td>
+						</tr>
+					
+						<tr>
+							<td class="attributes">&nbsp;</td>
+							<td class="nameDescription">
+								<div class="fixedFont"><b><a href="../symbols/_global_.html#handle_tick">handle_tick</a></b>()
+								</div>
+								<div class="description">updates the positions of the links and nodes</div>
+							</td>
+						</tr>
+					
+						<tr>
+							<td class="attributes">&nbsp;</td>
+							<td class="nameDescription">
+								<div class="fixedFont"><b><a href="../symbols/_global_.html#handle_transformation">handle_transformation</a></b>()
+								</div>
+								<div class="description">applies the transformation (zooming or dragging) to the g element</div>
+							</td>
+						</tr>
+					
+						<tr>
+							<td class="attributes">&nbsp;</td>
+							<td class="nameDescription">
+								<div class="fixedFont"><b><a href="../symbols/_global_.html#highlight_button">highlight_button</a></b>(btn)
+								</div>
+								<div class="description">sets color of btn to dark gray</div>
+							</td>
+						</tr>
+					
+						<tr>
+							<td class="attributes">&nbsp;</td>
+							<td class="nameDescription">
+								<div class="fixedFont"><b><a href="../symbols/_global_.html#is_link_for_node">is_link_for_node</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">&nbsp;</td>
+							<td class="nameDescription">
+								<div class="fixedFont"><b><a href="../symbols/_global_.html#mark_link">mark_link</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">&nbsp;</td>
+							<td class="nameDescription">
+								<div class="fixedFont"><b><a href="../symbols/_global_.html#reset_button_highlight">reset_button_highlight</a></b>()
+								</div>
+								<div class="description">sets color of all buttons to default light gray</div>
+							</td>
+						</tr>
+					
+						<tr>
+							<td class="attributes">&nbsp;</td>
+							<td class="nameDescription">
+								<div class="fixedFont"><b><a href="../symbols/_global_.html#reset_view">reset_view</a></b>()
+								</div>
+								<div class="description">transforms svg so that the zoom and drag is reset</div>
+							</td>
+						</tr>
+					
+						<tr>
+							<td class="attributes">&nbsp;</td>
+							<td class="nameDescription">
+								<div class="fixedFont"><b><a href="../symbols/_global_.html#save_svg">save_svg</a></b>()
+								</div>
+								<div class="description">save svg as png</div>
+							</td>
+						</tr>
+					
+						<tr>
+							<td class="attributes">&nbsp;</td>
+							<td class="nameDescription">
+								<div class="fixedFont"><b><a href="../symbols/_global_.html#self_citation">self_citation</a></b>(source, target)
+								</div>
+								<div class="description">returns true if journals have a common author (self-citation)</div>
+							</td>
+						</tr>
+					
+						<tr>
+							<td class="attributes">&nbsp;</td>
+							<td class="nameDescription">
+								<div class="fixedFont"><b><a href="../symbols/_global_.html#start_drag_node">start_drag_node</a></b>(node)
+								</div>
+								<div class="description">initializes dragging of the node</div>
+							</td>
+						</tr>
+					
+						<tr>
+							<td class="attributes">&nbsp;</td>
+							<td class="nameDescription">
+								<div class="fixedFont"><b><a href="../symbols/_global_.html#svg_string_to_image">svg_string_to_image</a></b>(svgString, width, height, format, callback)
+								</div>
+								<div class="description">convert svgString to image and export it</div>
+							</td>
+						</tr>
+					
+						<tr>
+							<td class="attributes">&nbsp;</td>
+							<td class="nameDescription">
+								<div class="fixedFont"><b><a href="../symbols/_global_.html#textbox_content">textbox_content</a></b>(node)
+								</div>
+								<div class="description">saves text for overview and abstract of node
+outputs node info to textbox</div>
+							</td>
+						</tr>
+					
+						<tr>
+							<td class="attributes">&nbsp;</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, links and tick functionality to the simulation</div>
+							</td>
+						</tr>
+					
+						<tr>
+							<td class="attributes">&nbsp;</td>
+							<td class="nameDescription">
+								<div class="fixedFont"><b><a href="../symbols/_global_.html#update_links">update_links</a></b>(links)
+								</div>
+								<div class="description">initializes and shows links (edges)</div>
+							</td>
+						</tr>
+					
+						<tr>
+							<td class="attributes">&nbsp;</td>
+							<td class="nameDescription">
+								<div class="fixedFont"><b><a href="../symbols/_global_.html#update_marker">update_marker</a></b>(color, target)
+								</div>
+								<div class="description">creates arrowhead and returns its url</div>
+							</td>
+						</tr>
+					
+						<tr>
+							<td class="attributes">&nbsp;</td>
+							<td class="nameDescription">
+								<div class="fixedFont"><b><a href="../symbols/_global_.html#update_nodes">update_nodes</a></b>(nodes)
+								</div>
+								<div class="description">initializes and shows nodes with circles, texts and a click functionality
+creates a new drag behavior and applies it to the circles</div>
+							</td>
+						</tr>
+					
+						<tr>
+							<td class="attributes">&nbsp;</td>
+							<td class="nameDescription">
+								<div class="fixedFont"><b><a href="../symbols/_global_.html#zoom_to_graph">zoom_to_graph</a></b>()
+								</div>
+								<div class="description">transforms svg so that the zoom is adapted to the size of the graph</div>
+							</td>
+						</tr>
+					
+					</tbody>
+				</table>
+				
+				
+				
+			
+<!-- ============================== events summary ======================== -->
+			
+
+<!-- ============================== constructor details ==================== -->		
+			
+
+<!-- ============================== field details ========================== -->		
+			
+				<div class="sectionTitle">
+					Field Detail
+				</div>
+				
+					<a name="color"> </a>
+					<div class="fixedFont">
+					
+					
+					<b>color</b>
+					
+					</div>
+					<div class="description">
+						scale functions that return y coordinate/color of node depending on group
+						
+							<br />
+							<i>Defined in: </i> <a href="../symbols/src/cn_default.js.html">cn_default.js</a>.
+						
+						
+					</div>
+					
+					
+
+						
+						
+						
+						
+
+					<hr />
+				
+					<a name="g"> </a>
+					<div class="fixedFont">
+					
+					
+					<b>g</b>
+					
+					</div>
+					<div class="description">
+						creates group element
+						
+							<br />
+							<i>Defined in: </i> <a href="../symbols/src/cn_default.js.html">cn_default.js</a>.
+						
+						
+					</div>
+					
+					
+
+						
+						
+						
+						
+
+					<hr />
+				
+					<a name="intervalId"> </a>
+					<div class="fixedFont">
+					
+					
+					<b>intervalId</b>
+					
+					</div>
+					<div class="description">
+						checks at a fixed interval whether the contents of the JSON file have changed 
+  and reloads the program if necessary
+						
+							<br />
+							<i>Defined in: </i> <a href="../symbols/src/cn_default.js.html">cn_default.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_default.js.html">cn_default.js</a>.
+						
+						
+					</div>
+					
+					
+
+						
+						
+						
+						
+
+					<hr />
+				
+					<a name="rect"> </a>
+					<div class="fixedFont">
+					
+					
+					<b>rect</b>
+					
+					</div>
+					<div class="description">
+						creates a background with a click functionality
+						
+							<br />
+							<i>Defined in: </i> <a href="../symbols/src/cn_default.js.html">cn_default.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_default.js.html">cn_default.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_default.js.html">cn_default.js</a>.
+						
+						
+					</div>
+					
+					
+
+						
+						
+						
+						
+
+					<hr />
+				
+					<a name="svg_legend"> </a>
+					<div class="fixedFont">
+					
+					
+					<b>svg_legend</b>
+					
+					</div>
+					<div class="description">
+						creates svg object (legend) with text, circles and arrows
+						
+							<br />
+							<i>Defined in: </i> <a href="../symbols/src/cn_default.js.html">cn_default.js</a>.
+						
+						
+					</div>
+					
+					
+
+						
+						
+						
+						
+
+					<hr />
+				
+					<a name="to_remove"> </a>
+					<div class="fixedFont">
+					
+					
+					<b>to_remove</b>
+					
+					</div>
+					<div class="description">
+						saves highlighted node for click functionality
+						
+							<br />
+							<i>Defined in: </i> <a href="../symbols/src/cn_default.js.html">cn_default.js</a>.
+						
+						
+					</div>
+					
+					
+
+						
+						
+						
+						
+
+					<hr />
+				
+					<a name="zoom"> </a>
+					<div class="fixedFont">
+					
+					
+					<b>zoom</b>
+					
+					</div>
+					<div class="description">
+						creates a new zoom behavior
+						
+							<br />
+							<i>Defined in: </i> <a href="../symbols/src/cn_default.js.html">cn_default.js</a>.
+						
+						
+					</div>
+					
+					
+
+						
+						
+						
+						
+
+					
+				
+			
+
+<!-- ============================== method details ========================= -->		
+			
+				<div class="sectionTitle">
+					Method Detail
+				</div>
+				
+					<a name="click_background"> </a>
+					<div class="fixedFont">
+					
+					
+					<b>click_background</b>()
+					
+					</div>
+					<div class="description">
+						removes the highlights of the circles and their links
+						
+							<br />
+							<i>Defined in: </i> <a href="../symbols/src/cn_default.js.html">cn_default.js</a>.
+						
+						
+					</div>
+					
+					
+					
+						
+						
+						
+						
+						
+						
+						
+
+					<hr />
+				
+					<a name="click_node"> </a>
+					<div class="fixedFont">
+					
+					
+					<b>click_node</b>(node)
+					
+					</div>
+					<div class="description">
+						sets color of circle and its links to black and removes the previous highlights
+displays overview info of node in textbox
+						
+							<br />
+							<i>Defined in: </i> <a href="../symbols/src/cn_default.js.html">cn_default.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="display_abstract"> </a>
+					<div class="fixedFont">
+					
+					
+					<b>display_abstract</b>(a-)
+					
+					</div>
+					<div class="description">
+						displays abstract in textbox if a is true, overview text otherwise
+						
+							<br />
+							<i>Defined in: </i> <a href="../symbols/src/cn_default.js.html">cn_default.js</a>.
+						
+						
+					</div>
+					
+					
+					
+						
+							<dl class="detailList">
+							<dt class="heading">Parameters:</dt>
+							
+								<dt>
+									<span class="light fixedFont">{bool}</span> <b>a-</b>
+									
+								</dt>
+								<dd>bool</dd>
+							
+							</dl>
+						
+						
+						
+						
+						
+						
+						
+
+					<hr />
+				
+					<a name="dragged_node"> </a>
+					<div class="fixedFont">
+					
+					
+					<b>dragged_node</b>(node)
+					
+					</div>
+					<div class="description">
+						applies dragging to the node
+						
+							<br />
+							<i>Defined in: </i> <a href="../symbols/src/cn_default.js.html">cn_default.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="fix_nodes"> </a>
+					<div class="fixedFont">
+					
+					
+					<b>fix_nodes</b>(this_node)
+					
+					</div>
+					<div class="description">
+						fix positions of all nodes except for the current node
+						
+							<br />
+							<i>Defined in: </i> <a href="../symbols/src/cn_default.js.html">cn_default.js</a>.
+						
+						
+					</div>
+					
+					
+					
+						
+							<dl class="detailList">
+							<dt class="heading">Parameters:</dt>
+							
+								<dt>
+									<span class="light fixedFont">{object}</span> <b>this_node</b>
+									
+								</dt>
+								<dd>- node</dd>
+							
+							</dl>
+						
+						
+						
+						
+						
+						
+						
+
+					<hr />
+				
+					<a name="get_svg_string"> </a>
+					<div class="fixedFont">
+					
+					
+					<b>get_svg_string</b>(svgNode)
+					
+					</div>
+					<div class="description">
+						generate svgString
+						
+							<br />
+							<i>Defined in: </i> <a href="../symbols/src/cn_default.js.html">cn_default.js</a>.
+						
+						
+					</div>
+					
+					
+					
+						
+							<dl class="detailList">
+							<dt class="heading">Parameters:</dt>
+							
+								<dt>
+									<span class="light fixedFont">{object}</span> <b>svgNode</b>
+									
+								</dt>
+								<dd>- node</dd>
+							
+							</dl>
+						
+						
+						
+						
+						
+						
+						
+
+					<hr />
+				
+					<a name="handle_tick"> </a>
+					<div class="fixedFont">
+					
+					
+					<b>handle_tick</b>()
+					
+					</div>
+					<div class="description">
+						updates the positions of the links and nodes
+						
+							<br />
+							<i>Defined in: </i> <a href="../symbols/src/cn_default.js.html">cn_default.js</a>.
+						
+						
+					</div>
+					
+					
+					
+						
+						
+						
+						
+						
+						
+						
+
+					<hr />
+				
+					<a name="handle_transformation"> </a>
+					<div class="fixedFont">
+					
+					
+					<b>handle_transformation</b>()
+					
+					</div>
+					<div class="description">
+						applies the transformation (zooming or dragging) to the g element
+						
+							<br />
+							<i>Defined in: </i> <a href="../symbols/src/cn_default.js.html">cn_default.js</a>.
+						
+						
+					</div>
+					
+					
+					
+						
+						
+						
+						
+						
+						
+						
+
+					<hr />
+				
+					<a name="highlight_button"> </a>
+					<div class="fixedFont">
+					
+					
+					<b>highlight_button</b>(btn)
+					
+					</div>
+					<div class="description">
+						sets color of btn to dark gray
+						
+							<br />
+							<i>Defined in: </i> <a href="../symbols/src/cn_default.js.html">cn_default.js</a>.
+						
+						
+					</div>
+					
+					
+					
+						
+							<dl class="detailList">
+							<dt class="heading">Parameters:</dt>
+							
+								<dt>
+									<span class="light fixedFont">{object}</span> <b>btn</b>
+									
+								</dt>
+								<dd>- button</dd>
+							
+							</dl>
+						
+						
+						
+						
+						
+						
+						
+
+					<hr />
+				
+					<a name="is_link_for_node"> </a>
+					<div class="fixedFont">
+					
+					
+					<b>is_link_for_node</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_default.js.html">cn_default.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="mark_link"> </a>
+					<div class="fixedFont">
+					
+					
+					<b>mark_link</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_default.js.html">cn_default.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="reset_button_highlight"> </a>
+					<div class="fixedFont">
+					
+					
+					<b>reset_button_highlight</b>()
+					
+					</div>
+					<div class="description">
+						sets color of all buttons to default light gray
+						
+							<br />
+							<i>Defined in: </i> <a href="../symbols/src/cn_default.js.html">cn_default.js</a>.
+						
+						
+					</div>
+					
+					
+					
+						
+						
+						
+						
+						
+						
+						
+
+					<hr />
+				
+					<a name="reset_view"> </a>
+					<div class="fixedFont">
+					
+					
+					<b>reset_view</b>()
+					
+					</div>
+					<div class="description">
+						transforms svg so that the zoom and drag is reset
+						
+							<br />
+							<i>Defined in: </i> <a href="../symbols/src/cn_default.js.html">cn_default.js</a>.
+						
+						
+					</div>
+					
+					
+					
+						
+						
+						
+						
+						
+						
+						
+
+					<hr />
+				
+					<a name="save_svg"> </a>
+					<div class="fixedFont">
+					
+					
+					<b>save_svg</b>()
+					
+					</div>
+					<div class="description">
+						save svg as png
+						
+							<br />
+							<i>Defined in: </i> <a href="../symbols/src/cn_default.js.html">cn_default.js</a>.
+						
+						
+					</div>
+					
+					
+					
+						
+						
+						
+						
+						
+						
+						
+
+					<hr />
+				
+					<a name="self_citation"> </a>
+					<div class="fixedFont">
+					
+					
+					<b>self_citation</b>(source, target)
+					
+					</div>
+					<div class="description">
+						returns true if journals have a common author (self-citation)
+						
+							<br />
+							<i>Defined in: </i> <a href="../symbols/src/cn_default.js.html">cn_default.js</a>.
+						
+						
+					</div>
+					
+					
+					
+						
+							<dl class="detailList">
+							<dt class="heading">Parameters:</dt>
+							
+								<dt>
+									<span class="light fixedFont">{object}</span> <b>source</b>
+									
+								</dt>
+								<dd>- node</dd>
+							
+								<dt>
+									<span class="light fixedFont">{object}</span> <b>target</b>
+									
+								</dt>
+								<dd>- node</dd>
+							
+							</dl>
+						
+						
+						
+						
+						
+						
+						
+
+					<hr />
+				
+					<a name="start_drag_node"> </a>
+					<div class="fixedFont">
+					
+					
+					<b>start_drag_node</b>(node)
+					
+					</div>
+					<div class="description">
+						initializes dragging of the node
+						
+							<br />
+							<i>Defined in: </i> <a href="../symbols/src/cn_default.js.html">cn_default.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="svg_string_to_image"> </a>
+					<div class="fixedFont">
+					
+					
+					<b>svg_string_to_image</b>(svgString, width, height, format, callback)
+					
+					</div>
+					<div class="description">
+						convert svgString to image and export it
+						
+							<br />
+							<i>Defined in: </i> <a href="../symbols/src/cn_default.js.html">cn_default.js</a>.
+						
+						
+					</div>
+					
+					
+					
+						
+							<dl class="detailList">
+							<dt class="heading">Parameters:</dt>
+							
+								<dt>
+									<span class="light fixedFont">{object}</span> <b>svgString</b>
+									
+								</dt>
+								<dd>- svgString</dd>
+							
+								<dt>
+									<span class="light fixedFont">{object}</span> <b>width</b>
+									
+								</dt>
+								<dd>- width of image</dd>
+							
+								<dt>
+									<span class="light fixedFont">{object}</span> <b>height</b>
+									
+								</dt>
+								<dd>- height of image</dd>
+							
+								<dt>
+									<span class="light fixedFont">{object}</span> <b>format</b>
+									
+								</dt>
+								<dd>- format to save image in</dd>
+							
+								<dt>
+									<span class="light fixedFont">{object}</span> <b>callback</b>
+									
+								</dt>
+								<dd>- callback function</dd>
+							
+							</dl>
+						
+						
+						
+						
+						
+						
+						
+
+					<hr />
+				
+					<a name="textbox_content"> </a>
+					<div class="fixedFont">
+					
+					
+					<b>textbox_content</b>(node)
+					
+					</div>
+					<div class="description">
+						saves text for overview and abstract of node
+outputs node info to textbox
+						
+							<br />
+							<i>Defined in: </i> <a href="../symbols/src/cn_default.js.html">cn_default.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="update"> </a>
+					<div class="fixedFont">
+					
+					
+					<b>update</b>(nodes, links)
+					
+					</div>
+					<div class="description">
+						calls update functions for links and nodes
+adds the nodes, links and tick functionality to the simulation
+						
+							<br />
+							<i>Defined in: </i> <a href="../symbols/src/cn_default.js.html">cn_default.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="update_links"> </a>
+					<div class="fixedFont">
+					
+					
+					<b>update_links</b>(links)
+					
+					</div>
+					<div class="description">
+						initializes and shows links (edges)
+						
+							<br />
+							<i>Defined in: </i> <a href="../symbols/src/cn_default.js.html">cn_default.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="update_marker"> </a>
+					<div class="fixedFont">
+					
+					
+					<b>update_marker</b>(color, target)
+					
+					</div>
+					<div class="description">
+						creates arrowhead and returns its url
+						
+							<br />
+							<i>Defined in: </i> <a href="../symbols/src/cn_default.js.html">cn_default.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>
+							
+								<dt>
+									<span class="light fixedFont">{string}</span> <b>target</b>
+									
+								</dt>
+								<dd>- target node</dd>
+							
+							</dl>
+						
+						
+						
+						
+						
+						
+						
+
+					<hr />
+				
+					<a name="update_nodes"> </a>
+					<div class="fixedFont">
+					
+					
+					<b>update_nodes</b>(nodes)
+					
+					</div>
+					<div class="description">
+						initializes and shows nodes with circles, texts and a click functionality
+creates a new drag behavior and applies it to the circles
+						
+							<br />
+							<i>Defined in: </i> <a href="../symbols/src/cn_default.js.html">cn_default.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="zoom_to_graph"> </a>
+					<div class="fixedFont">
+					
+					
+					<b>zoom_to_graph</b>()
+					
+					</div>
+					<div class="description">
+						transforms svg so that the zoom is adapted to the size of the graph
+						
+							<br />
+							<i>Defined in: </i> <a href="../symbols/src/cn_default.js.html">cn_default.js</a>.
+						
+						
+					</div>
+					
+					
+					
+						
+						
+						
+						
+						
+						
+						
+
+					
+				
+			
+			
+<!-- ============================== 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 Jan 28 2022 12:32:45 GMT+0100 (MEZ)
+		</div>
+	</body>
+</html>
diff --git a/assets/documentation/documentation_cn_default/symbols/src/cn_default.js.html b/assets/documentation/documentation_cn_default/symbols/src/cn_default.js.html
new file mode 100644
index 0000000000000000000000000000000000000000..d9ec45a02c164f2cb350665c07e4180a501c3922
--- /dev/null
+++ b/assets/documentation/documentation_cn_default/symbols/src/cn_default.js.html
@@ -0,0 +1,581 @@
+<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="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">handle_transformation</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.graph"</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><span class="NAME">zoom_perc</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'> 15</span> 
+<span class='line'> 16</span> </span><span class="COMM">/**
+<span class='line'> 17</span> * scale functions that return y coordinate/color of node depending on group
+<span class='line'> 18</span> */</span><span class="WHIT">
+<span class='line'> 19</span> </span><span class="KEYW">var</span><span class="WHIT"> </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'> 20</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">"Citedby"</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">"Reference"</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">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">'#7fa9d4'</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'> 22</span> </span><span class="NAME">y_scale</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'> 23</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">"Citedby"</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">"Reference"</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">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'> 25</span> 
+<span class='line'> 26</span> </span><span class="COMM">/**
+<span class='line'> 27</span> * creates node object and (default) radius
+<span class='line'> 28</span> */</span><span class="WHIT">
+<span class='line'> 29</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'> 30</span> </span><span class="NAME">r</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">10</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'> 31</span> 
+<span class='line'> 32</span> </span><span class="COMM">/**
+<span class='line'> 33</span> * saves highlighted node for click functionality
+<span class='line'> 34</span> */</span><span class="WHIT">
+<span class='line'> 35</span> </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">to_remove</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'> 36</span> 
+<span class='line'> 37</span> </span><span class="COMM">/**
+<span class='line'> 38</span> * creates link object
+<span class='line'> 39</span> */</span><span class="WHIT">
+<span class='line'> 40</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'> 41</span> 
+<span class='line'> 42</span> </span><span class="COMM">/**
+<span class='line'> 43</span> * creates a background with a click functionality
+<span class='line'> 44</span> */</span><span class="WHIT">
+<span class='line'> 45</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'> 46</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'> 47</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'> 48</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'> 49</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'> 50</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'> 51</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">click_background</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'> 52</span> 
+<span class='line'> 53</span> </span><span class="COMM">/**
+<span class='line'> 54</span> * creates svg object (legend) with text, circles and arrows
+<span class='line'> 55</span> */</span><span class="WHIT">
+<span class='line'> 56</span> </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">svg_legend</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.legendsvg"</span><span class="PUNC">)</span><span class="PUNC">,</span><span class="WHIT">
+<span class='line'> 57</span> </span><span class="NAME">legend_position</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">[</span><span class="NUMB">65</span><span class="PUNC">,</span><span class="NUMB">95</span><span class="PUNC">,</span><span class="NUMB">125</span><span class="PUNC">]</span><span class="PUNC">,</span><span class="WHIT">
+<span class='line'> 58</span> </span><span class="NAME">arrow_legend_position</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">[</span><span class="NUMB">0</span><span class="PUNC">,</span><span class="NUMB">25</span><span class="PUNC">]</span><span class="PUNC">,</span><span class="WHIT">
+<span class='line'> 59</span> </span><span class="NAME">arrow_group_names</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">[</span><span class="STRN">"Citation"</span><span class="PUNC">,</span><span class="STRN">"Self-Citation"</span><span class="PUNC">]</span><span class="PUNC">,</span><span class="WHIT">
+<span class='line'> 60</span> </span><span class="NAME">group_names</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">[</span><span class="STRN">"Cited-by"</span><span class="PUNC">,</span><span class="STRN">"Input"</span><span class="PUNC">,</span><span class="STRN">"Reference"</span><span class="PUNC">]</span><span class="PUNC">,</span><span class="WHIT">
+<span class='line'> 61</span> </span><span class="NAME">line_type</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'> 62</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">"line"</span><span class="PUNC">,</span><span class="STRN">"dotted"</span><span class="PUNC">]</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">range</span><span class="PUNC">(</span><span class="PUNC">[</span><span class="PUNC">(</span><span class="STRN">"8,0"</span><span class="PUNC">)</span><span class="PUNC">,</span><span class="PUNC">(</span><span class="STRN">"8,8"</span><span class="PUNC">)</span><span class="PUNC">]</span><span class="PUNC">)</span><span class="PUNC">,</span><span class="WHIT">
+<span class='line'> 64</span> </span><span class="NAME">text_info</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'> 65</span> </span><span class="NAME">text_abstract</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'> 66</span> </span><span class="WHIT">    
+<span class='line'> 67</span> </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">legend</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">svg_legend.selectAll</span><span class="PUNC">(</span><span class="STRN">".legend"</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">data</span><span class="PUNC">(</span><span class="NAME">legend_position</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">enter</span><span class="PUNC">(</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">append</span><span class="PUNC">(</span><span class="STRN">"g"</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">"class"</span><span class="PUNC">,</span><span class="STRN">"legend"</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">"transform"</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="NAME">i</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(0,"</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">d</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><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'> 73</span> </span><span class="WHIT">    
+<span class='line'> 74</span> </span><span class="NAME">legend.append</span><span class="PUNC">(</span><span class="STRN">"text"</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">"x"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NUMB">80</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">"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'> 77</span> </span><span class="WHIT">    </span><span class="PUNC">.</span><span class="NAME">attr</span><span class="PUNC">(</span><span class="STRN">"dy"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">".35em"</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">style</span><span class="PUNC">(</span><span class="STRN">"text-anchor"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">"start"</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'> 79</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="PUNC">(</span><span class="NAME">d</span><span class="PUNC">,</span><span class="NAME">i</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">group_names</span><span class="PUNC">[</span><span class="NAME">i</span><span class="PUNC">]</span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'> 80</span> </span><span class="WHIT">    
+<span class='line'> 81</span> </span><span class="NAME">legend.append</span><span class="PUNC">(</span><span class="STRN">"circle"</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">"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'> 83</span> </span><span class="WHIT">    </span><span class="PUNC">.</span><span class="NAME">attr</span><span class="PUNC">(</span><span class="STRN">"cx"</span><span class="PUNC">,</span><span class="NUMB">30</span><span class="PUNC">-</span><span class="NAME">r</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">style</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="PUNC">;</span><span class="WHIT">
+<span class='line'> 85</span> </span><span class="WHIT">        
+<span class='line'> 86</span> </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">legend_arrow</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">svg_legend.selectAll</span><span class="PUNC">(</span><span class="STRN">".legendarr"</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'> 87</span> </span><span class="WHIT">    </span><span class="PUNC">.</span><span class="NAME">data</span><span class="PUNC">(</span><span class="NAME">arrow_legend_position</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'> 88</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'> 89</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'> 90</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="STRN">"legendarr"</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">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="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(0,"</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">d</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'> 92</span> </span><span class="WHIT">    
+<span class='line'> 93</span> </span><span class="NAME">legend_arrow.append</span><span class="PUNC">(</span><span class="STRN">"line"</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">attr</span><span class="PUNC">(</span><span class="STRN">"x1"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NUMB">10</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">"x2"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NUMB">50</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">attr</span><span class="PUNC">(</span><span class="STRN">"y1"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NUMB">10</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">attr</span><span class="PUNC">(</span><span class="STRN">"y2"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NUMB">10</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-dasharray"</span><span class="PUNC">,</span><span class="NAME">line_type</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">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'>100</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'>101</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">'none'</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>102</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">update_marker</span><span class="PUNC">(</span><span class="STRN">'#999'</span><span class="PUNC">,</span><span class="KEYW">this</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">legend_arrow.append</span><span class="PUNC">(</span><span class="STRN">"text"</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>105</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">80</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">attr</span><span class="PUNC">(</span><span class="STRN">"y"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NUMB">10</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>107</span> </span><span class="WHIT">    </span><span class="PUNC">.</span><span class="NAME">attr</span><span class="PUNC">(</span><span class="STRN">"dy"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">".35em"</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>108</span> </span><span class="WHIT">    </span><span class="PUNC">.</span><span class="NAME">style</span><span class="PUNC">(</span><span class="STRN">"text-anchor"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">"start"</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">text</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="NAME">i</span><span class="PUNC">)</span><span class="PUNC">{</span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">arrow_group_names</span><span class="PUNC">[</span><span class="NAME">i</span><span class="PUNC">]</span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>110</span> 
+<span class='line'>111</span> </span><span class="COMM">/**
+<span class='line'>112</span> * creates a new simulation
+<span class='line'>113</span> * updates the positions of the links and nodes when the 
+<span class='line'>114</span>   state of the layout has changed (simulation has advanced by a tick)
+<span class='line'>115</span> */</span><span class="WHIT">
+<span class='line'>116</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'>117</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">50</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">strength</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'>119</span> </span><span class="WHIT">            </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">d.group</span><span class="WHIT"> </span><span class="PUNC">==</span><span class="WHIT"> </span><span class="STRN">"Input"</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">;</span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>120</span> </span><span class="WHIT">            </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NUMB">5</span><span class="PUNC">;</span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>121</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>122</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="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'>123</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">d.group</span><span class="WHIT"> </span><span class="PUNC">==</span><span class="WHIT"> </span><span class="STRN">"Input"</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NUMB">70</span><span class="PUNC">;</span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>124</span> </span><span class="WHIT">        </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NUMB">70</span><span class="PUNC">;</span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>125</span> </span><span class="WHIT">        </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">0.5</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">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="NUMB">0.001</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">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="NUMB">20</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="NUMB">20</span><span class="PUNC">)</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">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="WHIT">
+<span class='line'>129</span> </span><span class="WHIT">        </span><span class="PUNC">.</span><span class="NAME">strength</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'>130</span> </span><span class="WHIT">            </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">d.group</span><span class="WHIT"> </span><span class="PUNC">==</span><span class="WHIT"> </span><span class="STRN">"Input"</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NUMB">300</span><span class="PUNC">;</span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>131</span> </span><span class="WHIT">            </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NUMB">200</span><span class="PUNC">;</span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>132</span> </span><span class="WHIT">        </span><span class="PUNC">}</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">y_scale</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'>133</span> </span><span class="WHIT">    </span><span class="PUNC">.</span><span class="NAME">alpha</span><span class="PUNC">(</span><span class="NUMB">0.004</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">velocityDecay</span><span class="PUNC">(</span><span class="NUMB">0.65</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">on</span><span class="PUNC">(</span><span class="STRN">"end"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">zoom_to_graph</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>136</span> 
+<span class='line'>137</span> </span><span class="COMM">/**
+<span class='line'>138</span> * creates group element
+<span class='line'>139</span> */</span><span class="WHIT">
+<span class='line'>140</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'>141</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'>142</span> 
+<span class='line'>143</span> </span><span class="COMM">/**
+<span class='line'>144</span> * loads JSON data and calls the update function
+<span class='line'>145</span> */</span><span class="WHIT">
+<span class='line'>146</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="NAME">success</span><span class="PUNC">,</span><span class="NAME">failure</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>147</span> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="NAME">success</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'>148</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'>149</span> </span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>150</span> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="NAME">failure</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'>151</span> </span><span class="WHIT">    </span><span class="NAME">localStorage.setItem</span><span class="PUNC">(</span><span class="STRN">"oldjson"</span><span class="PUNC">,</span><span class="STRN">"keineJson"</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>152</span> </span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>153</span> 
+<span class='line'>154</span> </span><span class="COMM">/**
+<span class='line'>155</span> * checks at a fixed interval whether the contents of the JSON file have changed 
+<span class='line'>156</span>   and reloads the program if necessary
+<span class='line'>157</span> */</span><span class="WHIT">
+<span class='line'>158</span> </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">intervalId</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">window.setInterval</span><span class="PUNC">(</span><span class="NAME">check_if_json_changed</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NUMB">500</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>159</span> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="NAME">check_if_json_changed</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
+<span class='line'>160</span> </span><span class="WHIT">    </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'>161</span> </span><span class="WHIT">        </span><span class="NAME">newjson_string</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">JSON.stringify</span><span class="PUNC">(</span><span class="NAME">graph</span><span class="PUNC">)</span><span class="WHIT"> 
+<span class='line'>162</span>         </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">newjson</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">CryptoJS.MD5</span><span class="PUNC">(</span><span class="NAME">newjson_string</span><span class="PUNC">)</span><span class="PUNC">.</span><span class="NAME">toString</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="NAME">oldjson</span><span class="PUNC">=</span><span class="NAME">localStorage.getItem</span><span class="PUNC">(</span><span class="STRN">"oldjson"</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>164</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="PUNC">(</span><span class="NAME">newjson</span><span class="WHIT"> </span><span class="PUNC">!==</span><span class="WHIT"> </span><span class="NAME">oldjson</span><span class="PUNC">)</span><span class="PUNC">{</span><span class="WHIT">
+<span class='line'>165</span> </span><span class="WHIT">            </span><span class="NAME">localStorage.setItem</span><span class="PUNC">(</span><span class="STRN">"oldjson"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">newjson</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>166</span> </span><span class="WHIT">            </span><span class="NAME">window.location.reload</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>167</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>168</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>169</span> </span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>170</span> 
+<span class='line'>171</span> </span><span class="COMM">/**
+<span class='line'>172</span> * calls update functions for links and nodes
+<span class='line'>173</span> * adds the nodes, links and tick functionality to the simulation
+<span class='line'>174</span> * @param {object} nodes - nodes
+<span class='line'>175</span> * @param {object} links - links
+<span class='line'>176</span> */</span><span class="WHIT">
+<span class='line'>177</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'>178</span> </span><span class="WHIT">    </span><span class="NAME">update_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'>179</span> </span><span class="WHIT">    </span><span class="NAME">update_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'>180</span> </span><span class="WHIT">    
+<span class='line'>181</span>     </span><span class="NAME">simulation.nodes</span><span class="PUNC">(</span><span class="NAME">nodes</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>182</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">handle_tick</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>183</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'>184</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'>185</span> </span><span class="WHIT">    
+<span class='line'>186</span>     </span><span class="NAME">link.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">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">update_marker</span><span class="PUNC">(</span><span class="STRN">"#999"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">d.target</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="PUNC">}</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>187</span> </span><span class="WHIT">        </span><span class="PUNC">.</span><span class="NAME">style</span><span class="PUNC">(</span><span class="STRN">"stroke-dasharray"</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">self_citation</span><span class="PUNC">(</span><span class="NAME">d.source</span><span class="PUNC">,</span><span class="NAME">d.target</span><span class="PUNC">)</span><span class="PUNC">?</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="STRN">"8,8"</span><span class="PUNC">)</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="STRN">"1,0"</span><span class="PUNC">)</span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>188</span> </span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>189</span> 
+<span class='line'>190</span> </span><span class="COMM">/**
+<span class='line'>191</span> * initializes and shows links (edges)
+<span class='line'>192</span> * @param {object} links - links
+<span class='line'>193</span> */</span><span class="WHIT">
+<span class='line'>194</span> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="NAME">update_links</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'>195</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'>196</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'>197</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'>198</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'>199</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'>200</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'>201</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'>202</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'>203</span> </span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>204</span> 
+<span class='line'>205</span> </span><span class="COMM">/**
+<span class='line'>206</span> * initializes and shows nodes with circles, texts and a click functionality
+<span class='line'>207</span> * creates a new drag behavior and applies it to the circles
+<span class='line'>208</span> * @param {object} nodes - nodes
+<span class='line'>209</span> */</span><span class="WHIT">
+<span class='line'>210</span> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="NAME">update_nodes</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'>211</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'>212</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'>213</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'>214</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'>215</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'>216</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'>217</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">start_drag_node</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>218</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_node</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>219</span> </span><span class="WHIT">        </span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>220</span> 
+<span class='line'>221</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'>222</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'>223</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="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="NUMB">1.5</span><span class="PUNC">*</span><span class="NAME">r</span><span class="PUNC">+</span><span class="NAME">d.citations</span><span class="PUNC">*</span><span class="NUMB">0.15</span><span class="PUNC">}</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>224</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'>225</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">click_node</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>226</span> 
+<span class='line'>227</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'>228</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'>229</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'>230</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'>231</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">const</span><span class="WHIT"> </span><span class="NAME">first_author</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">d.author</span><span class="PUNC">[</span><span class="NUMB">0</span><span class="PUNC">]</span><span class="PUNC">.</span><span class="NAME">split</span><span class="PUNC">(</span><span class="STRN">" "</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>232</span> </span><span class="WHIT">        </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">first_author</span><span class="PUNC">[</span><span class="NAME">first_author.length</span><span class="PUNC">-</span><span class="NUMB">1</span><span class="PUNC">]</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">on</span><span class="PUNC">(</span><span class="STRN">'click'</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">click_node</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>234</span> </span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>235</span> 
+<span class='line'>236</span> </span><span class="COMM">/**
+<span class='line'>237</span> * creates arrowhead and returns its url
+<span class='line'>238</span> * @param {string} color - color of arrowhead
+<span class='line'>239</span> * @param {string} target - target node
+<span class='line'>240</span> */</span><span class="WHIT">
+<span class='line'>241</span> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="NAME">update_marker</span><span class="PUNC">(</span><span class="NAME">color</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">target</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
+<span class='line'>242</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">radius</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">1.5</span><span class="PUNC">*</span><span class="NAME">r</span><span class="PUNC">+</span><span class="NAME">target.citations</span><span class="PUNC">*</span><span class="NUMB">0.15</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>243</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="WHIT">
+<span class='line'>244</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="NAME">radius</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>245</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'>246</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">radius</span><span class="PUNC">+</span><span class="NUMB">9.5</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>247</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'>248</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'>249</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'>250</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'>251</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'>252</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'>253</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'>254</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="WHIT">
+<span class='line'>255</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'>256</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="NAME">radius</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'>257</span> </span><span class="PUNC">}</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> * sets color of circle and its links to black and removes the previous highlights
+<span class='line'>261</span> * displays overview info of node in textbox
+<span class='line'>262</span> * @param {object} node - node
+<span class='line'>263</span> */</span><span class="WHIT">
+<span class='line'>264</span> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="NAME">click_node</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'>265</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">raise</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>266</span> </span><span class="WHIT">    </span><span class="NAME">fix_nodes</span><span class="PUNC">(</span><span class="NAME">node</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>267</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="PUNC">(</span><span class="NAME">to_remove</span><span class="PUNC">)</span><span class="PUNC">{</span><span class="WHIT">
+<span class='line'>268</span> </span><span class="WHIT">        </span><span class="NAME">d3.select</span><span class="PUNC">(</span><span class="NAME">to_remove</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'>269</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>270</span> </span><span class="WHIT">    </span><span class="NAME">to_remove</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'>271</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'>272</span> </span><span class="WHIT">    </span><span class="NAME">mark_link</span><span class="PUNC">(</span><span class="NAME">node</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>273</span> </span><span class="WHIT">    </span><span class="NAME">textbox_content</span><span class="PUNC">(</span><span class="NAME">node</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>274</span> </span><span class="WHIT">    </span><span class="NAME">reset_button_highlight</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>275</span> </span><span class="WHIT">    </span><span class="NAME">highlight_button</span><span class="PUNC">(</span><span class="STRN">"overview"</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>276</span> </span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>277</span> 
+<span class='line'>278</span> </span><span class="COMM">/**
+<span class='line'>279</span> * removes the highlights of the circles and their links
+<span class='line'>280</span> */</span><span class="WHIT">
+<span class='line'>281</span> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="NAME">click_background</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
+<span class='line'>282</span> </span><span class="WHIT">    </span><span class="NAME">fix_nodes</span><span class="PUNC">(</span><span class="NAME">node</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>283</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'>284</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'>285</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'>286</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">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">update_marker</span><span class="PUNC">(</span><span class="STRN">'#999'</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">d.target</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="PUNC">}</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>287</span> </span><span class="WHIT">    </span><span class="NAME">text_abstract</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'>288</span> </span><span class="WHIT">    </span><span class="NAME">text_info</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'>289</span> </span><span class="WHIT">    </span><span class="NAME">reset_button_highlight</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>290</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'>291</span> </span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>292</span> 
+<span class='line'>293</span> </span><span class="COMM">/**
+<span class='line'>294</span> * returns true if journals have a common author (self-citation)
+<span class='line'>295</span> * @param {object} source - node
+<span class='line'>296</span> * @param {object} target - node
+<span class='line'>297</span> */</span><span class="WHIT">
+<span class='line'>298</span> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="NAME">self_citation</span><span class="PUNC">(</span><span class="NAME">source</span><span class="PUNC">,</span><span class="NAME">target</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
+<span class='line'>299</span> </span><span class="WHIT">    </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">source.author.some</span><span class="PUNC">(</span><span class="NAME">item</span><span class="PUNC">=</span><span class="PUNC">></span><span class="NAME">target.author.includes</span><span class="PUNC">(</span><span class="NAME">item</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>300</span> </span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>301</span> 
+<span class='line'>302</span> </span><span class="COMM">/**
+<span class='line'>303</span> * sets color of link (line and arrowhead) to black if it is directly connected to node
+<span class='line'>304</span> * and to grey otherwise
+<span class='line'>305</span> * @param {object} node - node
+<span class='line'>306</span> */</span><span class="WHIT">
+<span class='line'>307</span> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="NAME">mark_link</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'>308</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'>309</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'>310</span> </span><span class="WHIT">            </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">is_link_for_node</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">"#DEDEDE"</span><span class="PUNC">;</span><span class="PUNC">}</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>311</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'>312</span> </span><span class="WHIT">            </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">is_link_for_node</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">update_marker</span><span class="PUNC">(</span><span class="STRN">'#000000'</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">o.target</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">update_marker</span><span class="PUNC">(</span><span class="STRN">'#DEDEDE'</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">o.target</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="PUNC">}</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>313</span> </span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>314</span> 
+<span class='line'>315</span> </span><span class="COMM">/**
+<span class='line'>316</span> * returns true if link is directly connected to node and false if it is not
+<span class='line'>317</span> * @param {object} node - node
+<span class='line'>318</span> * @param {object} link - link
+<span class='line'>319</span> */</span><span class="WHIT">
+<span class='line'>320</span> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="NAME">is_link_for_node</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="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
+<span class='line'>321</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'>322</span> </span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>323</span> 
+<span class='line'>324</span> </span><span class="COMM">/**
+<span class='line'>325</span> * saves text for overview and abstract of node
+<span class='line'>326</span> * outputs node info to textbox
+<span class='line'>327</span> * @param {object} node - node
+<span class='line'>328</span> */</span><span class="WHIT">
+<span class='line'>329</span> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="NAME">textbox_content</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'>330</span> </span><span class="WHIT">    </span><span class="NAME">authors</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">node.author</span><span class="PUNC">[</span><span class="NUMB">0</span><span class="PUNC">]</span><span class="WHIT">
+<span class='line'>331</span> </span><span class="WHIT">    </span><span class="KEYW">for</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">i</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">1</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">i</span><span class="WHIT"> </span><span class="PUNC">&lt;</span><span class="WHIT"> </span><span class="NAME">node.author.length</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">i</span><span class="PUNC">++</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
+<span class='line'>332</span> </span><span class="WHIT">        </span><span class="NAME">authors</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="STRN">", "</span><span class="PUNC">+</span><span class="NAME">node.author</span><span class="PUNC">[</span><span class="NAME">i</span><span class="PUNC">]</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>333</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>334</span> </span><span class="WHIT">    </span><span class="NAME">text_info</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">'&lt;/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'>335</span> </span><span class="WHIT">    </span><span class="STRN">'&lt;/br>'</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="STRN">'&lt;/br>'</span><span class="PUNC">+</span><span class="STRN">"Author:"</span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">'&lt;/br>'</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="NAME">authors</span><span class="PUNC">+</span><span class="STRN">'&lt;/br>'</span><span class="PUNC">+</span><span class="STRN">'&lt;/br>'</span><span class="PUNC">+</span><span class="STRN">"Date:"</span><span class="PUNC">+</span><span class="STRN">'&lt;/br>'</span><span class="WHIT">
+<span class='line'>336</span> </span><span class="WHIT">    </span><span class="PUNC">+</span><span class="NAME">node.year</span><span class="PUNC">+</span><span class="STRN">'&lt;/br>'</span><span class="PUNC">+</span><span class="STRN">'&lt;/br>'</span><span class="PUNC">+</span><span class="STRN">"Journal:"</span><span class="PUNC">+</span><span class="STRN">'&lt;/br>'</span><span class="PUNC">+</span><span class="NAME">node.journal</span><span class="PUNC">+</span><span class="STRN">'&lt;/br>'</span><span class="PUNC">+</span><span class="STRN">'&lt;/br>'</span><span class="PUNC">+</span><span class="STRN">"DOI:"</span><span class="WHIT">
+<span class='line'>337</span> </span><span class="WHIT">    </span><span class="PUNC">+</span><span class="STRN">'&lt;/br>'</span><span class="PUNC">+</span><span class="NAME">node.doi</span><span class="PUNC">+</span><span class="STRN">'&lt;/br>'</span><span class="PUNC">+</span><span class="STRN">'&lt;/br>'</span><span class="PUNC">+</span><span class="STRN">"Citations:"</span><span class="WHIT">
+<span class='line'>338</span> </span><span class="WHIT">    </span><span class="PUNC">+</span><span class="STRN">'&lt;/br>'</span><span class="PUNC">+</span><span class="NAME">node.citations</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>339</span> </span><span class="WHIT">    </span><span class="NAME">text_abstract</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">node.abstract</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>340</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="NAME">text_info</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>341</span> </span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>342</span> 
+<span class='line'>343</span> </span><span class="COMM">/**
+<span class='line'>344</span> * sets color of btn to dark gray
+<span class='line'>345</span> * @param {object} btn - button
+<span class='line'>346</span> */</span><span class="WHIT">
+<span class='line'>347</span> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="NAME">highlight_button</span><span class="PUNC">(</span><span class="NAME">btn</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
+<span class='line'>348</span> </span><span class="WHIT">    </span><span class="NAME">reset_button_highlight</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>349</span> </span><span class="WHIT">    </span><span class="NAME">document.getElementById</span><span class="PUNC">(</span><span class="NAME">btn</span><span class="PUNC">)</span><span class="PUNC">.</span><span class="NAME">style.background</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"#CACACA"</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>350</span> </span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>351</span> 
+<span class='line'>352</span> </span><span class="COMM">/**
+<span class='line'>353</span> * sets color of all buttons to default light gray
+<span class='line'>354</span> */</span><span class="WHIT">
+<span class='line'>355</span> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="NAME">reset_button_highlight</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
+<span class='line'>356</span> </span><span class="WHIT">    </span><span class="NAME">document.getElementById</span><span class="PUNC">(</span><span class="STRN">"overview"</span><span class="PUNC">)</span><span class="PUNC">.</span><span class="NAME">style.background</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'>357</span> </span><span class="WHIT">    </span><span class="NAME">document.getElementById</span><span class="PUNC">(</span><span class="STRN">"abstract"</span><span class="PUNC">)</span><span class="PUNC">.</span><span class="NAME">style.background</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'>358</span> </span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>359</span> 
+<span class='line'>360</span> </span><span class="COMM">/**
+<span class='line'>361</span> * displays abstract in textbox if a is true, overview text otherwise
+<span class='line'>362</span> * @param {bool} a- bool
+<span class='line'>363</span> */</span><span class="WHIT">
+<span class='line'>364</span> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="NAME">display_abstract</span><span class="PUNC">(</span><span class="NAME">a</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
+<span class='line'>365</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">text_abstract</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">text_info</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><span class="PUNC">{</span><span class="WHIT">
+<span class='line'>366</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'>367</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>368</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'>369</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">a</span><span class="WHIT"> </span><span class="PUNC">==</span><span class="WHIT"> </span><span class="KEYW">true</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
+<span class='line'>370</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="NAME">text_abstract</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>371</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>372</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'>373</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="NAME">text_info</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>374</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>375</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">   
+<span class='line'>376</span> </span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>377</span> 
+<span class='line'>378</span> </span><span class="COMM">/**
+<span class='line'>379</span> * updates the positions of the links and nodes
+<span class='line'>380</span> */</span><span class="WHIT">
+<span class='line'>381</span> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="NAME">handle_tick</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
+<span class='line'>382</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'>383</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'>384</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'>385</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'>386</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'>387</span> </span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>388</span> 
+<span class='line'>389</span> </span><span class="COMM">/**
+<span class='line'>390</span> * initializes dragging of the node
+<span class='line'>391</span> * @param {object} node - node
+<span class='line'>392</span> */</span><span class="WHIT">
+<span class='line'>393</span> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="NAME">start_drag_node</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'>394</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">raise</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>395</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'>396</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'>397</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'>398</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'>399</span> </span><span class="WHIT">    </span><span class="NAME">fix_nodes</span><span class="PUNC">(</span><span class="NAME">node</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>400</span> </span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>401</span> 
+<span class='line'>402</span> </span><span class="COMM">/**
+<span class='line'>403</span> * applies dragging to the node
+<span class='line'>404</span> * @param {object} node - node
+<span class='line'>405</span> */</span><span class="WHIT">
+<span class='line'>406</span> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="NAME">dragged_node</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'>407</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'>408</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'>409</span> </span><span class="WHIT">    </span><span class="NAME">fix_nodes</span><span class="PUNC">(</span><span class="NAME">node</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>410</span> </span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>411</span> 
+<span class='line'>412</span> </span><span class="COMM">/**
+<span class='line'>413</span> * fix positions of all nodes except for the current node
+<span class='line'>414</span> * @param {object} this_node - node
+<span class='line'>415</span> */</span><span class="WHIT">
+<span class='line'>416</span> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="NAME">fix_nodes</span><span class="PUNC">(</span><span class="NAME">this_node</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
+<span class='line'>417</span> </span><span class="WHIT">    </span><span class="NAME">node.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'>418</span> </span><span class="WHIT">      </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this_node</span><span class="WHIT"> </span><span class="PUNC">!=</span><span class="WHIT"> </span><span class="NAME">d</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
+<span class='line'>419</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.x</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>420</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.y</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>421</span> </span><span class="WHIT">      </span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>422</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>423</span> </span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>424</span> 
+<span class='line'>425</span> </span><span class="COMM">/**
+<span class='line'>426</span> * applies the transformation (zooming or dragging) to the g element
+<span class='line'>427</span> */</span><span class="WHIT">
+<span class='line'>428</span> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="NAME">handle_transformation</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
+<span class='line'>429</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'>430</span> </span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>431</span> 
+<span class='line'>432</span> </span><span class="COMM">/**
+<span class='line'>433</span> * transforms svg so that the zoom is adapted to the size of the graph
+<span class='line'>434</span> */</span><span class="WHIT">
+<span class='line'>435</span> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="NAME">zoom_to_graph</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
+<span class='line'>436</span> </span><span class="WHIT">    </span><span class="NAME">node_bounds</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">d3.selectAll</span><span class="PUNC">(</span><span class="STRN">"svg.graph"</span><span class="PUNC">)</span><span class="PUNC">.</span><span class="NAME">node</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">.</span><span class="NAME">getBBox</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>437</span> </span><span class="WHIT">    </span><span class="NAME">svg_bounds</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">"rect"</span><span class="PUNC">)</span><span class="PUNC">.</span><span class="NAME">node</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">.</span><span class="NAME">getBBox</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>438</span> 
+<span class='line'>439</span> </span><span class="WHIT">    </span><span class="NAME">perc_x</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">width</span><span class="PUNC">/</span><span class="PUNC">(</span><span class="NAME">node_bounds.width</span><span class="PUNC">+</span><span class="NUMB">100</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>440</span> </span><span class="WHIT">    </span><span class="NAME">perc_y</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="NAME">node_bounds.height</span><span class="PUNC">+</span><span class="NUMB">100</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>441</span> </span><span class="WHIT">    </span><span class="NAME">zoom_perc</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">d3.min</span><span class="PUNC">(</span><span class="PUNC">[</span><span class="NAME">perc_x</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">perc_y</span><span class="PUNC">]</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>442</span> </span><span class="WHIT">    
+<span class='line'>443</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'>444</span> </span><span class="WHIT">		</span><span class="PUNC">.</span><span class="NAME">call</span><span class="PUNC">(</span><span class="NAME">zoom.scaleBy</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">zoom_perc</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>445</span> </span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>446</span> 
+<span class='line'>447</span> </span><span class="COMM">/**
+<span class='line'>448</span> * transforms svg so that the zoom and drag is reset
+<span class='line'>449</span> */</span><span class="WHIT">
+<span class='line'>450</span> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="NAME">reset_view</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
+<span class='line'>451</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'>452</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="WHIT">
+<span class='line'>453</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'>454</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'>455</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'>456</span> </span><span class="WHIT">		</span><span class="PUNC">.</span><span class="NAME">call</span><span class="PUNC">(</span><span class="NAME">zoom.scaleBy</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">zoom_perc</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>457</span> </span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>458</span> 
+<span class='line'>459</span> </span><span class="COMM">/**
+<span class='line'>460</span> * save svg as png
+<span class='line'>461</span> */</span><span class="WHIT">
+<span class='line'>462</span> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="NAME">save_svg</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">{</span><span class="WHIT">
+<span class='line'>463</span> </span><span class="WHIT">	</span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">svgString</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">get_svg_string</span><span class="PUNC">(</span><span class="NAME">svg.node</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>464</span> </span><span class="WHIT">	</span><span class="NAME">svg_string_to_image</span><span class="PUNC">(</span><span class="NAME">svgString</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NUMB">2</span><span class="PUNC">*</span><span class="NAME">width</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NUMB">2</span><span class="PUNC">*</span><span class="NAME">height</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">'png'</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">save</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="COMM">// passes Blob and filesize String to the callback</span><span class="WHIT">
+<span class='line'>465</span> 
+<span class='line'>466</span> </span><span class="WHIT">	</span><span class="KEYW">function</span><span class="WHIT"> </span><span class="NAME">save</span><span class="PUNC">(</span><span class="WHIT"> </span><span class="NAME">dataBlob</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">filesize</span><span class="WHIT"> </span><span class="PUNC">)</span><span class="PUNC">{</span><span class="WHIT">
+<span class='line'>467</span> </span><span class="WHIT">		</span><span class="NAME">saveAs</span><span class="PUNC">(</span><span class="NAME">dataBlob</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">'D3 vis exported to PNG.png'</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="COMM">// FileSaver.js function</span><span class="WHIT">
+<span class='line'>468</span> </span><span class="WHIT">	</span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>469</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>470</span> 
+<span class='line'>471</span> </span><span class="COMM">/**
+<span class='line'>472</span> * generate svgString
+<span class='line'>473</span> * @param {object} svgNode - node
+<span class='line'>474</span> */</span><span class="WHIT">
+<span class='line'>475</span> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="NAME">get_svg_string</span><span class="PUNC">(</span><span class="NAME">svgNode</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
+<span class='line'>476</span> </span><span class="WHIT">	</span><span class="NAME">svgNode.setAttribute</span><span class="PUNC">(</span><span class="STRN">'xlink'</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">'http://www.w3.org/1999/xlink'</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>477</span> </span><span class="WHIT">	</span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">cssStyleText</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">get_css_styles</span><span class="PUNC">(</span><span class="NAME">svgNode</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>478</span> </span><span class="WHIT">	</span><span class="NAME">append_css</span><span class="PUNC">(</span><span class="NAME">cssStyleText</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">svgNode</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>479</span> 
+<span class='line'>480</span> </span><span class="WHIT">	</span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">serializer</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">new</span><span class="WHIT"> </span><span class="NAME">XMLSerializer</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>481</span> </span><span class="WHIT">	</span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">svgString</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">serializer.serializeToString</span><span class="PUNC">(</span><span class="NAME">svgNode</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>482</span> </span><span class="WHIT">	</span><span class="NAME">svgString</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">svgString.replace</span><span class="PUNC">(</span><span class="REGX">/(\w+)?:?xlink=/g</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">'xmlns:xlink='</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="COMM">// Fix root xlink without namespace</span><span class="WHIT">
+<span class='line'>483</span> </span><span class="WHIT">	</span><span class="NAME">svgString</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">svgString.replace</span><span class="PUNC">(</span><span class="REGX">/NS\d+:href/g</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">'xlink:href'</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="COMM">// Safari NS namespace fix</span><span class="WHIT">
+<span class='line'>484</span> 
+<span class='line'>485</span> </span><span class="WHIT">	</span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">svgString</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>486</span> 
+<span class='line'>487</span> </span><span class="WHIT">	</span><span class="KEYW">function</span><span class="WHIT"> </span><span class="NAME">get_css_styles</span><span class="PUNC">(</span><span class="NAME">parentElement</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
+<span class='line'>488</span> </span><span class="WHIT">		</span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">selectorTextArr</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">[</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>489</span> 
+<span class='line'>490</span> </span><span class="WHIT">		</span><span class="COMM">// Add Parent element Id and Classes to the list</span><span class="WHIT">
+<span class='line'>491</span> </span><span class="WHIT">		</span><span class="NAME">selectorTextArr.push</span><span class="PUNC">(</span><span class="STRN">'#'</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">parentElement.id</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>492</span> </span><span class="WHIT">		</span><span class="KEYW">for</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">c</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">c</span><span class="WHIT"> </span><span class="PUNC">&lt;</span><span class="WHIT"> </span><span class="NAME">parentElement.classList.length</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">c</span><span class="PUNC">++</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>493</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">contains</span><span class="PUNC">(</span><span class="STRN">'.'</span><span class="PUNC">+</span><span class="NAME">parentElement.classList</span><span class="PUNC">[</span><span class="NAME">c</span><span class="PUNC">]</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">selectorTextArr</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>494</span> </span><span class="WHIT">					</span><span class="NAME">selectorTextArr.push</span><span class="PUNC">(</span><span class="STRN">'.'</span><span class="PUNC">+</span><span class="NAME">parentElement.classList</span><span class="PUNC">[</span><span class="NAME">c</span><span class="PUNC">]</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>495</span> 
+<span class='line'>496</span> </span><span class="WHIT">		</span><span class="COMM">// Add Children element Ids and Classes to the list</span><span class="WHIT">
+<span class='line'>497</span> </span><span class="WHIT">		</span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">nodes</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">parentElement.getElementsByTagName</span><span class="PUNC">(</span><span class="STRN">"*"</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>498</span> </span><span class="WHIT">		</span><span class="KEYW">for</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">i</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">i</span><span class="WHIT"> </span><span class="PUNC">&lt;</span><span class="WHIT"> </span><span class="NAME">nodes.length</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">i</span><span class="PUNC">++</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
+<span class='line'>499</span> </span><span class="WHIT">			</span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">id</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">nodes</span><span class="PUNC">[</span><span class="NAME">i</span><span class="PUNC">]</span><span class="PUNC">.</span><span class="NAME">id</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>500</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">contains</span><span class="PUNC">(</span><span class="STRN">'#'</span><span class="PUNC">+</span><span class="NAME">id</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">selectorTextArr</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>501</span> </span><span class="WHIT">				</span><span class="NAME">selectorTextArr.push</span><span class="PUNC">(</span><span class="STRN">'#'</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">id</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>502</span> 
+<span class='line'>503</span> </span><span class="WHIT">			</span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">classes</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">nodes</span><span class="PUNC">[</span><span class="NAME">i</span><span class="PUNC">]</span><span class="PUNC">.</span><span class="NAME">classList</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>504</span> </span><span class="WHIT">			</span><span class="KEYW">for</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">c</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">c</span><span class="WHIT"> </span><span class="PUNC">&lt;</span><span class="WHIT"> </span><span class="NAME">classes.length</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">c</span><span class="PUNC">++</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>505</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">contains</span><span class="PUNC">(</span><span class="STRN">'.'</span><span class="PUNC">+</span><span class="NAME">classes</span><span class="PUNC">[</span><span class="NAME">c</span><span class="PUNC">]</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">selectorTextArr</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>506</span> </span><span class="WHIT">					</span><span class="NAME">selectorTextArr.push</span><span class="PUNC">(</span><span class="STRN">'.'</span><span class="PUNC">+</span><span class="NAME">classes</span><span class="PUNC">[</span><span class="NAME">c</span><span class="PUNC">]</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>507</span> </span><span class="WHIT">		</span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>508</span> 
+<span class='line'>509</span> </span><span class="WHIT">		</span><span class="COMM">// Extract CSS Rules</span><span class="WHIT">
+<span class='line'>510</span> </span><span class="WHIT">		</span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">extractedCSSText</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'>511</span> </span><span class="WHIT">		</span><span class="KEYW">for</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">i</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">i</span><span class="WHIT"> </span><span class="PUNC">&lt;</span><span class="WHIT"> </span><span class="NAME">document.styleSheets.length</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">i</span><span class="PUNC">++</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
+<span class='line'>512</span> </span><span class="WHIT">			</span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">s</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">document.styleSheets</span><span class="PUNC">[</span><span class="NAME">i</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>513</span> </span><span class="WHIT">			
+<span class='line'>514</span> 			</span><span class="KEYW">try</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
+<span class='line'>515</span> </span><span class="WHIT">			    </span><span class="KEYW">if</span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">s.cssRules</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="KEYW">continue</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>516</span> </span><span class="WHIT">			</span><span class="PUNC">}</span><span class="WHIT"> 
+<span class='line'>517</span>             </span><span class="KEYW">catch</span><span class="PUNC">(</span><span class="NAME">e</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
+<span class='line'>518</span> </span><span class="WHIT">		    	</span><span class="KEYW">if</span><span class="PUNC">(</span><span class="NAME">e.name</span><span class="WHIT"> </span><span class="PUNC">!==</span><span class="WHIT"> </span><span class="STRN">'SecurityError'</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="KEYW">throw</span><span class="WHIT"> </span><span class="NAME">e</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="COMM">// for Firefox</span><span class="WHIT">
+<span class='line'>519</span> </span><span class="WHIT">		    	</span><span class="KEYW">continue</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>520</span> </span><span class="WHIT">		    	</span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>521</span> 
+<span class='line'>522</span> </span><span class="WHIT">			</span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">cssRules</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">s.cssRules</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>523</span> </span><span class="WHIT">			</span><span class="KEYW">for</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">r</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">r</span><span class="WHIT"> </span><span class="PUNC">&lt;</span><span class="WHIT"> </span><span class="NAME">cssRules.length</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">r</span><span class="PUNC">++</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
+<span class='line'>524</span> </span><span class="WHIT">				</span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">contains</span><span class="PUNC">(</span><span class="NAME">cssRules</span><span class="PUNC">[</span><span class="NAME">r</span><span class="PUNC">]</span><span class="PUNC">.</span><span class="NAME">selectorText</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">selectorTextArr</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>525</span> </span><span class="WHIT">					</span><span class="NAME">extractedCSSText</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">cssRules</span><span class="PUNC">[</span><span class="NAME">r</span><span class="PUNC">]</span><span class="PUNC">.</span><span class="NAME">cssText</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>526</span> </span><span class="WHIT">			</span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>527</span> </span><span class="WHIT">		</span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>528</span> </span><span class="WHIT">		</span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">extractedCSSText</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>529</span> 
+<span class='line'>530</span> </span><span class="WHIT">		</span><span class="KEYW">function</span><span class="WHIT"> </span><span class="NAME">contains</span><span class="PUNC">(</span><span class="NAME">str</span><span class="PUNC">,</span><span class="NAME">arr</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
+<span class='line'>531</span> </span><span class="WHIT">			</span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">arr.indexOf</span><span class="PUNC">(</span><span class="NAME">str</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">===</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="NUMB">1</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT"> </span><span class="KEYW">false</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="KEYW">true</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>532</span> </span><span class="WHIT">		</span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>533</span> </span><span class="WHIT">	</span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>534</span> 
+<span class='line'>535</span> </span><span class="WHIT">	</span><span class="KEYW">function</span><span class="WHIT"> </span><span class="NAME">append_css</span><span class="PUNC">(</span><span class="NAME">cssText</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">element</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
+<span class='line'>536</span> </span><span class="WHIT">		</span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">styleElement</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">document.createElement</span><span class="PUNC">(</span><span class="STRN">"style"</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>537</span> </span><span class="WHIT">		</span><span class="NAME">styleElement.setAttribute</span><span class="PUNC">(</span><span class="STRN">"type"</span><span class="PUNC">,</span><span class="STRN">"text/css"</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT"> 
+<span class='line'>538</span> 		</span><span class="NAME">styleElement.innerHTML</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">cssText</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>539</span> </span><span class="WHIT">		</span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">refNode</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">element.hasChildNodes</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT"> </span><span class="NAME">element.children</span><span class="PUNC">[</span><span class="NUMB">0</span><span class="PUNC">]</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="KEYW">null</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>540</span> </span><span class="WHIT">		</span><span class="NAME">element.insertBefore</span><span class="PUNC">(</span><span class="NAME">styleElement</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">refNode</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>541</span> </span><span class="WHIT">	</span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>542</span> </span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>543</span> 
+<span class='line'>544</span> </span><span class="COMM">/**
+<span class='line'>545</span> * convert svgString to image and export it
+<span class='line'>546</span> * @param {object} svgString - svgString
+<span class='line'>547</span> * @param {object} width - width of image
+<span class='line'>548</span> * @param {object} height - height of image
+<span class='line'>549</span> * @param {object} format - format to save image in 
+<span class='line'>550</span> * @param {object} callback - callback function 
+<span class='line'>551</span> */</span><span class="WHIT">
+<span class='line'>552</span> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="NAME">svg_string_to_image</span><span class="PUNC">(</span><span class="WHIT"> </span><span class="NAME">svgString</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">width</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">height</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">format</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">callback</span><span class="WHIT"> </span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
+<span class='line'>553</span> </span><span class="WHIT">	</span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">format</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">format</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT"> </span><span class="NAME">format</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="STRN">'png'</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>554</span> 
+<span class='line'>555</span> </span><span class="WHIT">	</span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">imgsrc</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">'data:image/svg+xml;base64,'</span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">btoa</span><span class="PUNC">(</span><span class="NAME">unescape</span><span class="PUNC">(</span><span class="NAME">encodeURIComponent</span><span class="PUNC">(</span><span class="NAME">svgString</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="COMM">// Convert SVG string to data URL</span><span class="WHIT">
+<span class='line'>556</span> 
+<span class='line'>557</span> </span><span class="WHIT">	</span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">canvas</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">document.createElement</span><span class="PUNC">(</span><span class="STRN">"canvas"</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>558</span> </span><span class="WHIT">	</span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">context</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">canvas.getContext</span><span class="PUNC">(</span><span class="STRN">"2d"</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>559</span> 
+<span class='line'>560</span> </span><span class="WHIT">	</span><span class="NAME">canvas.width</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 class='line'>561</span> </span><span class="WHIT">	</span><span class="NAME">canvas.height</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">height</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>562</span> 
+<span class='line'>563</span> </span><span class="WHIT">	</span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">image</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">new</span><span class="WHIT"> </span><span class="NAME">Image</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>564</span> </span><span class="WHIT">	</span><span class="NAME">image.onload</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
+<span class='line'>565</span> </span><span class="WHIT">		</span><span class="NAME">context.clearRect</span><span class="PUNC">(</span><span class="NUMB">0</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">width</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'>566</span> </span><span class="WHIT">		</span><span class="NAME">context.drawImage</span><span class="PUNC">(</span><span class="NAME">image</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">width</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'>567</span> 
+<span class='line'>568</span> </span><span class="WHIT">		</span><span class="NAME">canvas.toBlob</span><span class="PUNC">(</span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">blob</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
+<span class='line'>569</span> </span><span class="WHIT">			</span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">filesize</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">Math.round</span><span class="PUNC">(</span><span class="NAME">blob.length</span><span class="PUNC">/</span><span class="NUMB">1024</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">' KB'</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>570</span> </span><span class="WHIT">			</span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">callback</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="NAME">callback</span><span class="PUNC">(</span><span class="NAME">blob</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">filesize</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>571</span> </span><span class="WHIT">		</span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>572</span> </span><span class="WHIT">	</span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>573</span> </span><span class="WHIT">	</span><span class="NAME">image.src</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">imgsrc</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>574</span> </span><span class="PUNC">}</span></pre></body></html>
\ No newline at end of file
diff --git a/assets/documentation/documentation_cn_timeline/files.html b/assets/documentation/documentation_cn_timeline/files.html
new file mode 100644
index 0000000000000000000000000000000000000000..56ec2b21cb7140ac365dd9a200d65a34ab4fd3fb
--- /dev/null
+++ b/assets/documentation/documentation_cn_timeline/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_timeline.js.html">cn_timeline.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 Jan 28 2022 12:39:00 GMT+0100 (MEZ)
+		</div>
+	</body>
+</html>
\ No newline at end of file
diff --git a/assets/documentation/documentation_cn_timeline/index.html b/assets/documentation/documentation_cn_timeline/index.html
new file mode 100644
index 0000000000000000000000000000000000000000..0d90fb1eb114c3613a9f0994c3d2914330e026f1
--- /dev/null
+++ b/assets/documentation/documentation_cn_timeline/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 Jan 28 2022 12:39:00 GMT+0100 (MEZ)
+		</div>
+	</body>
+</html>
\ No newline at end of file
diff --git a/assets/documentation/documentation_cn_timeline/symbols/_global_.html b/assets/documentation/documentation_cn_timeline/symbols/_global_.html
new file mode 100644
index 0000000000000000000000000000000000000000..29fb15b07da35b80a39e665b9a3d57211a44c9ac
--- /dev/null
+++ b/assets/documentation/documentation_cn_timeline/symbols/_global_.html
@@ -0,0 +1,1856 @@
+<!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 ===================== -->
+			
+				
+				
+				<table class="summaryTable" cellspacing="0" summary="A summary of the fields documented in the class _global_.">
+					<caption>Field Summary</caption>
+					<thead>
+						<tr>
+							<th scope="col">Field Attributes</th>
+							<th scope="col">Field Name and Description</th>
+						</tr>
+					</thead>
+					<tbody>
+					
+						<tr>
+							<td class="attributes">&nbsp;</td>
+							<td class="nameDescription">
+								<div class="fixedFont">
+								<b><a href="../symbols/_global_.html#color">color</a></b>
+								</div>
+								<div class="description">scale functions that return y coordinate/color of node depending on group</div>
+							</td>
+						</tr>
+					
+						<tr>
+							<td class="attributes">&nbsp;</td>
+							<td class="nameDescription">
+								<div class="fixedFont">
+								<b><a href="../symbols/_global_.html#g">g</a></b>
+								</div>
+								<div class="description">creates group element</div>
+							</td>
+						</tr>
+					
+						<tr>
+							<td class="attributes">&nbsp;</td>
+							<td class="nameDescription">
+								<div class="fixedFont">
+								<b><a href="../symbols/_global_.html#gX">gX</a></b>
+								</div>
+								<div class="description">draws x-axis</div>
+							</td>
+						</tr>
+					
+						<tr>
+							<td class="attributes">&nbsp;</td>
+							<td class="nameDescription">
+								<div class="fixedFont">
+								<b><a href="../symbols/_global_.html#intervalId">intervalId</a></b>
+								</div>
+								<div class="description">checks at a fixed interval whether the contents of the JSON file have changed 
+  and reloads the program if necessary</div>
+							</td>
+						</tr>
+					
+						<tr>
+							<td class="attributes">&nbsp;</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">&nbsp;</td>
+							<td class="nameDescription">
+								<div class="fixedFont">
+								<b><a href="../symbols/_global_.html#rect">rect</a></b>
+								</div>
+								<div class="description">creates a background with a click functionality</div>
+							</td>
+						</tr>
+					
+						<tr>
+							<td class="attributes">&nbsp;</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">&nbsp;</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>
+					
+						<tr>
+							<td class="attributes">&nbsp;</td>
+							<td class="nameDescription">
+								<div class="fixedFont">
+								<b><a href="../symbols/_global_.html#svg_legend">svg_legend</a></b>
+								</div>
+								<div class="description">creates svg object (legend) with text, circles and arrows</div>
+							</td>
+						</tr>
+					
+						<tr>
+							<td class="attributes">&nbsp;</td>
+							<td class="nameDescription">
+								<div class="fixedFont">
+								<b><a href="../symbols/_global_.html#to_remove">to_remove</a></b>
+								</div>
+								<div class="description">saves highlighted node for click functionality</div>
+							</td>
+						</tr>
+					
+						<tr>
+							<td class="attributes">&nbsp;</td>
+							<td class="nameDescription">
+								<div class="fixedFont">
+								<b><a href="../symbols/_global_.html#xAxis">xAxis</a></b>
+								</div>
+								<div class="description">creates x-axis element</div>
+							</td>
+						</tr>
+					
+						<tr>
+							<td class="attributes">&nbsp;</td>
+							<td class="nameDescription">
+								<div class="fixedFont">
+								<b><a href="../symbols/_global_.html#zoom">zoom</a></b>
+								</div>
+								<div class="description">creates a new zoom behavior</div>
+							</td>
+						</tr>
+					
+					</tbody>
+				</table>
+				
+				
+				
+			
+
+<!-- ============================== 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">&nbsp;</td>
+							<td class="nameDescription">
+								<div class="fixedFont"><b><a href="../symbols/_global_.html#click_background">click_background</a></b>()
+								</div>
+								<div class="description">removes the highlights of the circles and their links</div>
+							</td>
+						</tr>
+					
+						<tr>
+							<td class="attributes">&nbsp;</td>
+							<td class="nameDescription">
+								<div class="fixedFont"><b><a href="../symbols/_global_.html#click_node">click_node</a></b>(node)
+								</div>
+								<div class="description">sets color of circle and its links to black and removes the previous highlights
+displays overview info of node in textbox</div>
+							</td>
+						</tr>
+					
+						<tr>
+							<td class="attributes">&nbsp;</td>
+							<td class="nameDescription">
+								<div class="fixedFont"><b><a href="../symbols/_global_.html#display_abstract">display_abstract</a></b>(a-)
+								</div>
+								<div class="description">displays abstract in textbox if a is true, overview text otherwise</div>
+							</td>
+						</tr>
+					
+						<tr>
+							<td class="attributes">&nbsp;</td>
+							<td class="nameDescription">
+								<div class="fixedFont"><b><a href="../symbols/_global_.html#dragged_node">dragged_node</a></b>(node)
+								</div>
+								<div class="description">applies the dragging to the node</div>
+							</td>
+						</tr>
+					
+						<tr>
+							<td class="attributes">&nbsp;</td>
+							<td class="nameDescription">
+								<div class="fixedFont"><b><a href="../symbols/_global_.html#fix_nodes">fix_nodes</a></b>(this_node)
+								</div>
+								<div class="description">fix positions of all nodes except for the current node</div>
+							</td>
+						</tr>
+					
+						<tr>
+							<td class="attributes">&nbsp;</td>
+							<td class="nameDescription">
+								<div class="fixedFont"><b><a href="../symbols/_global_.html#get_svg_string">get_svg_string</a></b>(svgNode)
+								</div>
+								<div class="description">generate svgString</div>
+							</td>
+						</tr>
+					
+						<tr>
+							<td class="attributes">&nbsp;</td>
+							<td class="nameDescription">
+								<div class="fixedFont"><b><a href="../symbols/_global_.html#handle_tick">handle_tick</a></b>()
+								</div>
+								<div class="description">updates the positions of the links and nodes</div>
+							</td>
+						</tr>
+					
+						<tr>
+							<td class="attributes">&nbsp;</td>
+							<td class="nameDescription">
+								<div class="fixedFont"><b><a href="../symbols/_global_.html#handle_transformation">handle_transformation</a></b>()
+								</div>
+								<div class="description">applies the transformation (zooming or dragging) to the g element</div>
+							</td>
+						</tr>
+					
+						<tr>
+							<td class="attributes">&nbsp;</td>
+							<td class="nameDescription">
+								<div class="fixedFont"><b><a href="../symbols/_global_.html#highlight_button">highlight_button</a></b>(btn)
+								</div>
+								<div class="description">sets color of btn to dark gray</div>
+							</td>
+						</tr>
+					
+						<tr>
+							<td class="attributes">&nbsp;</td>
+							<td class="nameDescription">
+								<div class="fixedFont"><b><a href="../symbols/_global_.html#is_link_for_node">is_link_for_node</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">&nbsp;</td>
+							<td class="nameDescription">
+								<div class="fixedFont"><b><a href="../symbols/_global_.html#mark_link">mark_link</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">&nbsp;</td>
+							<td class="nameDescription">
+								<div class="fixedFont"><b><a href="../symbols/_global_.html#reset_button_highlight">reset_button_highlight</a></b>()
+								</div>
+								<div class="description">sets color of all buttons to default light gray</div>
+							</td>
+						</tr>
+					
+						<tr>
+							<td class="attributes">&nbsp;</td>
+							<td class="nameDescription">
+								<div class="fixedFont"><b><a href="../symbols/_global_.html#reset_view">reset_view</a></b>()
+								</div>
+								<div class="description">transforms svg so that the zoom and drag is reset</div>
+							</td>
+						</tr>
+					
+						<tr>
+							<td class="attributes">&nbsp;</td>
+							<td class="nameDescription">
+								<div class="fixedFont"><b><a href="../symbols/_global_.html#save_svg">save_svg</a></b>()
+								</div>
+								<div class="description">save svg as png</div>
+							</td>
+						</tr>
+					
+						<tr>
+							<td class="attributes">&nbsp;</td>
+							<td class="nameDescription">
+								<div class="fixedFont"><b><a href="../symbols/_global_.html#self_citation">self_citation</a></b>(source, target)
+								</div>
+								<div class="description">returns true if journals have a common author (self-citation)</div>
+							</td>
+						</tr>
+					
+						<tr>
+							<td class="attributes">&nbsp;</td>
+							<td class="nameDescription">
+								<div class="fixedFont"><b><a href="../symbols/_global_.html#start_drag_node">start_drag_node</a></b>(node)
+								</div>
+								<div class="description">initializes the dragging of the node</div>
+							</td>
+						</tr>
+					
+						<tr>
+							<td class="attributes">&nbsp;</td>
+							<td class="nameDescription">
+								<div class="fixedFont"><b><a href="../symbols/_global_.html#svg_string_to_image">svg_string_to_image</a></b>(svgString, width, height, format, callback)
+								</div>
+								<div class="description">convert svgString to image and export it</div>
+							</td>
+						</tr>
+					
+						<tr>
+							<td class="attributes">&nbsp;</td>
+							<td class="nameDescription">
+								<div class="fixedFont"><b><a href="../symbols/_global_.html#textbox_content">textbox_content</a></b>(node)
+								</div>
+								<div class="description">saves text for overview and abstract of node
+outputs node info to textbox</div>
+							</td>
+						</tr>
+					
+						<tr>
+							<td class="attributes">&nbsp;</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, nodes and x-axis
+adds the nodes, links and tick functionality to the simulation</div>
+							</td>
+						</tr>
+					
+						<tr>
+							<td class="attributes">&nbsp;</td>
+							<td class="nameDescription">
+								<div class="fixedFont"><b><a href="../symbols/_global_.html#update_links">update_links</a></b>(links)
+								</div>
+								<div class="description">initializes and shows links (edges)</div>
+							</td>
+						</tr>
+					
+						<tr>
+							<td class="attributes">&nbsp;</td>
+							<td class="nameDescription">
+								<div class="fixedFont"><b><a href="../symbols/_global_.html#update_marker">update_marker</a></b>(color, target)
+								</div>
+								<div class="description">creates arrowhead and returns its url</div>
+							</td>
+						</tr>
+					
+						<tr>
+							<td class="attributes">&nbsp;</td>
+							<td class="nameDescription">
+								<div class="fixedFont"><b><a href="../symbols/_global_.html#update_nodes">update_nodes</a></b>(nodes)
+								</div>
+								<div class="description">initializes and shows nodes with circles, texts and a click functionality
+creates a new drag behavior and applies it to the circles</div>
+							</td>
+						</tr>
+					
+						<tr>
+							<td class="attributes">&nbsp;</td>
+							<td class="nameDescription">
+								<div class="fixedFont"><b><a href="../symbols/_global_.html#update_xaxis">update_xaxis</a></b>(nodes)
+								</div>
+								<div class="description">initializes and shows x-axis</div>
+							</td>
+						</tr>
+					
+						<tr>
+							<td class="attributes">&nbsp;</td>
+							<td class="nameDescription">
+								<div class="fixedFont"><b><a href="../symbols/_global_.html#zoom_to_graph">zoom_to_graph</a></b>()
+								</div>
+								<div class="description">transforms svg so that the zoom is adapted to the size of the graph</div>
+							</td>
+						</tr>
+					
+					</tbody>
+				</table>
+				
+				
+				
+			
+<!-- ============================== events summary ======================== -->
+			
+
+<!-- ============================== constructor details ==================== -->		
+			
+
+<!-- ============================== field details ========================== -->		
+			
+				<div class="sectionTitle">
+					Field Detail
+				</div>
+				
+					<a name="color"> </a>
+					<div class="fixedFont">
+					
+					
+					<b>color</b>
+					
+					</div>
+					<div class="description">
+						scale functions that return y coordinate/color of node depending on group
+						
+							<br />
+							<i>Defined in: </i> <a href="../symbols/src/cn_timeline.js.html">cn_timeline.js</a>.
+						
+						
+					</div>
+					
+					
+
+						
+						
+						
+						
+
+					<hr />
+				
+					<a name="g"> </a>
+					<div class="fixedFont">
+					
+					
+					<b>g</b>
+					
+					</div>
+					<div class="description">
+						creates group element
+						
+							<br />
+							<i>Defined in: </i> <a href="../symbols/src/cn_timeline.js.html">cn_timeline.js</a>.
+						
+						
+					</div>
+					
+					
+
+						
+						
+						
+						
+
+					<hr />
+				
+					<a name="gX"> </a>
+					<div class="fixedFont">
+					
+					
+					<b>gX</b>
+					
+					</div>
+					<div class="description">
+						draws x-axis
+						
+							<br />
+							<i>Defined in: </i> <a href="../symbols/src/cn_timeline.js.html">cn_timeline.js</a>.
+						
+						
+					</div>
+					
+					
+
+						
+						
+						
+						
+
+					<hr />
+				
+					<a name="intervalId"> </a>
+					<div class="fixedFont">
+					
+					
+					<b>intervalId</b>
+					
+					</div>
+					<div class="description">
+						checks at a fixed interval whether the contents of the JSON file have changed 
+  and reloads the program if necessary
+						
+							<br />
+							<i>Defined in: </i> <a href="../symbols/src/cn_timeline.js.html">cn_timeline.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_timeline.js.html">cn_timeline.js</a>.
+						
+						
+					</div>
+					
+					
+
+						
+						
+						
+						
+
+					<hr />
+				
+					<a name="rect"> </a>
+					<div class="fixedFont">
+					
+					
+					<b>rect</b>
+					
+					</div>
+					<div class="description">
+						creates a background with a click functionality
+						
+							<br />
+							<i>Defined in: </i> <a href="../symbols/src/cn_timeline.js.html">cn_timeline.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_timeline.js.html">cn_timeline.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_timeline.js.html">cn_timeline.js</a>.
+						
+						
+					</div>
+					
+					
+
+						
+						
+						
+						
+
+					<hr />
+				
+					<a name="svg_legend"> </a>
+					<div class="fixedFont">
+					
+					
+					<b>svg_legend</b>
+					
+					</div>
+					<div class="description">
+						creates svg object (legend) with text, circles and arrows
+						
+							<br />
+							<i>Defined in: </i> <a href="../symbols/src/cn_timeline.js.html">cn_timeline.js</a>.
+						
+						
+					</div>
+					
+					
+
+						
+						
+						
+						
+
+					<hr />
+				
+					<a name="to_remove"> </a>
+					<div class="fixedFont">
+					
+					
+					<b>to_remove</b>
+					
+					</div>
+					<div class="description">
+						saves highlighted node for click functionality
+						
+							<br />
+							<i>Defined in: </i> <a href="../symbols/src/cn_timeline.js.html">cn_timeline.js</a>.
+						
+						
+					</div>
+					
+					
+
+						
+						
+						
+						
+
+					<hr />
+				
+					<a name="xAxis"> </a>
+					<div class="fixedFont">
+					
+					
+					<b>xAxis</b>
+					
+					</div>
+					<div class="description">
+						creates x-axis element
+						
+							<br />
+							<i>Defined in: </i> <a href="../symbols/src/cn_timeline.js.html">cn_timeline.js</a>.
+						
+						
+					</div>
+					
+					
+
+						
+						
+						
+						
+
+					<hr />
+				
+					<a name="zoom"> </a>
+					<div class="fixedFont">
+					
+					
+					<b>zoom</b>
+					
+					</div>
+					<div class="description">
+						creates a new zoom behavior
+						
+							<br />
+							<i>Defined in: </i> <a href="../symbols/src/cn_timeline.js.html">cn_timeline.js</a>.
+						
+						
+					</div>
+					
+					
+
+						
+						
+						
+						
+
+					
+				
+			
+
+<!-- ============================== method details ========================= -->		
+			
+				<div class="sectionTitle">
+					Method Detail
+				</div>
+				
+					<a name="click_background"> </a>
+					<div class="fixedFont">
+					
+					
+					<b>click_background</b>()
+					
+					</div>
+					<div class="description">
+						removes the highlights of the circles and their links
+						
+							<br />
+							<i>Defined in: </i> <a href="../symbols/src/cn_timeline.js.html">cn_timeline.js</a>.
+						
+						
+					</div>
+					
+					
+					
+						
+						
+						
+						
+						
+						
+						
+
+					<hr />
+				
+					<a name="click_node"> </a>
+					<div class="fixedFont">
+					
+					
+					<b>click_node</b>(node)
+					
+					</div>
+					<div class="description">
+						sets color of circle and its links to black and removes the previous highlights
+displays overview info of node in textbox
+						
+							<br />
+							<i>Defined in: </i> <a href="../symbols/src/cn_timeline.js.html">cn_timeline.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="display_abstract"> </a>
+					<div class="fixedFont">
+					
+					
+					<b>display_abstract</b>(a-)
+					
+					</div>
+					<div class="description">
+						displays abstract in textbox if a is true, overview text otherwise
+						
+							<br />
+							<i>Defined in: </i> <a href="../symbols/src/cn_timeline.js.html">cn_timeline.js</a>.
+						
+						
+					</div>
+					
+					
+					
+						
+							<dl class="detailList">
+							<dt class="heading">Parameters:</dt>
+							
+								<dt>
+									<span class="light fixedFont">{bool}</span> <b>a-</b>
+									
+								</dt>
+								<dd>bool</dd>
+							
+							</dl>
+						
+						
+						
+						
+						
+						
+						
+
+					<hr />
+				
+					<a name="dragged_node"> </a>
+					<div class="fixedFont">
+					
+					
+					<b>dragged_node</b>(node)
+					
+					</div>
+					<div class="description">
+						applies the dragging to the node
+						
+							<br />
+							<i>Defined in: </i> <a href="../symbols/src/cn_timeline.js.html">cn_timeline.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="fix_nodes"> </a>
+					<div class="fixedFont">
+					
+					
+					<b>fix_nodes</b>(this_node)
+					
+					</div>
+					<div class="description">
+						fix positions of all nodes except for the current node
+						
+							<br />
+							<i>Defined in: </i> <a href="../symbols/src/cn_timeline.js.html">cn_timeline.js</a>.
+						
+						
+					</div>
+					
+					
+					
+						
+							<dl class="detailList">
+							<dt class="heading">Parameters:</dt>
+							
+								<dt>
+									<span class="light fixedFont">{object}</span> <b>this_node</b>
+									
+								</dt>
+								<dd>- node</dd>
+							
+							</dl>
+						
+						
+						
+						
+						
+						
+						
+
+					<hr />
+				
+					<a name="get_svg_string"> </a>
+					<div class="fixedFont">
+					
+					
+					<b>get_svg_string</b>(svgNode)
+					
+					</div>
+					<div class="description">
+						generate svgString
+						
+							<br />
+							<i>Defined in: </i> <a href="../symbols/src/cn_timeline.js.html">cn_timeline.js</a>.
+						
+						
+					</div>
+					
+					
+					
+						
+							<dl class="detailList">
+							<dt class="heading">Parameters:</dt>
+							
+								<dt>
+									<span class="light fixedFont">{object}</span> <b>svgNode</b>
+									
+								</dt>
+								<dd>- node</dd>
+							
+							</dl>
+						
+						
+						
+						
+						
+						
+						
+
+					<hr />
+				
+					<a name="handle_tick"> </a>
+					<div class="fixedFont">
+					
+					
+					<b>handle_tick</b>()
+					
+					</div>
+					<div class="description">
+						updates the positions of the links and nodes
+						
+							<br />
+							<i>Defined in: </i> <a href="../symbols/src/cn_timeline.js.html">cn_timeline.js</a>.
+						
+						
+					</div>
+					
+					
+					
+						
+						
+						
+						
+						
+						
+						
+
+					<hr />
+				
+					<a name="handle_transformation"> </a>
+					<div class="fixedFont">
+					
+					
+					<b>handle_transformation</b>()
+					
+					</div>
+					<div class="description">
+						applies the transformation (zooming or dragging) to the g element
+						
+							<br />
+							<i>Defined in: </i> <a href="../symbols/src/cn_timeline.js.html">cn_timeline.js</a>.
+						
+						
+					</div>
+					
+					
+					
+						
+						
+						
+						
+						
+						
+						
+
+					<hr />
+				
+					<a name="highlight_button"> </a>
+					<div class="fixedFont">
+					
+					
+					<b>highlight_button</b>(btn)
+					
+					</div>
+					<div class="description">
+						sets color of btn to dark gray
+						
+							<br />
+							<i>Defined in: </i> <a href="../symbols/src/cn_timeline.js.html">cn_timeline.js</a>.
+						
+						
+					</div>
+					
+					
+					
+						
+							<dl class="detailList">
+							<dt class="heading">Parameters:</dt>
+							
+								<dt>
+									<span class="light fixedFont">{object}</span> <b>btn</b>
+									
+								</dt>
+								<dd>- button</dd>
+							
+							</dl>
+						
+						
+						
+						
+						
+						
+						
+
+					<hr />
+				
+					<a name="is_link_for_node"> </a>
+					<div class="fixedFont">
+					
+					
+					<b>is_link_for_node</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_timeline.js.html">cn_timeline.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="mark_link"> </a>
+					<div class="fixedFont">
+					
+					
+					<b>mark_link</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_timeline.js.html">cn_timeline.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="reset_button_highlight"> </a>
+					<div class="fixedFont">
+					
+					
+					<b>reset_button_highlight</b>()
+					
+					</div>
+					<div class="description">
+						sets color of all buttons to default light gray
+						
+							<br />
+							<i>Defined in: </i> <a href="../symbols/src/cn_timeline.js.html">cn_timeline.js</a>.
+						
+						
+					</div>
+					
+					
+					
+						
+						
+						
+						
+						
+						
+						
+
+					<hr />
+				
+					<a name="reset_view"> </a>
+					<div class="fixedFont">
+					
+					
+					<b>reset_view</b>()
+					
+					</div>
+					<div class="description">
+						transforms svg so that the zoom and drag is reset
+						
+							<br />
+							<i>Defined in: </i> <a href="../symbols/src/cn_timeline.js.html">cn_timeline.js</a>.
+						
+						
+					</div>
+					
+					
+					
+						
+						
+						
+						
+						
+						
+						
+
+					<hr />
+				
+					<a name="save_svg"> </a>
+					<div class="fixedFont">
+					
+					
+					<b>save_svg</b>()
+					
+					</div>
+					<div class="description">
+						save svg as png
+						
+							<br />
+							<i>Defined in: </i> <a href="../symbols/src/cn_timeline.js.html">cn_timeline.js</a>.
+						
+						
+					</div>
+					
+					
+					
+						
+						
+						
+						
+						
+						
+						
+
+					<hr />
+				
+					<a name="self_citation"> </a>
+					<div class="fixedFont">
+					
+					
+					<b>self_citation</b>(source, target)
+					
+					</div>
+					<div class="description">
+						returns true if journals have a common author (self-citation)
+						
+							<br />
+							<i>Defined in: </i> <a href="../symbols/src/cn_timeline.js.html">cn_timeline.js</a>.
+						
+						
+					</div>
+					
+					
+					
+						
+							<dl class="detailList">
+							<dt class="heading">Parameters:</dt>
+							
+								<dt>
+									<span class="light fixedFont">{object}</span> <b>source</b>
+									
+								</dt>
+								<dd>- node</dd>
+							
+								<dt>
+									<span class="light fixedFont">{object}</span> <b>target</b>
+									
+								</dt>
+								<dd>- node</dd>
+							
+							</dl>
+						
+						
+						
+						
+						
+						
+						
+
+					<hr />
+				
+					<a name="start_drag_node"> </a>
+					<div class="fixedFont">
+					
+					
+					<b>start_drag_node</b>(node)
+					
+					</div>
+					<div class="description">
+						initializes the dragging of the node
+						
+							<br />
+							<i>Defined in: </i> <a href="../symbols/src/cn_timeline.js.html">cn_timeline.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="svg_string_to_image"> </a>
+					<div class="fixedFont">
+					
+					
+					<b>svg_string_to_image</b>(svgString, width, height, format, callback)
+					
+					</div>
+					<div class="description">
+						convert svgString to image and export it
+						
+							<br />
+							<i>Defined in: </i> <a href="../symbols/src/cn_timeline.js.html">cn_timeline.js</a>.
+						
+						
+					</div>
+					
+					
+					
+						
+							<dl class="detailList">
+							<dt class="heading">Parameters:</dt>
+							
+								<dt>
+									<span class="light fixedFont">{object}</span> <b>svgString</b>
+									
+								</dt>
+								<dd>- svgString</dd>
+							
+								<dt>
+									<span class="light fixedFont">{object}</span> <b>width</b>
+									
+								</dt>
+								<dd>- width of image</dd>
+							
+								<dt>
+									<span class="light fixedFont">{object}</span> <b>height</b>
+									
+								</dt>
+								<dd>- height of image</dd>
+							
+								<dt>
+									<span class="light fixedFont">{object}</span> <b>format</b>
+									
+								</dt>
+								<dd>- format to save image in</dd>
+							
+								<dt>
+									<span class="light fixedFont">{object}</span> <b>callback</b>
+									
+								</dt>
+								<dd>- callback function</dd>
+							
+							</dl>
+						
+						
+						
+						
+						
+						
+						
+
+					<hr />
+				
+					<a name="textbox_content"> </a>
+					<div class="fixedFont">
+					
+					
+					<b>textbox_content</b>(node)
+					
+					</div>
+					<div class="description">
+						saves text for overview and abstract of node
+outputs node info to textbox
+						
+							<br />
+							<i>Defined in: </i> <a href="../symbols/src/cn_timeline.js.html">cn_timeline.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="update"> </a>
+					<div class="fixedFont">
+					
+					
+					<b>update</b>(nodes, links)
+					
+					</div>
+					<div class="description">
+						calls update functions for links, nodes and x-axis
+adds the nodes, links and tick functionality to the simulation
+						
+							<br />
+							<i>Defined in: </i> <a href="../symbols/src/cn_timeline.js.html">cn_timeline.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="update_links"> </a>
+					<div class="fixedFont">
+					
+					
+					<b>update_links</b>(links)
+					
+					</div>
+					<div class="description">
+						initializes and shows links (edges)
+						
+							<br />
+							<i>Defined in: </i> <a href="../symbols/src/cn_timeline.js.html">cn_timeline.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="update_marker"> </a>
+					<div class="fixedFont">
+					
+					
+					<b>update_marker</b>(color, target)
+					
+					</div>
+					<div class="description">
+						creates arrowhead and returns its url
+						
+							<br />
+							<i>Defined in: </i> <a href="../symbols/src/cn_timeline.js.html">cn_timeline.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>
+							
+								<dt>
+									<span class="light fixedFont">{string}</span> <b>target</b>
+									
+								</dt>
+								<dd>- target node</dd>
+							
+							</dl>
+						
+						
+						
+						
+						
+						
+						
+
+					<hr />
+				
+					<a name="update_nodes"> </a>
+					<div class="fixedFont">
+					
+					
+					<b>update_nodes</b>(nodes)
+					
+					</div>
+					<div class="description">
+						initializes and shows nodes with circles, texts and a click functionality
+creates a new drag behavior and applies it to the circles
+						
+							<br />
+							<i>Defined in: </i> <a href="../symbols/src/cn_timeline.js.html">cn_timeline.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="update_xaxis"> </a>
+					<div class="fixedFont">
+					
+					
+					<b>update_xaxis</b>(nodes)
+					
+					</div>
+					<div class="description">
+						initializes and shows x-axis
+						
+							<br />
+							<i>Defined in: </i> <a href="../symbols/src/cn_timeline.js.html">cn_timeline.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="zoom_to_graph"> </a>
+					<div class="fixedFont">
+					
+					
+					<b>zoom_to_graph</b>()
+					
+					</div>
+					<div class="description">
+						transforms svg so that the zoom is adapted to the size of the graph
+						
+							<br />
+							<i>Defined in: </i> <a href="../symbols/src/cn_timeline.js.html">cn_timeline.js</a>.
+						
+						
+					</div>
+					
+					
+					
+						
+						
+						
+						
+						
+						
+						
+
+					
+				
+			
+			
+<!-- ============================== 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 Jan 28 2022 12:39:00 GMT+0100 (MEZ)
+		</div>
+	</body>
+</html>
diff --git a/assets/documentation/documentation_cn_timeline/symbols/src/cn_timeline.js.html b/assets/documentation/documentation_cn_timeline/symbols/src/cn_timeline.js.html
new file mode 100644
index 0000000000000000000000000000000000000000..76d4a8771afb7fc1610e11080d422305041fa53f
--- /dev/null
+++ b/assets/documentation/documentation_cn_timeline/symbols/src/cn_timeline.js.html
@@ -0,0 +1,616 @@
+<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="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">handle_transformation</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.graph"</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><span class="NAME">zoom_perc</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'> 15</span> 
+<span class='line'> 16</span> </span><span class="COMM">/**
+<span class='line'> 17</span> * scale functions that return y coordinate/color of node depending on group
+<span class='line'> 18</span> */</span><span class="WHIT">
+<span class='line'> 19</span> </span><span class="KEYW">var</span><span class="WHIT"> </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'> 20</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">"Citedby"</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">"Reference"</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">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">'#7fa9d4'</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'> 22</span> </span><span class="NAME">y_scale</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'> 23</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">"Citedby"</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">"Reference"</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">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'> 25</span> 
+<span class='line'> 26</span> </span><span class="COMM">/**
+<span class='line'> 27</span> * creates node object and (default) radius
+<span class='line'> 28</span> */</span><span class="WHIT">
+<span class='line'> 29</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'> 30</span> </span><span class="NAME">r</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">10</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'> 31</span> 
+<span class='line'> 32</span> </span><span class="COMM">/**
+<span class='line'> 33</span> * saves highlighted node for click functionality
+<span class='line'> 34</span> */</span><span class="WHIT">
+<span class='line'> 35</span> </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">to_remove</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'> 36</span> 
+<span class='line'> 37</span> </span><span class="COMM">/**
+<span class='line'> 38</span> * creates link object
+<span class='line'> 39</span> */</span><span class="WHIT">
+<span class='line'> 40</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'> 41</span> 
+<span class='line'> 42</span> </span><span class="COMM">/**
+<span class='line'> 43</span> * creates a background with a click functionality
+<span class='line'> 44</span> */</span><span class="WHIT">
+<span class='line'> 45</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'> 46</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'> 47</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'> 48</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'> 49</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'> 50</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'> 51</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">click_background</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'> 52</span> 
+<span class='line'> 53</span> </span><span class="COMM">/**
+<span class='line'> 54</span> * creates svg object (legend) with text, circles and arrows
+<span class='line'> 55</span> */</span><span class="WHIT">
+<span class='line'> 56</span> </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">svg_legend</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.legendsvg"</span><span class="PUNC">)</span><span class="PUNC">,</span><span class="WHIT">
+<span class='line'> 57</span> </span><span class="NAME">legend_position</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">[</span><span class="NUMB">65</span><span class="PUNC">,</span><span class="NUMB">95</span><span class="PUNC">,</span><span class="NUMB">125</span><span class="PUNC">]</span><span class="PUNC">,</span><span class="WHIT">
+<span class='line'> 58</span> </span><span class="NAME">arrow_legend_position</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">[</span><span class="NUMB">0</span><span class="PUNC">,</span><span class="NUMB">25</span><span class="PUNC">]</span><span class="PUNC">,</span><span class="WHIT">
+<span class='line'> 59</span> </span><span class="NAME">arrow_group_names</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">[</span><span class="STRN">"Citation"</span><span class="PUNC">,</span><span class="STRN">"Self-Citation"</span><span class="PUNC">]</span><span class="PUNC">,</span><span class="WHIT">
+<span class='line'> 60</span> </span><span class="NAME">group_names</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">[</span><span class="STRN">"Cited-by"</span><span class="PUNC">,</span><span class="STRN">"Input"</span><span class="PUNC">,</span><span class="STRN">"Reference"</span><span class="PUNC">]</span><span class="PUNC">,</span><span class="WHIT">
+<span class='line'> 61</span> </span><span class="NAME">line_type</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'> 62</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">"line"</span><span class="PUNC">,</span><span class="STRN">"dotted"</span><span class="PUNC">]</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">range</span><span class="PUNC">(</span><span class="PUNC">[</span><span class="PUNC">(</span><span class="STRN">"8,0"</span><span class="PUNC">)</span><span class="PUNC">,</span><span class="PUNC">(</span><span class="STRN">"8,8"</span><span class="PUNC">)</span><span class="PUNC">]</span><span class="PUNC">)</span><span class="PUNC">,</span><span class="WHIT">
+<span class='line'> 64</span> </span><span class="NAME">text_info</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'> 65</span> </span><span class="NAME">text_abstract</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'> 66</span> </span><span class="WHIT">    
+<span class='line'> 67</span> </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">legend</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">svg_legend.selectAll</span><span class="PUNC">(</span><span class="STRN">".legend"</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">data</span><span class="PUNC">(</span><span class="NAME">legend_position</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">enter</span><span class="PUNC">(</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">append</span><span class="PUNC">(</span><span class="STRN">"g"</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">"class"</span><span class="PUNC">,</span><span class="STRN">"legend"</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">"transform"</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="NAME">i</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(0,"</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">d</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><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'> 73</span> </span><span class="WHIT">    
+<span class='line'> 74</span> </span><span class="NAME">legend.append</span><span class="PUNC">(</span><span class="STRN">"text"</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">"x"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NUMB">80</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">"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'> 77</span> </span><span class="WHIT">    </span><span class="PUNC">.</span><span class="NAME">attr</span><span class="PUNC">(</span><span class="STRN">"dy"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">".35em"</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">style</span><span class="PUNC">(</span><span class="STRN">"text-anchor"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">"start"</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'> 79</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="PUNC">(</span><span class="NAME">d</span><span class="PUNC">,</span><span class="NAME">i</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">group_names</span><span class="PUNC">[</span><span class="NAME">i</span><span class="PUNC">]</span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'> 80</span> </span><span class="WHIT">    
+<span class='line'> 81</span> </span><span class="NAME">legend.append</span><span class="PUNC">(</span><span class="STRN">"circle"</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">"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'> 83</span> </span><span class="WHIT">    </span><span class="PUNC">.</span><span class="NAME">attr</span><span class="PUNC">(</span><span class="STRN">"cx"</span><span class="PUNC">,</span><span class="NUMB">30</span><span class="PUNC">-</span><span class="NAME">r</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">style</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="PUNC">;</span><span class="WHIT">
+<span class='line'> 85</span> </span><span class="WHIT">        
+<span class='line'> 86</span> </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">legend_arrow</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">svg_legend.selectAll</span><span class="PUNC">(</span><span class="STRN">".legendarr"</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'> 87</span> </span><span class="WHIT">    </span><span class="PUNC">.</span><span class="NAME">data</span><span class="PUNC">(</span><span class="NAME">arrow_legend_position</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'> 88</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'> 89</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'> 90</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="STRN">"legendarr"</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">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="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(0,"</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">d</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'> 92</span> </span><span class="WHIT">    
+<span class='line'> 93</span> </span><span class="NAME">legend_arrow.append</span><span class="PUNC">(</span><span class="STRN">"line"</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">attr</span><span class="PUNC">(</span><span class="STRN">"x1"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NUMB">10</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">"x2"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NUMB">50</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">attr</span><span class="PUNC">(</span><span class="STRN">"y1"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NUMB">10</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">attr</span><span class="PUNC">(</span><span class="STRN">"y2"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NUMB">10</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-dasharray"</span><span class="PUNC">,</span><span class="NAME">line_type</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">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'>100</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'>101</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">'none'</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>102</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">update_marker</span><span class="PUNC">(</span><span class="STRN">'#999'</span><span class="PUNC">,</span><span class="KEYW">this</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">legend_arrow.append</span><span class="PUNC">(</span><span class="STRN">"text"</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>105</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">80</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">attr</span><span class="PUNC">(</span><span class="STRN">"y"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NUMB">10</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>107</span> </span><span class="WHIT">    </span><span class="PUNC">.</span><span class="NAME">attr</span><span class="PUNC">(</span><span class="STRN">"dy"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">".35em"</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>108</span> </span><span class="WHIT">    </span><span class="PUNC">.</span><span class="NAME">style</span><span class="PUNC">(</span><span class="STRN">"text-anchor"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">"start"</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">text</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="NAME">i</span><span class="PUNC">)</span><span class="PUNC">{</span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">arrow_group_names</span><span class="PUNC">[</span><span class="NAME">i</span><span class="PUNC">]</span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>110</span> 
+<span class='line'>111</span> </span><span class="COMM">/**
+<span class='line'>112</span> * creates a new simulation
+<span class='line'>113</span> * updates the positions of the links and nodes when the 
+<span class='line'>114</span>   state of the layout has changed (simulation has advanced by a tick)
+<span class='line'>115</span> */</span><span class="WHIT">
+<span class='line'>116</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'>117</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">50</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">strength</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'>119</span> </span><span class="WHIT">            </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">d.group</span><span class="WHIT"> </span><span class="PUNC">==</span><span class="WHIT"> </span><span class="STRN">"Input"</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">;</span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>120</span> </span><span class="WHIT">            </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NUMB">5</span><span class="PUNC">;</span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>121</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>122</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="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'>123</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">d.group</span><span class="WHIT"> </span><span class="PUNC">==</span><span class="WHIT"> </span><span class="STRN">"Input"</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NUMB">70</span><span class="PUNC">;</span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>124</span> </span><span class="WHIT">        </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NUMB">75</span><span class="PUNC">;</span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>125</span> </span><span class="WHIT">        </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="WHIT">
+<span class='line'>126</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="NUMB">0.001</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">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="NUMB">20</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="NUMB">40</span><span class="PUNC">)</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">alpha</span><span class="PUNC">(</span><span class="NUMB">0.004</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">velocityDecay</span><span class="PUNC">(</span><span class="NUMB">0.65</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">on</span><span class="PUNC">(</span><span class="STRN">"end"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">zoom_to_graph</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>131</span> 
+<span class='line'>132</span> </span><span class="COMM">/**
+<span class='line'>133</span> * creates group element
+<span class='line'>134</span> */</span><span class="WHIT">
+<span class='line'>135</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'>136</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'>137</span> 
+<span class='line'>138</span> </span><span class="COMM">/**
+<span class='line'>139</span> * creates x-axis element
+<span class='line'>140</span> */</span><span class="WHIT">
+<span class='line'>141</span> </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">xAxis</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">d3.axisBottom</span><span class="PUNC">(</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">tickFormat</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">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">d</span><span class="PUNC">%</span><span class="NUMB">1</span><span class="PUNC">==</span><span class="NUMB">0</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">d</span><span class="PUNC">;</span><span class="PUNC">}</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>143</span> </span><span class="WHIT">    </span><span class="PUNC">.</span><span class="NAME">ticks</span><span class="PUNC">(</span><span class="NUMB">10</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>144</span> 
+<span class='line'>145</span> </span><span class="COMM">/**
+<span class='line'>146</span> * draws x-axis
+<span class='line'>147</span> */</span><span class="WHIT">
+<span class='line'>148</span> </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">gX</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'>149</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">"axis axis--x"</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>150</span> </span><span class="WHIT">    </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="STRN">"translate(0,25)"</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>151</span> </span><span class="NAME">gX.append</span><span class="PUNC">(</span><span class="STRN">"text"</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>152</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="PUNC">-</span><span class="NUMB">5</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>153</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">85</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>154</span> </span><span class="WHIT">    </span><span class="PUNC">.</span><span class="NAME">attr</span><span class="PUNC">(</span><span class="STRN">"text-anchor"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">"end"</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>155</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">'black'</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">text</span><span class="PUNC">(</span><span class="STRN">"Year"</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">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="PUNC">;</span><span class="WHIT">
+<span class='line'>158</span> 
+<span class='line'>159</span> </span><span class="COMM">/**
+<span class='line'>160</span> * loads JSON data and calls the update function
+<span class='line'>161</span> */</span><span class="WHIT">
+<span class='line'>162</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="NAME">success</span><span class="PUNC">,</span><span class="NAME">failure</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>163</span> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="NAME">success</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'>164</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'>165</span> </span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>166</span> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="NAME">failure</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'>167</span> </span><span class="WHIT">    </span><span class="NAME">localStorage.setItem</span><span class="PUNC">(</span><span class="STRN">"oldjson"</span><span class="PUNC">,</span><span class="STRN">"keineJson"</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>168</span> </span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>169</span> 
+<span class='line'>170</span> </span><span class="COMM">/**
+<span class='line'>171</span> * checks at a fixed interval whether the contents of the JSON file have changed 
+<span class='line'>172</span>   and reloads the program if necessary
+<span class='line'>173</span> */</span><span class="WHIT">
+<span class='line'>174</span> </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">intervalId</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">window.setInterval</span><span class="PUNC">(</span><span class="NAME">check_if_json_changed</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NUMB">500</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>175</span> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="NAME">check_if_json_changed</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
+<span class='line'>176</span> </span><span class="WHIT">    </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'>177</span> </span><span class="WHIT">        </span><span class="NAME">newjson_string</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">JSON.stringify</span><span class="PUNC">(</span><span class="NAME">graph</span><span class="PUNC">)</span><span class="WHIT"> 
+<span class='line'>178</span>         </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">newjson</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">CryptoJS.MD5</span><span class="PUNC">(</span><span class="NAME">newjson_string</span><span class="PUNC">)</span><span class="PUNC">.</span><span class="NAME">toString</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>179</span> </span><span class="WHIT">        </span><span class="NAME">oldjson</span><span class="PUNC">=</span><span class="NAME">localStorage.getItem</span><span class="PUNC">(</span><span class="STRN">"oldjson"</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>180</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="PUNC">(</span><span class="NAME">newjson</span><span class="WHIT"> </span><span class="PUNC">!==</span><span class="WHIT"> </span><span class="NAME">oldjson</span><span class="PUNC">)</span><span class="PUNC">{</span><span class="WHIT">
+<span class='line'>181</span> </span><span class="WHIT">            </span><span class="NAME">localStorage.setItem</span><span class="PUNC">(</span><span class="STRN">"oldjson"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">newjson</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>182</span> </span><span class="WHIT">            </span><span class="NAME">window.location.reload</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>183</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>184</span> </span><span class="WHIT">    </span><span class="PUNC">}</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="COMM">/**
+<span class='line'>188</span> * calls update functions for links, nodes and x-axis
+<span class='line'>189</span> * adds the nodes, links and tick functionality to the simulation
+<span class='line'>190</span> * @param {object} nodes - nodes
+<span class='line'>191</span> * @param {object} links - links
+<span class='line'>192</span> */</span><span class="WHIT">
+<span class='line'>193</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'>194</span> </span><span class="WHIT">    </span><span class="NAME">update_xaxis</span><span class="PUNC">(</span><span class="NAME">nodes</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>195</span> </span><span class="WHIT">    </span><span class="NAME">update_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'>196</span> </span><span class="WHIT">    </span><span class="NAME">update_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'>197</span> </span><span class="WHIT">    
+<span class='line'>198</span>     </span><span class="NAME">simulation.nodes</span><span class="PUNC">(</span><span class="NAME">nodes</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">on</span><span class="PUNC">(</span><span class="STRN">"tick"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">handle_tick</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>200</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'>201</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'>202</span> </span><span class="WHIT">    
+<span class='line'>203</span>     </span><span class="NAME">link.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">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">update_marker</span><span class="PUNC">(</span><span class="STRN">"#999"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">d.target</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="PUNC">}</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>204</span> </span><span class="WHIT">        </span><span class="PUNC">.</span><span class="NAME">style</span><span class="PUNC">(</span><span class="STRN">"stroke-dasharray"</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">self_citation</span><span class="PUNC">(</span><span class="NAME">d.source</span><span class="PUNC">,</span><span class="NAME">d.target</span><span class="PUNC">)</span><span class="PUNC">?</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="STRN">"8,8"</span><span class="PUNC">)</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="STRN">"1,0"</span><span class="PUNC">)</span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>205</span> </span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>206</span> 
+<span class='line'>207</span> </span><span class="COMM">/**
+<span class='line'>208</span> * initializes and shows x-axis
+<span class='line'>209</span> * @param {object} nodes - nodes
+<span class='line'>210</span> */</span><span class="WHIT">
+<span class='line'>211</span> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="NAME">update_xaxis</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'>212</span> </span><span class="WHIT">    </span><span class="NAME">years</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">[</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>213</span> </span><span class="WHIT">    </span><span class="KEYW">for</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">i</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">i</span><span class="WHIT"> </span><span class="PUNC">&lt;</span><span class="WHIT"> </span><span class="NAME">nodes.length</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">i</span><span class="PUNC">++</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
+<span class='line'>214</span> </span><span class="WHIT">        </span><span class="NAME">years.push</span><span class="PUNC">(</span><span class="NAME">parseInt</span><span class="PUNC">(</span><span class="NAME">parseInt</span><span class="PUNC">(</span><span class="REGX">/\d{4}\s*$/</span><span class="PUNC">.</span><span class="NAME">exec</span><span class="PUNC">(</span><span class="NAME">nodes</span><span class="PUNC">[</span><span class="NAME">i</span><span class="PUNC">]</span><span class="PUNC">[</span><span class="STRN">"year"</span><span class="PUNC">]</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'>215</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>216</span> 
+<span class='line'>217</span> </span><span class="WHIT">    </span><span class="NAME">xscale</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">d3.scaleLinear</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>218</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="NAME">d3.min</span><span class="PUNC">(</span><span class="NAME">years</span><span class="PUNC">)</span><span class="PUNC">-</span><span class="NUMB">1</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">d3.max</span><span class="PUNC">(</span><span class="NAME">years</span><span class="PUNC">)</span><span class="PUNC">+</span><span class="NUMB">1</span><span class="PUNC">]</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>219</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">1</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">width</span><span class="PUNC">-</span><span class="NUMB">1</span><span class="PUNC">]</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>220</span> 
+<span class='line'>221</span> </span><span class="WHIT">    </span><span class="NAME">xAxis.scale</span><span class="PUNC">(</span><span class="NAME">xscale</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>222</span> </span><span class="WHIT">    </span><span class="NAME">gX.call</span><span class="PUNC">(</span><span class="NAME">xAxis</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>223</span> </span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>224</span> 
+<span class='line'>225</span> </span><span class="COMM">/**
+<span class='line'>226</span> * initializes and shows links (edges)
+<span class='line'>227</span> * @param {object} links - links
+<span class='line'>228</span> */</span><span class="WHIT">
+<span class='line'>229</span> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="NAME">update_links</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'>230</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'>231</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'>232</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'>233</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'>234</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'>235</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'>236</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'>237</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'>238</span> </span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>239</span> 
+<span class='line'>240</span> </span><span class="COMM">/**
+<span class='line'>241</span> * initializes and shows nodes with circles, texts and a click functionality
+<span class='line'>242</span> * creates a new drag behavior and applies it to the circles
+<span class='line'>243</span> * @param {object} nodes - nodes
+<span class='line'>244</span> */</span><span class="WHIT">
+<span class='line'>245</span> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="NAME">update_nodes</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'>246</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'>247</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'>248</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'>249</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'>250</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'>251</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'>252</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">start_drag_node</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>253</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_node</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>254</span> </span><span class="WHIT">        </span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>255</span> 
+<span class='line'>256</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'>257</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'>258</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="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="NUMB">1.5</span><span class="PUNC">*</span><span class="NAME">r</span><span class="PUNC">+</span><span class="NAME">d.citations</span><span class="PUNC">*</span><span class="NUMB">0.15</span><span class="PUNC">}</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>259</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'>260</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">click_node</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>261</span> 
+<span class='line'>262</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'>263</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'>264</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'>265</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'>266</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">const</span><span class="WHIT"> </span><span class="NAME">first_author</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">d.author</span><span class="PUNC">[</span><span class="NUMB">0</span><span class="PUNC">]</span><span class="PUNC">.</span><span class="NAME">split</span><span class="PUNC">(</span><span class="STRN">" "</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>267</span> </span><span class="WHIT">        </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">first_author</span><span class="PUNC">[</span><span class="NAME">first_author.length</span><span class="PUNC">-</span><span class="NUMB">1</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="PUNC">}</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>268</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">click_node</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>269</span> </span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>270</span> 
+<span class='line'>271</span> </span><span class="COMM">/**
+<span class='line'>272</span> * creates arrowhead and returns its url
+<span class='line'>273</span> * @param {string} color - color of arrowhead
+<span class='line'>274</span> * @param {string} target - target node
+<span class='line'>275</span> */</span><span class="WHIT">
+<span class='line'>276</span> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="NAME">update_marker</span><span class="PUNC">(</span><span class="NAME">color</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">target</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
+<span class='line'>277</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">radius</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">1.5</span><span class="PUNC">*</span><span class="NAME">r</span><span class="PUNC">+</span><span class="NAME">target.citations</span><span class="PUNC">*</span><span class="NUMB">0.15</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>278</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="WHIT">
+<span class='line'>279</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="NAME">radius</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>280</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'>281</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">radius</span><span class="PUNC">+</span><span class="NUMB">9.5</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>282</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'>283</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'>284</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'>285</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'>286</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'>287</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'>288</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'>289</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="WHIT">
+<span class='line'>290</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'>291</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="NAME">radius</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'>292</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>293</span> 
+<span class='line'>294</span> </span><span class="COMM">/**
+<span class='line'>295</span> * sets color of circle and its links to black and removes the previous highlights
+<span class='line'>296</span> * displays overview info of node in textbox
+<span class='line'>297</span> * @param {object} node - node
+<span class='line'>298</span> */</span><span class="WHIT">
+<span class='line'>299</span> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="NAME">click_node</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'>300</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">raise</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>301</span> </span><span class="WHIT">    </span><span class="NAME">fix_nodes</span><span class="PUNC">(</span><span class="NAME">node</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>302</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="PUNC">(</span><span class="NAME">to_remove</span><span class="PUNC">)</span><span class="PUNC">{</span><span class="WHIT">
+<span class='line'>303</span> </span><span class="WHIT">        </span><span class="NAME">d3.select</span><span class="PUNC">(</span><span class="NAME">to_remove</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'>304</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>305</span> </span><span class="WHIT">    </span><span class="NAME">to_remove</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'>306</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'>307</span> </span><span class="WHIT">    </span><span class="NAME">mark_link</span><span class="PUNC">(</span><span class="NAME">node</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>308</span> </span><span class="WHIT">    </span><span class="NAME">textbox_content</span><span class="PUNC">(</span><span class="NAME">node</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>309</span> </span><span class="WHIT">    </span><span class="NAME">reset_button_highlight</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>310</span> </span><span class="WHIT">    </span><span class="NAME">highlight_button</span><span class="PUNC">(</span><span class="STRN">"overview"</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>311</span> </span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>312</span> 
+<span class='line'>313</span> </span><span class="COMM">/**
+<span class='line'>314</span> * removes the highlights of the circles and their links
+<span class='line'>315</span> */</span><span class="WHIT">
+<span class='line'>316</span> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="NAME">click_background</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
+<span class='line'>317</span> </span><span class="WHIT">    </span><span class="NAME">fix_nodes</span><span class="PUNC">(</span><span class="NAME">node</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>318</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'>319</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'>320</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'>321</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">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">update_marker</span><span class="PUNC">(</span><span class="STRN">'#999'</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">d.target</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="PUNC">}</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>322</span> </span><span class="WHIT">    </span><span class="NAME">text_abstract</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'>323</span> </span><span class="WHIT">    </span><span class="NAME">text_info</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'>324</span> </span><span class="WHIT">    </span><span class="NAME">reset_button_highlight</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>325</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'>326</span> </span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>327</span> 
+<span class='line'>328</span> </span><span class="COMM">/**
+<span class='line'>329</span> * returns true if journals have a common author (self-citation)
+<span class='line'>330</span> * @param {object} source - node
+<span class='line'>331</span> * @param {object} target - node
+<span class='line'>332</span> */</span><span class="WHIT">
+<span class='line'>333</span> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="NAME">self_citation</span><span class="PUNC">(</span><span class="NAME">source</span><span class="PUNC">,</span><span class="NAME">target</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
+<span class='line'>334</span> </span><span class="WHIT">    </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">source.author.some</span><span class="PUNC">(</span><span class="NAME">item</span><span class="PUNC">=</span><span class="PUNC">></span><span class="NAME">target.author.includes</span><span class="PUNC">(</span><span class="NAME">item</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>335</span> </span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>336</span> 
+<span class='line'>337</span> </span><span class="COMM">/**
+<span class='line'>338</span> * sets color of link (line and arrowhead) to black if it is directly connected to node
+<span class='line'>339</span> * and to grey otherwise
+<span class='line'>340</span> * @param {object} node - node
+<span class='line'>341</span> */</span><span class="WHIT">
+<span class='line'>342</span> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="NAME">mark_link</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'>343</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'>344</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'>345</span> </span><span class="WHIT">            </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">is_link_for_node</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">"#DEDEDE"</span><span class="PUNC">;</span><span class="PUNC">}</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>346</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'>347</span> </span><span class="WHIT">            </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">is_link_for_node</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">update_marker</span><span class="PUNC">(</span><span class="STRN">'#000000'</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">o.target</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">update_marker</span><span class="PUNC">(</span><span class="STRN">"#DEDEDE"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">o.target</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="PUNC">}</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>348</span> </span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>349</span> 
+<span class='line'>350</span> </span><span class="COMM">/**
+<span class='line'>351</span> * returns true if link is directly connected to node and false if it is not
+<span class='line'>352</span> * @param {object} node - node
+<span class='line'>353</span> * @param {object} link - link
+<span class='line'>354</span> */</span><span class="WHIT">
+<span class='line'>355</span> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="NAME">is_link_for_node</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="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
+<span class='line'>356</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'>357</span> </span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>358</span> 
+<span class='line'>359</span> </span><span class="COMM">/**
+<span class='line'>360</span> * saves text for overview and abstract of node
+<span class='line'>361</span> * outputs node info to textbox
+<span class='line'>362</span> * @param {object} node - node
+<span class='line'>363</span> */</span><span class="WHIT">
+<span class='line'>364</span> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="NAME">textbox_content</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'>365</span> </span><span class="WHIT">    </span><span class="NAME">authors</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">node.author</span><span class="PUNC">[</span><span class="NUMB">0</span><span class="PUNC">]</span><span class="WHIT">
+<span class='line'>366</span> </span><span class="WHIT">    </span><span class="KEYW">for</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">i</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">1</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">i</span><span class="WHIT"> </span><span class="PUNC">&lt;</span><span class="WHIT"> </span><span class="NAME">node.author.length</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">i</span><span class="PUNC">++</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
+<span class='line'>367</span> </span><span class="WHIT">        </span><span class="NAME">authors</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="STRN">", "</span><span class="PUNC">+</span><span class="NAME">node.author</span><span class="PUNC">[</span><span class="NAME">i</span><span class="PUNC">]</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>368</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>369</span> </span><span class="WHIT">    </span><span class="NAME">text_info</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">'&lt;/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'>370</span> </span><span class="WHIT">    </span><span class="STRN">'&lt;/br>'</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="STRN">'&lt;/br>'</span><span class="PUNC">+</span><span class="STRN">"Author:"</span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">'&lt;/br>'</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="NAME">authors</span><span class="PUNC">+</span><span class="STRN">'&lt;/br>'</span><span class="PUNC">+</span><span class="STRN">'&lt;/br>'</span><span class="PUNC">+</span><span class="STRN">"Date:"</span><span class="PUNC">+</span><span class="STRN">'&lt;/br>'</span><span class="WHIT">
+<span class='line'>371</span> </span><span class="WHIT">    </span><span class="PUNC">+</span><span class="NAME">node.year</span><span class="PUNC">+</span><span class="STRN">'&lt;/br>'</span><span class="PUNC">+</span><span class="STRN">'&lt;/br>'</span><span class="PUNC">+</span><span class="STRN">"Journal:"</span><span class="PUNC">+</span><span class="STRN">'&lt;/br>'</span><span class="PUNC">+</span><span class="NAME">node.journal</span><span class="PUNC">+</span><span class="STRN">'&lt;/br>'</span><span class="PUNC">+</span><span class="STRN">'&lt;/br>'</span><span class="PUNC">+</span><span class="STRN">"DOI:"</span><span class="WHIT">
+<span class='line'>372</span> </span><span class="WHIT">    </span><span class="PUNC">+</span><span class="STRN">'&lt;/br>'</span><span class="PUNC">+</span><span class="NAME">node.doi</span><span class="PUNC">+</span><span class="STRN">'&lt;/br>'</span><span class="PUNC">+</span><span class="STRN">'&lt;/br>'</span><span class="PUNC">+</span><span class="STRN">"Citations:"</span><span class="WHIT">
+<span class='line'>373</span> </span><span class="WHIT">    </span><span class="PUNC">+</span><span class="STRN">'&lt;/br>'</span><span class="PUNC">+</span><span class="NAME">node.citations</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>374</span> </span><span class="WHIT">    </span><span class="NAME">text_abstract</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">node.abstract</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>375</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="NAME">text_info</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>376</span> </span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>377</span> 
+<span class='line'>378</span> </span><span class="COMM">/**
+<span class='line'>379</span> * sets color of btn to dark gray
+<span class='line'>380</span> * @param {object} btn - button
+<span class='line'>381</span> */</span><span class="WHIT">
+<span class='line'>382</span> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="NAME">highlight_button</span><span class="PUNC">(</span><span class="NAME">btn</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
+<span class='line'>383</span> </span><span class="WHIT">    </span><span class="NAME">reset_button_highlight</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>384</span> </span><span class="WHIT">    </span><span class="NAME">document.getElementById</span><span class="PUNC">(</span><span class="NAME">btn</span><span class="PUNC">)</span><span class="PUNC">.</span><span class="NAME">style.background</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"#CACACA"</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>385</span> </span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>386</span> 
+<span class='line'>387</span> </span><span class="COMM">/**
+<span class='line'>388</span> * sets color of all buttons to default light gray
+<span class='line'>389</span> */</span><span class="WHIT">
+<span class='line'>390</span> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="NAME">reset_button_highlight</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
+<span class='line'>391</span> </span><span class="WHIT">    </span><span class="NAME">document.getElementById</span><span class="PUNC">(</span><span class="STRN">"overview"</span><span class="PUNC">)</span><span class="PUNC">.</span><span class="NAME">style.background</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'>392</span> </span><span class="WHIT">    </span><span class="NAME">document.getElementById</span><span class="PUNC">(</span><span class="STRN">"abstract"</span><span class="PUNC">)</span><span class="PUNC">.</span><span class="NAME">style.background</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'>393</span> </span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>394</span> 
+<span class='line'>395</span> </span><span class="COMM">/**
+<span class='line'>396</span> * displays abstract in textbox if a is true, overview text otherwise
+<span class='line'>397</span> * @param {bool} a- bool
+<span class='line'>398</span> */</span><span class="WHIT">
+<span class='line'>399</span> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="NAME">display_abstract</span><span class="PUNC">(</span><span class="NAME">a</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
+<span class='line'>400</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">text_abstract</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">text_info</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><span class="PUNC">{</span><span class="WHIT">
+<span class='line'>401</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'>402</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>403</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'>404</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">a</span><span class="WHIT"> </span><span class="PUNC">==</span><span class="WHIT"> </span><span class="KEYW">true</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
+<span class='line'>405</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="NAME">text_abstract</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>406</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>407</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'>408</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="NAME">text_info</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>409</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>410</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">   
+<span class='line'>411</span> </span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>412</span> 
+<span class='line'>413</span> </span><span class="COMM">/**
+<span class='line'>414</span> * updates the positions of the links and nodes
+<span class='line'>415</span> */</span><span class="WHIT">
+<span class='line'>416</span> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="NAME">handle_tick</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
+<span class='line'>417</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">xscale</span><span class="PUNC">(</span><span class="NAME">parseInt</span><span class="PUNC">(</span><span class="REGX">/\d{4}\s*$/</span><span class="PUNC">.</span><span class="NAME">exec</span><span class="PUNC">(</span><span class="NAME">d.source.year</span><span class="PUNC">)</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'>418</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'>419</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">xscale</span><span class="PUNC">(</span><span class="NAME">parseInt</span><span class="PUNC">(</span><span class="REGX">/\d{4}\s*$/</span><span class="PUNC">.</span><span class="NAME">exec</span><span class="PUNC">(</span><span class="NAME">d.target.year</span><span class="PUNC">)</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'>420</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'>421</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">xscale</span><span class="PUNC">(</span><span class="NAME">parseInt</span><span class="PUNC">(</span><span class="REGX">/\d{4}\s*$/</span><span class="PUNC">.</span><span class="NAME">exec</span><span class="PUNC">(</span><span class="NAME">d.year</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="PUNC">)</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'>422</span> </span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>423</span> 
+<span class='line'>424</span> </span><span class="COMM">/**
+<span class='line'>425</span> * initializes the dragging of the node
+<span class='line'>426</span> * @param {object} node - node
+<span class='line'>427</span> */</span><span class="WHIT">
+<span class='line'>428</span> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="NAME">start_drag_node</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'>429</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">raise</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>430</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'>431</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'>432</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'>433</span> </span><span class="WHIT">    </span><span class="NAME">fix_nodes</span><span class="PUNC">(</span><span class="NAME">node</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>434</span> </span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>435</span> 
+<span class='line'>436</span> </span><span class="COMM">/**
+<span class='line'>437</span> * applies the dragging to the node
+<span class='line'>438</span> * @param {object} node - node
+<span class='line'>439</span> */</span><span class="WHIT">
+<span class='line'>440</span> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="NAME">dragged_node</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'>441</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'>442</span> </span><span class="WHIT">    </span><span class="NAME">fix_nodes</span><span class="PUNC">(</span><span class="NAME">node</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>443</span> </span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>444</span> 
+<span class='line'>445</span> </span><span class="COMM">/**
+<span class='line'>446</span> * fix positions of all nodes except for the current node
+<span class='line'>447</span> * @param {object} this_node - node
+<span class='line'>448</span> */</span><span class="WHIT">
+<span class='line'>449</span> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="NAME">fix_nodes</span><span class="PUNC">(</span><span class="NAME">this_node</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
+<span class='line'>450</span> </span><span class="WHIT">    </span><span class="NAME">node.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'>451</span> </span><span class="WHIT">      </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this_node</span><span class="WHIT"> </span><span class="PUNC">!=</span><span class="WHIT"> </span><span class="NAME">d</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
+<span class='line'>452</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.x</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>453</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.y</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>454</span> </span><span class="WHIT">      </span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>455</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>456</span> </span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>457</span> 
+<span class='line'>458</span> </span><span class="COMM">/**
+<span class='line'>459</span> * applies the transformation (zooming or dragging) to the g element
+<span class='line'>460</span> */</span><span class="WHIT">
+<span class='line'>461</span> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="NAME">handle_transformation</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
+<span class='line'>462</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'>463</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">new_xScale</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">d3.event.transform.rescaleX</span><span class="PUNC">(</span><span class="NAME">xscale</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>464</span> </span><span class="WHIT">    </span><span class="NAME">gX.call</span><span class="PUNC">(</span><span class="NAME">xAxis.scale</span><span class="PUNC">(</span><span class="NAME">new_xScale</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>465</span> </span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>466</span> 
+<span class='line'>467</span> </span><span class="COMM">/**
+<span class='line'>468</span> * transforms svg so that the zoom is adapted to the size of the graph
+<span class='line'>469</span> */</span><span class="WHIT">
+<span class='line'>470</span> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="NAME">zoom_to_graph</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
+<span class='line'>471</span> </span><span class="WHIT">    </span><span class="NAME">node_bounds</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">d3.selectAll</span><span class="PUNC">(</span><span class="STRN">"svg.graph"</span><span class="PUNC">)</span><span class="PUNC">.</span><span class="NAME">node</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">.</span><span class="NAME">getBBox</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>472</span> </span><span class="WHIT">    </span><span class="NAME">svg_bounds</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">"rect"</span><span class="PUNC">)</span><span class="PUNC">.</span><span class="NAME">node</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">.</span><span class="NAME">getBBox</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>473</span> 
+<span class='line'>474</span> </span><span class="WHIT">    </span><span class="NAME">perc_x</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">width</span><span class="PUNC">/</span><span class="PUNC">(</span><span class="NAME">node_bounds.width</span><span class="PUNC">+</span><span class="NUMB">100</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>475</span> </span><span class="WHIT">    </span><span class="NAME">perc_y</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="NAME">node_bounds.height</span><span class="PUNC">+</span><span class="NUMB">100</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>476</span> </span><span class="WHIT">    </span><span class="NAME">zoom_perc</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">d3.min</span><span class="PUNC">(</span><span class="PUNC">[</span><span class="NAME">perc_x</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">perc_y</span><span class="PUNC">]</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>477</span> </span><span class="WHIT">    
+<span class='line'>478</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'>479</span> </span><span class="WHIT">		</span><span class="PUNC">.</span><span class="NAME">call</span><span class="PUNC">(</span><span class="NAME">zoom.scaleBy</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">zoom_perc</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>480</span> </span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>481</span> 
+<span class='line'>482</span> </span><span class="COMM">/**
+<span class='line'>483</span> * transforms svg so that the zoom and drag is reset
+<span class='line'>484</span> */</span><span class="WHIT">
+<span class='line'>485</span> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="NAME">reset_view</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
+<span class='line'>486</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'>487</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="WHIT">
+<span class='line'>488</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'>489</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'>490</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'>491</span> </span><span class="WHIT">		</span><span class="PUNC">.</span><span class="NAME">call</span><span class="PUNC">(</span><span class="NAME">zoom.scaleBy</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">zoom_perc</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>492</span> </span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>493</span> 
+<span class='line'>494</span> </span><span class="COMM">/**
+<span class='line'>495</span> * save svg as png
+<span class='line'>496</span> */</span><span class="WHIT">
+<span class='line'>497</span> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="NAME">save_svg</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">{</span><span class="WHIT">
+<span class='line'>498</span> </span><span class="WHIT">	</span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">svgString</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">get_svg_string</span><span class="PUNC">(</span><span class="NAME">svg.node</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>499</span> </span><span class="WHIT">	</span><span class="NAME">svg_string_to_image</span><span class="PUNC">(</span><span class="NAME">svgString</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NUMB">2</span><span class="PUNC">*</span><span class="NAME">width</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NUMB">2</span><span class="PUNC">*</span><span class="NAME">height</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">'png'</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">save</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="COMM">// passes Blob and filesize String to the callback</span><span class="WHIT">
+<span class='line'>500</span> 
+<span class='line'>501</span> </span><span class="WHIT">	</span><span class="KEYW">function</span><span class="WHIT"> </span><span class="NAME">save</span><span class="PUNC">(</span><span class="WHIT"> </span><span class="NAME">dataBlob</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">filesize</span><span class="WHIT"> </span><span class="PUNC">)</span><span class="PUNC">{</span><span class="WHIT">
+<span class='line'>502</span> </span><span class="WHIT">		</span><span class="NAME">saveAs</span><span class="PUNC">(</span><span class="NAME">dataBlob</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">'D3 vis exported to PNG.png'</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="COMM">// FileSaver.js function</span><span class="WHIT">
+<span class='line'>503</span> </span><span class="WHIT">	</span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>504</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>505</span> 
+<span class='line'>506</span> </span><span class="COMM">/**
+<span class='line'>507</span> * generate svgString
+<span class='line'>508</span> * @param {object} svgNode - node
+<span class='line'>509</span> */</span><span class="WHIT">
+<span class='line'>510</span> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="NAME">get_svg_string</span><span class="PUNC">(</span><span class="NAME">svgNode</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
+<span class='line'>511</span> </span><span class="WHIT">	</span><span class="NAME">svgNode.setAttribute</span><span class="PUNC">(</span><span class="STRN">'xlink'</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">'http://www.w3.org/1999/xlink'</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>512</span> </span><span class="WHIT">	</span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">cssStyleText</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">get_css_styles</span><span class="PUNC">(</span><span class="NAME">svgNode</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>513</span> </span><span class="WHIT">	</span><span class="NAME">append_css</span><span class="PUNC">(</span><span class="NAME">cssStyleText</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">svgNode</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>514</span> 
+<span class='line'>515</span> </span><span class="WHIT">	</span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">serializer</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">new</span><span class="WHIT"> </span><span class="NAME">XMLSerializer</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>516</span> </span><span class="WHIT">	</span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">svgString</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">serializer.serializeToString</span><span class="PUNC">(</span><span class="NAME">svgNode</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>517</span> </span><span class="WHIT">	</span><span class="NAME">svgString</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">svgString.replace</span><span class="PUNC">(</span><span class="REGX">/(\w+)?:?xlink=/g</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">'xmlns:xlink='</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="COMM">// Fix root xlink without namespace</span><span class="WHIT">
+<span class='line'>518</span> </span><span class="WHIT">	</span><span class="NAME">svgString</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">svgString.replace</span><span class="PUNC">(</span><span class="REGX">/NS\d+:href/g</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">'xlink:href'</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="COMM">// Safari NS namespace fix</span><span class="WHIT">
+<span class='line'>519</span> 
+<span class='line'>520</span> </span><span class="WHIT">	</span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">svgString</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>521</span> 
+<span class='line'>522</span> </span><span class="WHIT">	</span><span class="KEYW">function</span><span class="WHIT"> </span><span class="NAME">get_css_styles</span><span class="PUNC">(</span><span class="NAME">parentElement</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
+<span class='line'>523</span> </span><span class="WHIT">		</span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">selectorTextArr</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">[</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>524</span> 
+<span class='line'>525</span> </span><span class="WHIT">		</span><span class="COMM">// Add Parent element Id and Classes to the list</span><span class="WHIT">
+<span class='line'>526</span> </span><span class="WHIT">		</span><span class="NAME">selectorTextArr.push</span><span class="PUNC">(</span><span class="STRN">'#'</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">parentElement.id</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>527</span> </span><span class="WHIT">		</span><span class="KEYW">for</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">c</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">c</span><span class="WHIT"> </span><span class="PUNC">&lt;</span><span class="WHIT"> </span><span class="NAME">parentElement.classList.length</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">c</span><span class="PUNC">++</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>528</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">contains</span><span class="PUNC">(</span><span class="STRN">'.'</span><span class="PUNC">+</span><span class="NAME">parentElement.classList</span><span class="PUNC">[</span><span class="NAME">c</span><span class="PUNC">]</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">selectorTextArr</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>529</span> </span><span class="WHIT">					</span><span class="NAME">selectorTextArr.push</span><span class="PUNC">(</span><span class="STRN">'.'</span><span class="PUNC">+</span><span class="NAME">parentElement.classList</span><span class="PUNC">[</span><span class="NAME">c</span><span class="PUNC">]</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>530</span> 
+<span class='line'>531</span> </span><span class="WHIT">		</span><span class="COMM">// Add Children element Ids and Classes to the list</span><span class="WHIT">
+<span class='line'>532</span> </span><span class="WHIT">		</span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">nodes</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">parentElement.getElementsByTagName</span><span class="PUNC">(</span><span class="STRN">"*"</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>533</span> </span><span class="WHIT">		</span><span class="KEYW">for</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">i</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">i</span><span class="WHIT"> </span><span class="PUNC">&lt;</span><span class="WHIT"> </span><span class="NAME">nodes.length</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">i</span><span class="PUNC">++</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
+<span class='line'>534</span> </span><span class="WHIT">			</span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">id</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">nodes</span><span class="PUNC">[</span><span class="NAME">i</span><span class="PUNC">]</span><span class="PUNC">.</span><span class="NAME">id</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>535</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">contains</span><span class="PUNC">(</span><span class="STRN">'#'</span><span class="PUNC">+</span><span class="NAME">id</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">selectorTextArr</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>536</span> </span><span class="WHIT">				</span><span class="NAME">selectorTextArr.push</span><span class="PUNC">(</span><span class="STRN">'#'</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">id</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>537</span> 
+<span class='line'>538</span> </span><span class="WHIT">			</span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">classes</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">nodes</span><span class="PUNC">[</span><span class="NAME">i</span><span class="PUNC">]</span><span class="PUNC">.</span><span class="NAME">classList</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>539</span> </span><span class="WHIT">			</span><span class="KEYW">for</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">c</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">c</span><span class="WHIT"> </span><span class="PUNC">&lt;</span><span class="WHIT"> </span><span class="NAME">classes.length</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">c</span><span class="PUNC">++</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>540</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">contains</span><span class="PUNC">(</span><span class="STRN">'.'</span><span class="PUNC">+</span><span class="NAME">classes</span><span class="PUNC">[</span><span class="NAME">c</span><span class="PUNC">]</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">selectorTextArr</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>541</span> </span><span class="WHIT">					</span><span class="NAME">selectorTextArr.push</span><span class="PUNC">(</span><span class="STRN">'.'</span><span class="PUNC">+</span><span class="NAME">classes</span><span class="PUNC">[</span><span class="NAME">c</span><span class="PUNC">]</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>542</span> </span><span class="WHIT">		</span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>543</span> 
+<span class='line'>544</span> </span><span class="WHIT">		</span><span class="COMM">// Extract CSS Rules</span><span class="WHIT">
+<span class='line'>545</span> </span><span class="WHIT">		</span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">extractedCSSText</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'>546</span> </span><span class="WHIT">		</span><span class="KEYW">for</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">i</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">i</span><span class="WHIT"> </span><span class="PUNC">&lt;</span><span class="WHIT"> </span><span class="NAME">document.styleSheets.length</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">i</span><span class="PUNC">++</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
+<span class='line'>547</span> </span><span class="WHIT">			</span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">s</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">document.styleSheets</span><span class="PUNC">[</span><span class="NAME">i</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>548</span> </span><span class="WHIT">			
+<span class='line'>549</span> 			</span><span class="KEYW">try</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
+<span class='line'>550</span> </span><span class="WHIT">			    </span><span class="KEYW">if</span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">s.cssRules</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="KEYW">continue</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>551</span> </span><span class="WHIT">			</span><span class="PUNC">}</span><span class="WHIT"> 
+<span class='line'>552</span>             </span><span class="KEYW">catch</span><span class="PUNC">(</span><span class="NAME">e</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
+<span class='line'>553</span> </span><span class="WHIT">		    	</span><span class="KEYW">if</span><span class="PUNC">(</span><span class="NAME">e.name</span><span class="WHIT"> </span><span class="PUNC">!==</span><span class="WHIT"> </span><span class="STRN">'SecurityError'</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="KEYW">throw</span><span class="WHIT"> </span><span class="NAME">e</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="COMM">// for Firefox</span><span class="WHIT">
+<span class='line'>554</span> </span><span class="WHIT">		    	</span><span class="KEYW">continue</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>555</span> </span><span class="WHIT">		    </span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>556</span> 
+<span class='line'>557</span> </span><span class="WHIT">			</span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">cssRules</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">s.cssRules</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>558</span> </span><span class="WHIT">			</span><span class="KEYW">for</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">r</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">r</span><span class="WHIT"> </span><span class="PUNC">&lt;</span><span class="WHIT"> </span><span class="NAME">cssRules.length</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">r</span><span class="PUNC">++</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
+<span class='line'>559</span> </span><span class="WHIT">				</span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">contains</span><span class="PUNC">(</span><span class="NAME">cssRules</span><span class="PUNC">[</span><span class="NAME">r</span><span class="PUNC">]</span><span class="PUNC">.</span><span class="NAME">selectorText</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">selectorTextArr</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="WHIT">
+<span class='line'>560</span> </span><span class="WHIT">					</span><span class="NAME">extractedCSSText</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">cssRules</span><span class="PUNC">[</span><span class="NAME">r</span><span class="PUNC">]</span><span class="PUNC">.</span><span class="NAME">cssText</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>561</span> </span><span class="WHIT">			</span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>562</span> </span><span class="WHIT">		</span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>563</span> </span><span class="WHIT">		</span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">extractedCSSText</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>564</span> 
+<span class='line'>565</span> </span><span class="WHIT">		</span><span class="KEYW">function</span><span class="WHIT"> </span><span class="NAME">contains</span><span class="PUNC">(</span><span class="NAME">str</span><span class="PUNC">,</span><span class="NAME">arr</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
+<span class='line'>566</span> </span><span class="WHIT">			</span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">arr.indexOf</span><span class="PUNC">(</span><span class="NAME">str</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">===</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="NUMB">1</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT"> </span><span class="KEYW">false</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="KEYW">true</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>567</span> </span><span class="WHIT">		</span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>568</span> </span><span class="WHIT">	</span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>569</span> 
+<span class='line'>570</span> </span><span class="WHIT">	</span><span class="KEYW">function</span><span class="WHIT"> </span><span class="NAME">append_css</span><span class="PUNC">(</span><span class="NAME">cssText</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">element</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
+<span class='line'>571</span> </span><span class="WHIT">		</span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">styleElement</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">document.createElement</span><span class="PUNC">(</span><span class="STRN">"style"</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>572</span> </span><span class="WHIT">		</span><span class="NAME">styleElement.setAttribute</span><span class="PUNC">(</span><span class="STRN">"type"</span><span class="PUNC">,</span><span class="STRN">"text/css"</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT"> 
+<span class='line'>573</span> 		</span><span class="NAME">styleElement.innerHTML</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">cssText</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>574</span> </span><span class="WHIT">		</span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">refNode</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">element.hasChildNodes</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT"> </span><span class="NAME">element.children</span><span class="PUNC">[</span><span class="NUMB">0</span><span class="PUNC">]</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="KEYW">null</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>575</span> </span><span class="WHIT">		</span><span class="NAME">element.insertBefore</span><span class="PUNC">(</span><span class="NAME">styleElement</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">refNode</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>576</span> </span><span class="WHIT">	</span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>577</span> </span><span class="PUNC">}</span><span class="WHIT">
+<span class='line'>578</span> 
+<span class='line'>579</span> </span><span class="COMM">/**
+<span class='line'>580</span> * convert svgString to image and export it
+<span class='line'>581</span> * @param {object} svgString - svgString
+<span class='line'>582</span> * @param {object} width - width of image
+<span class='line'>583</span> * @param {object} height - height of image
+<span class='line'>584</span> * @param {object} format - format to save image in 
+<span class='line'>585</span> * @param {object} callback - callback function 
+<span class='line'>586</span> */</span><span class="WHIT">
+<span class='line'>587</span> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="NAME">svg_string_to_image</span><span class="PUNC">(</span><span class="WHIT"> </span><span class="NAME">svgString</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">width</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">height</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">format</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">callback</span><span class="WHIT"> </span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
+<span class='line'>588</span> </span><span class="WHIT">	</span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">format</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">format</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT"> </span><span class="NAME">format</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="STRN">'png'</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>589</span> 
+<span class='line'>590</span> </span><span class="WHIT">	</span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">imgsrc</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">'data:image/svg+xml;base64,'</span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">btoa</span><span class="PUNC">(</span><span class="NAME">unescape</span><span class="PUNC">(</span><span class="NAME">encodeURIComponent</span><span class="PUNC">(</span><span class="NAME">svgString</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="COMM">// Convert SVG string to data URL</span><span class="WHIT">
+<span class='line'>591</span> 
+<span class='line'>592</span> </span><span class="WHIT">	</span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">canvas</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">document.createElement</span><span class="PUNC">(</span><span class="STRN">"canvas"</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>593</span> </span><span class="WHIT">	</span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">context</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">canvas.getContext</span><span class="PUNC">(</span><span class="STRN">"2d"</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>594</span> 
+<span class='line'>595</span> </span><span class="WHIT">	</span><span class="NAME">canvas.width</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 class='line'>596</span> </span><span class="WHIT">	</span><span class="NAME">canvas.height</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">height</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>597</span> 
+<span class='line'>598</span> </span><span class="WHIT">	</span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">image</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">new</span><span class="WHIT"> </span><span class="NAME">Image</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>599</span> </span><span class="WHIT">	</span><span class="NAME">image.onload</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
+<span class='line'>600</span> </span><span class="WHIT">		</span><span class="NAME">context.clearRect</span><span class="PUNC">(</span><span class="NUMB">0</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">width</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'>601</span> </span><span class="WHIT">		</span><span class="NAME">context.drawImage</span><span class="PUNC">(</span><span class="NAME">image</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">width</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'>602</span> 
+<span class='line'>603</span> </span><span class="WHIT">		</span><span class="NAME">canvas.toBlob</span><span class="PUNC">(</span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">blob</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
+<span class='line'>604</span> </span><span class="WHIT">			</span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">filesize</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">Math.round</span><span class="PUNC">(</span><span class="NAME">blob.length</span><span class="PUNC">/</span><span class="NUMB">1024</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">' KB'</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>605</span> </span><span class="WHIT">			</span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">callback</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="NAME">callback</span><span class="PUNC">(</span><span class="NAME">blob</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">filesize</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>606</span> </span><span class="WHIT">		</span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>607</span> </span><span class="WHIT">	</span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>608</span> </span><span class="WHIT">	</span><span class="NAME">image.src</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">imgsrc</span><span class="PUNC">;</span><span class="WHIT">
+<span class='line'>609</span> </span><span class="PUNC">}</span></pre></body></html>
\ No newline at end of file
diff --git a/assets/index.html b/assets/index.html
index 72477ea7b9ed378ee590d170bdaab71c45b1b58e..4a6f74603e9db1f1d403d47e05ffabe84d202a38 100644
--- a/assets/index.html
+++ b/assets/index.html
@@ -87,22 +87,21 @@
     </style>
 </head>
 
-<body>
-    <button id="change_graph" class="display" onclick="display()">Display Timeline</button>
-
-    <!-- graph 576-->
+<body>    
+    <!-- graph -->
     <svg class="graph" width="680" height="560"></svg>
     <p id="oldjson"></p>
-
+    
     <!-- legend -->
     <div class="legendbox"><svg class="legendsvg"></svg></div>
-
+    
     <!-- textbox -->
     <div class="textbox" id="textbox">Click node</div>
     <button id="overview" class="overview" onclick='display_abstract(false), highlight_button("overview")'>Overview</button>
     <button id="abstract" class="abstract" onclick='display_abstract(true), highlight_button("abstract")'>Abstract</button>
-
+    
     <!-- buttons -->
+    <button id="change_graph" class="display" onclick="display()">Display Timeline</button>
     <button onclick="location.reload()">Reload Graph</button>
     <button class="resetZoom" onclick="reset_view()">Reset View</button>
     <button class="save" onclick="save_svg()">Save</button>
@@ -114,9 +113,11 @@
     <script src="https://cdn.rawgit.com/eligrey/canvas-toBlob.js/f1a01896135ab378aa5c0118eadd81da55e698d8/canvas-toBlob.js"></script>
 	<script src="https://cdn.rawgit.com/eligrey/FileSaver.js/e9d941381475b5df8b7d7691013401e171014e89/FileSaver.min.js"></script>
 
+    <!-- scripts to convert the content of a file into a hash value -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.0.0/core.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/md5.js"></script>
     
+    <!-- script to switch between default version and timeline version -->
     <script type="text/javascript" >
         if (window.location.hash=='#default') {
             document.getElementById("change_graph").innerHTML = 'Display Timeline';
diff --git a/citation_parser_main.py b/citation_parser_main.py
index 342ac6cb9ec77e204f46d8ccac8425ff8d46e1fd..988e57206cd426be825cb6c50a4157755501597c 100644
--- a/citation_parser_main.py
+++ b/citation_parser_main.py
@@ -15,14 +15,14 @@ import plotly.express as px
 import dash_bootstrap_components as dbc # pip install dash-bootstrap-components
 
 
-
-app = dash.Dash(__name__, external_stylesheets=[dbc.themes.SPACELAB])  #SPACELAB https://bootswatch.com/default/ for more themes)
+#SPACELAB is added as a style by https://bootswatch.com/default/
+app = dash.Dash(__name__, external_stylesheets=[dbc.themes.SPACELAB])
 
 # List of options when inputting data and generating the graph
 additional_options = ['Update Automatically','Smart Input']
 
 # Reads the contents of info_box.txt.
-# They can later be displayed by pressing the corresponding button.
+# They can later be displayed by pressing the corresponding "Show Info" button.
 f = open('info_box.txt', 'r')
 boxcontent = f.read()
 f.close()
@@ -30,6 +30,7 @@ f.close()
 app.layout = html.Div([
 html.Div(children=[
     # Layer 0: For the Header and Help Function(s)
+    #Show Info button for showing Informations
     dbc.Button(
             'Show Info',
             id='collapse-button',
@@ -37,6 +38,7 @@ html.Div(children=[
             color="primary",
             n_clicks=0,
         ),
+        #state is set to be collapsed at first
         dbc.Collapse(
             dbc.Card(dbc.CardBody(html.Div(boxcontent, style={'whiteSpace': 'pre-line', 'font-size': '10px'}))),
             id='collapse',
@@ -72,14 +74,14 @@ html.Div(children=[
             #Drag and drop or click to select a file to upload
                 ["Drag and drop"]),
             style={
-                "width": "360px",
+                "width": "400px",
                 "height": "60px",
                 "lineHeight": "60px",
                 "borderWidth": "1px",
                 "borderStyle": "dashed",
                 "borderRadius": "5px",
                 "textAlign": "center",
-                "margin": "10px"
+                "margin": "10px",
             }),size="lg", color="primary", type="border", fullscreen=True,),
     ]),
    
@@ -244,10 +246,12 @@ def update_input_checklist(input_value,btn1,btn2,filecontents,all_inputs,
 )
 def toggle_collapse(n, is_open):
     '''
-    This callback shows and hides the (first) info-box by, checking how# often
-    the button has been pressed. The text was loaded at the top.
-    :param n_clicks: number of times show-info has been clicked.
-    'type n_clicks: int
+    This callback shows and hides the info-box. The text was loaded at the top from an extern .txt.
+    
+    :param n: number of times show-info has been clicked.
+    :type n: int
+    :param is_open state of the show-info button
+    :type is_open: boolean
     '''
     if n:
         return not is_open
@@ -280,19 +284,23 @@ def generate_output(n_clicks,all_inputs,forward_depth,backward_depth,additional_
     :type additional_options: list of strings
     '''
     changed_id = [p['prop_id'] for p in callback_context.triggered][0]
-    if n_clicks is None:
-        raise PreventUpdate
-    elif 'Update Automatically' in additional_options \
+    
+    # This branch is entered when 'Generate Graph' is pushed or 'Update Automatically' is selected
+    # and the checklist or recursion depths are changed.
+    if 'Update Automatically' in additional_options \
             or 'start-button' in changed_id:
         input_links = [x['value'] for x in all_inputs]
+        # Processing only returns a potential error message. The data for the graph is simply saved
+        # in the specified file.
         errors = Processing(input_links,int(forward_depth),int(backward_depth),'assets/json_text.json')
         if errors:
+            # This construct is needed because dash removes white spaces and newlines when concatinating
+            # strings with '\n'.join(...) or similar methods.
             message = ['The following inputs are invalid and were not used:']
             for error in errors:
                 message.append(html.Br())
                 message.append(error)
             message = html.P(message)
-            #message = [html.P(error) for error in errors]
             return message
 
 if __name__ == '__main__':
diff --git a/info_box.txt b/info_box.txt
index 2fac1417332f1bac73e3c108d2da5ddbb62d7fd4..f800bf817347efa66036ab64be73f19d7250dfc7 100644
--- a/info_box.txt
+++ b/info_box.txt
@@ -12,3 +12,4 @@ By entering a DOI ("Digital Object Identifier") or hyperlink to a scientific art
 
 Smart Input: Direct verification for correctness of the input. In addition, the DOI is no longer displayed but:
 The Author, The Journal, The Publication Date. (must be activated before adding the DOI)
+
diff --git a/input/get/journal_fetcher.py b/input/get/journal_fetcher.py
index 03ce6324dc38aae05bbabbb6512183e498f9d7a3..3db36bf8fe0aaa505352d13367304b5407decf02 100755
--- a/input/get/journal_fetcher.py
+++ b/input/get/journal_fetcher.py
@@ -9,7 +9,6 @@ from bs4 import BeautifulSoup
 import requests
 from input.publication import Publication
 
-
 class JournalFetcher(metaclass=ABCMeta):
     """
     This is a abstract-class for fetcher modules.
@@ -118,4 +117,4 @@ class JournalFetcher(metaclass=ABCMeta):
         ,"Nucleic Acids Res.":"Nucleic Acids Research"
         ,"Build. Environ.":"Building and Environment"
         ,"Sci. Rep.":"Scientific Reports"
-        }
\ No newline at end of file
+        }
diff --git a/input/requirements.txt b/input/requirements.txt
deleted file mode 100644
index a151126691e7f0a9f1c824e9cbac243a96b32e71..0000000000000000000000000000000000000000
--- a/input/requirements.txt
+++ /dev/null
@@ -1,2 +0,0 @@
-beautifulsoup4
-requests
\ No newline at end of file
diff --git a/requirements b/requirements
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..08df71982af3b87747038cc9387723b3ef9dfb5c 100644
--- a/requirements
+++ b/requirements
@@ -0,0 +1,6 @@
+requests
+beautifulsoup4
+plotly
+dash
+pandas
+dash-bootstrap-components