Compare revisions

Malte Schokolowski · Malte Schokolowski · Malte Schokolowski · Malte Schokolowski · Malte Schokolowski · Malte Schokolowski
--- a/.citation_parser_ui.py.swp
+++ b/.citation_parser_ui.py.swp
--- a/.gitignore
+++ b/.gitignore
-**/__pycache__/
+# Editors
+.vscode/
+.VSCodeCounter/
+.idea/
+
+# Vagrant
+.vagrant/
+
+# Mac/OSX
+.DS_Store
+
+# Windows
+Thumbs.db
+
+# Source for the following rules: https://raw.githubusercontent.com/github/gitignore/master/Python.gitignore
+# Byte-compiled / optimized / DLL files
+.__pycache__/
+*.py[cod]
+*.pyc
+*$py.class
+
+# C extensions
+*.so
+
+# Distribution / packaging
+.Python
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib/
+lib64/
+parts/
+sdist/
+var/
+wheels/
+*.egg-info/
+.installed.cfg
+*.egg
+.start_script.py
+MANIFEST
+
+# PyInstaller
+#  Usually these files are written by a python script from a template
+#  before PyInstaller builds the exe, so as to inject date/other infos into it.
+*.manifest
+*.spec
+
+# Installer logs
+pip-log.txt
+pip-delete-this-directory.txt
+
+# Unit test / coverage reports
+htmlcov/
+.tox/
+.nox/
+.coverage
+.coverage.*
+.cache
+nosetests.xml
+coverage.xml
+*.cover
+.hypothesis/
+.pytest_cache/
+
+# Translations
+*.mo
+*.pot
+
+# Django stuff:
+*.log
+local_settings.py
+db.sqlite3
+
+# Flask stuff:
+instance/
+.webassets-cache
+
+# Scrapy stuff:
+.scrapy
+
+# Sphinx documentation
+docs/_build/
+
+# PyBuilder
+target/
+
+# Jupyter Notebook
+.ipynb_checkpoints
+
+# IPython
+profile_default/
+ipython_config.py
+
+# pyenv
+.python-version
+
+# celery beat schedule file
+celerybeat-schedule
+
+# SageMath parsed files
+*.sage.py
+
+# Environments
+.env
+.venv
+env/
+venv/
+ENV/
+env.bak/
+venv.bak/
+
+# Spyder project settings
+.spyderproject
+.spyproject
+
+# Rope project settings
+.ropeproject
+
+# mkdocs documentation
+/site
+
+# mypy
+.mypy_cache/
+.dmypy.json
+dmypy.json
+
+# json
+*.json
\ No newline at end of file
--- a/ui_programm_fragmente/README.md
+++ b/ui_programm_fragmente/README.md
-# 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
--- a/output/README.md
+++ b/output/README.md
 # 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
--- a/assets/cn.js
+++ b/assets/cn.js
 /**
 * 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,18 +11,17 @@ 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
 */
 var color = d3.scaleOrdinal()
-    .domain(["height", "input", "depth"])
-    .range([' #01d7c0', ' #8b90fe ', '  #a15eb2 ']),
+    .domain(["Citedby", "Input", "Reference"])
+    .range(['#01d7c0', '#7fa9d4', '#a15eb2']),
 y_scale = d3.scaleOrdinal()
-    .domain(["height", "input", "depth"])
-    .range([0, 200, 400]),
-to_remove;
+    .domain(["Citedby", "Input", "Reference"])
+    .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,16 +48,16 @@ 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
+* creates svg object (legend) with text, circles and arrows
 */
 var svg_legend = d3.select("svg.legendsvg"),
 legend_position = [65,95,125],
 arrow_legend_position = [0,25],
-arrow_group_names = ["citation","self-citation"],
-group_names = ["cited by","input","reference"],
+arrow_group_names = ["Citation","Self-Citation"],
+group_names = ["Cited-by","Input","Reference"],
 line_type = d3.scaleOrdinal()
    .domain(["line","dotted"])
    .range([("8,0"),("8,8")]),
@@ -110,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) {
-            if (d.group == "input") {return 0;}
+    .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 100;}
-            else {return 65;}
+        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, height/2+20))
-    .force("yscale", d3.forceY().strength(function(d) {
-        if (d.group == "input") {return 1000;}
-        else {return 50;}
+    .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)}))
-    .alpha(0.005)
-    .on("end",  zoom_to);
+    .alpha(0.004)
+    .velocityDecay(0.65)
+    .on("end", zoom_to_graph);

 /**
 * creates group element
@@ -136,9 +143,30 @@ var g = svg.append("g")
 /**
 * loads JSON data and calls the update function
 */
-d3.json("json_text.json").then(function(graph) {
+d3.json("json_text.json").then(success,failure)
+function success(graph) {
    update(graph.links, graph.nodes);
+}
+function failure(graph) {
+    localStorage.setItem("oldjson","keineJson")
+}
+
+/**
+* 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) 
+        var newjson = CryptoJS.MD5(newjson_string).toString();
+        oldjson=localStorage.getItem("oldjson")
+        if(newjson !== oldjson){
+            localStorage.setItem("oldjson", newjson);
+            window.location.reload()
+        }
    })
+}

 /**
 * calls update functions for links and nodes
@@ -150,8 +178,7 @@ 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);
@@ -161,7 +188,7 @@ function update(links, nodes) {
 }

 /**
-* initializes and shows links
+* initializes and shows links (edges)
 * @param {object} links - links
 */
 function update_links(links) {
@@ -187,13 +214,13 @@ 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")
        .attr("class", "circle")
-        .attr("r", function(d) {return 1.5*r+d.citations*0.05})
+        .attr("r", function(d) {return 1.5*r+d.citations*0.15})
        .style("fill", function(d){ return color(d.group)})
        .on('click', click_node);

@@ -212,7 +239,7 @@ function update_nodes(nodes) {
 * @param {string} target - target node
 */
 function update_marker(color, target) {
-    var radius = 1.5*r+target.citations*0.05;
+    var radius = 1.5*r+target.citations*0.15;
    svg.append('defs').append('marker')
        .attr('id',color.replace("#", "")+radius)
        .attr('viewBox','-0 -5 10 10')
@@ -251,7 +278,7 @@ 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")
@@ -280,9 +307,9 @@ function self_citation(source,target) {
 function mark_link(node) {
    d3.selectAll(".link")
        .style("stroke", function(o) {
-            return is_link_for_node(node, o) ? "black" : "#999";})
+            return is_link_for_node(node, o) ? "black" : "#DEDEDE";})
        .attr('marker-end', function(o) {
-            return is_link_for_node(node, o) ? update_marker('#000000', o.target) : update_marker('#999', o.target);})
+            return is_link_for_node(node, o) ? update_marker('#000000', o.target) : update_marker('#DEDEDE', o.target);})
 }

 /**
@@ -300,10 +327,14 @@ function is_link_for_node(node, link) {
 * @param {object} node - node
 */
 function textbox_content(node) {
+    authors = node.author[0]
+    for (i = 1; i < node.author.length; i++) {
+        authors += (", "+node.author[i])
+    }
    text_info = "Title:" + '</br>' + node.name +
-    '</br>' +'</br>'+"Author:"+ '</br>' +node.author+'</br>'+'</br>'+"Date:"+'</br>'
-    +node.year+'</br>'+'</br>'+"Journal:"+'</br>'+node.journal+'</br>'+'</br>'+"doi:"
-    +'</br>'+'<a href="'+node.doi+ '">'+node.doi+'</a>'+'</br>'+'</br>'+"Citations:"
+    '</br>' +'</br>'+"Author:"+ '</br>' +authors+'</br>'+'</br>'+"Date:"+'</br>'
+    +node.year+'</br>'+'</br>'+"Journal:"+'</br>'+node.journal+'</br>'+'</br>'+"DOI:"
+    +'</br>'+node.doi+'</br>'+'</br>'+"Citations:"
    +'</br>'+node.citations;
    text_abstract = node.abstract;
    document.getElementById('textbox').innerHTML = text_info;
@@ -356,10 +387,10 @@ function handle_tick() {
 }

 /**
-* initializes the dragging of the node
+* 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()
@@ -369,10 +400,10 @@ function start_drag(node) {
 }

 /**
-* applies the dragging to the 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);
@@ -394,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);
 }

 /**
@@ -422,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);
 }

 /**
@@ -482,7 +513,8 @@ function get_svg_string(svgNode) {
 			
 			try {
 			    if(!s.cssRules) continue;
-			} catch(e) {
+			} 
+            catch(e) {
 		    	if(e.name !== 'SecurityError') throw e; // for Firefox
 		    	continue;
 		    	}
@@ -493,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) {
@@ -540,9 +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
-
--- a/output/graph/cn.js
+++ b/output/graph/cn.js
 /**
 * 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,18 +11,17 @@ 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
 */
 var color = d3.scaleOrdinal()
-    .domain(["height", "input", "depth"])
-    .range([' #01d7c0', ' #8b90fe ', '  #a15eb2 ']),
+    .domain(["Citedby", "Input", "Reference"])
+    .range(['#01d7c0', '#7fa9d4', '#a15eb2']),
 y_scale = d3.scaleOrdinal()
-    .domain(["height", "input", "depth"])
-    .range([0, 200, 400]),
-to_remove;
+    .domain(["Citedby", "Input", "Reference"])
+    .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,16 +48,16 @@ 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
+* creates svg object (legend) with text, circles and arrows
 */
 var svg_legend = d3.select("svg.legendsvg"),
 legend_position = [65,95,125],
 arrow_legend_position = [0,25],
-arrow_group_names = ["citation","self-citation"],
-group_names = ["cited by","input","reference"],
+arrow_group_names = ["Citation","Self-Citation"],
+group_names = ["Cited-by","Input","Reference"],
 line_type = d3.scaleOrdinal()
    .domain(["line","dotted"])
    .range([("8,0"),("8,8")]),
@@ -110,22 +114,20 @@ 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) {
-            if (d.group == "input") {return 0;}
+    .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 100;}
-            else {return 65;}
-        }).strength(0.5))
+        if (d.group == "Input") {return 70;}
+        else {return 75;}
+        }).strength(1))
    .force("charge", d3.forceManyBody().strength(0.001))
-    .force("center", d3.forceCenter(width/2, height/2+20))
-    .force("yscale", d3.forceY().strength(function(d) {
-        if (d.group == "input") {return 1000;}
-        else {return 50;}
-    }).y(function(d) {return y_scale(d.group)}))
-    .alpha(0.005)
-    .on("end",  zoom_to);
+    .force("center", d3.forceCenter(width/2-20, height/2+40))
+    .alpha(0.004)
+    .velocityDecay(0.65)
+    .on("end", zoom_to_graph);

 /**
 * creates group element
@@ -133,25 +135,67 @@ var simulation = d3.forceSimulation()
 var g = svg.append("g")
    .attr("class", "everything")

+/**
+* creates x-axis element
+*/
+var xAxis = d3.axisBottom()
+    .tickFormat(function(d) {if (d%1==0) return d;})
+    .ticks(10);
+
+/**
+* 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");
+
 /**
 * loads JSON data and calls the update function
 */
-d3.json("json_text.json").then(function(graph) {
+d3.json("json_text.json").then(success,failure)
+function success(graph) {
    update(graph.links, graph.nodes);
+}
+function failure(graph) {
+    localStorage.setItem("oldjson","keineJson")
+}
+
+/**
+* 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) 
+        var newjson = CryptoJS.MD5(newjson_string).toString();
+        oldjson=localStorage.getItem("oldjson")
+        if(newjson !== oldjson){
+            localStorage.setItem("oldjson", newjson);
+            window.location.reload()
+        }
    })
+}

 /**
-* 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) {
+    update_xaxis(nodes);
    update_links(links);
    update_nodes(nodes);
    
-    simulation
-        .nodes(nodes)
+    simulation.nodes(nodes)
        .on("tick", handle_tick);
    simulation.force("link")
        .links(links);
@@ -161,7 +205,25 @@ function update(links, nodes) {
 }

 /**
-* initializes and shows links
+* initializes and shows x-axis
+* @param {object} nodes - nodes
+*/
+function update_xaxis(nodes) {
+    years = [];
+    for (i = 0; i < nodes.length; i++) {
+        years.push(parseInt(parseInt(/\d{4}\s*$/.exec(nodes[i]["year"]))));
+    }
+
+    xscale = d3.scaleLinear()
+        .domain([d3.min(years)-1, d3.max(years)+1])
+        .range([1, width-1])
+
+    xAxis.scale(xscale);
+    gX.call(xAxis);
+}
+
+/**
+* initializes and shows links (edges)
 * @param {object} links - links
 */
 function update_links(links) {
@@ -187,13 +249,13 @@ 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")
        .attr("class", "circle")
-        .attr("r", function(d) {return 1.5*r+d.citations*0.05})
+        .attr("r", function(d) {return 1.5*r+d.citations*0.15})
        .style("fill", function(d){ return color(d.group)})
        .on('click', click_node);

@@ -212,7 +274,7 @@ function update_nodes(nodes) {
 * @param {string} target - target node
 */
 function update_marker(color, target) {
-    var radius = 1.5*r+target.citations*0.05;
+    var radius = 1.5*r+target.citations*0.15;
    svg.append('defs').append('marker')
        .attr('id',color.replace("#", "")+radius)
        .attr('viewBox','-0 -5 10 10')
@@ -251,7 +313,7 @@ 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")
@@ -280,9 +342,9 @@ function self_citation(source,target) {
 function mark_link(node) {
    d3.selectAll(".link")
        .style("stroke", function(o) {
-            return is_link_for_node(node, o) ? "black" : "#999";})
+            return is_link_for_node(node, o) ? "black" : "#DEDEDE";})
        .attr('marker-end', function(o) {
-            return is_link_for_node(node, o) ? update_marker('#000000', o.target) : update_marker('#999', o.target);})
+            return is_link_for_node(node, o) ? update_marker('#000000', o.target) : update_marker("#DEDEDE", o.target);})
 }

 /**
@@ -300,10 +362,14 @@ function is_link_for_node(node, link) {
 * @param {object} node - node
 */
 function textbox_content(node) {
+    authors = node.author[0]
+    for (i = 1; i < node.author.length; i++) {
+        authors += (", "+node.author[i])
+    }
    text_info = "Title:" + '</br>' + node.name +
-    '</br>' +'</br>'+"Author:"+ '</br>' +node.author+'</br>'+'</br>'+"Date:"+'</br>'
-    +node.year+'</br>'+'</br>'+"Journal:"+'</br>'+node.journal+'</br>'+'</br>'+"doi:"
-    +'</br>'+'<a href="'+node.doi+ '">'+node.doi+'</a>'+'</br>'+'</br>'+"Citations:"
+    '</br>' +'</br>'+"Author:"+ '</br>' +authors+'</br>'+'</br>'+"Date:"+'</br>'
+    +node.year+'</br>'+'</br>'+"Journal:"+'</br>'+node.journal+'</br>'+'</br>'+"DOI:"
+    +'</br>'+node.doi+'</br>'+'</br>'+"Citations:"
    +'</br>'+node.citations;
    text_abstract = node.abstract;
    document.getElementById('textbox').innerHTML = text_info;
@@ -348,22 +414,21 @@ function display_abstract(a) {
 * updates the positions of the links and nodes
 */
 function handle_tick() {
-    link.attr("x1", function (d) {return d.source.x;})
+    link.attr("x1", function (d) {return xscale(parseInt(/\d{4}\s*$/.exec(d.source.year)));})
        .attr("y1", function (d) {return d.source.y;})
-        .attr("x2", function (d) {return d.target.x;})
+        .attr("x2", function (d) {return xscale(parseInt(/\d{4}\s*$/.exec(d.target.year)));})
        .attr("y2", function (d) {return d.target.y;});
-    node.attr("transform", function (d) {return "translate(" + d.x + ", " + d.y + ")";});
+    node.attr("transform", function (d) {return "translate(" + xscale(parseInt(/\d{4}\s*$/.exec(d.year))) + ", " + d.y + ")";});
 }

 /**
 * 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);
 }
@@ -372,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);
 }
@@ -394,23 +458,25 @@ 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));
 }

 /**
 * 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);
 }

 /**
@@ -422,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);
 }

 /**
@@ -482,7 +548,8 @@ function get_svg_string(svgNode) {
 			
 			try {
 			    if(!s.cssRules) continue;
-			} catch(e) {
+			} 
+            catch(e) {
 		    	if(e.name !== 'SecurityError') throw e; // for Firefox
 		    	continue;
 		    }
@@ -493,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) {
@@ -540,9 +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
-
--- a/assets/documentation/documentation_cn_default/files.html
+++ b/assets/documentation/documentation_cn_default/files.html
+<!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
--- a/assets/documentation/documentation_cn_default/index.html
+++ b/assets/documentation/documentation_cn_default/index.html
+<!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
--- a/assets/documentation/documentation_cn_default/symbols/_global_.html
+++ b/assets/documentation/documentation_cn_default/symbols/_global_.html
--- a/assets/documentation/documentation_cn_default/symbols/src/cn_default.js.html
+++ b/assets/documentation/documentation_cn_default/symbols/src/cn_default.js.html
--- a/assets/documentation/documentation_cn_timeline/files.html
+++ b/assets/documentation/documentation_cn_timeline/files.html
+<!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
--- a/assets/documentation/documentation_cn_timeline/index.html
+++ b/assets/documentation/documentation_cn_timeline/index.html
+<!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
--- a/assets/documentation/documentation_cn_timeline/symbols/_global_.html
+++ b/assets/documentation/documentation_cn_timeline/symbols/_global_.html
--- a/assets/documentation/documentation_cn_timeline/symbols/src/cn_timeline.js.html
+++ b/assets/documentation/documentation_cn_timeline/symbols/src/cn_timeline.js.html
--- a/assets/index.html
+++ b/assets/index.html
@@ -11,13 +11,19 @@
            display: flex;
            justify-content: center;
            position: absolute;
-            left: 455px;
-            top: 575px;
+            left: 180px;
+            top: 580px;
            transition-duration: 0.4s;
            border-radius: 3px;
            border: 1px solid #909090;
        }

+        button.display {
+            width: 120px;
+            top: 0px;
+            margin-left: 100px;
+        }
+
        .button:hover {
            background-color: #CACACA;
        }
@@ -34,7 +40,7 @@
            width: 146px;
            position: absolute;
            top: 181px; 
-            left: 1114px;
+            left: 834px;
            border-radius: 0;
            border: 1px solid #909090;
        }
@@ -44,7 +50,7 @@
            position: absolute;
            display: inline-block;
            top: 181px; 
-            left: 968px;
+            left: 688px;
            border-radius: 0;
            border: 1px solid #909090;
        }
@@ -53,10 +59,9 @@
            width: 270px;
            height: 170px; 
            padding: 10px;
-            /*border: 1px solid #999;*/
            position: absolute; 
            top: 10px; 
-            left: 968px;
+            left: 688px;
            display: inline-block;
            margin: 0;
        }
@@ -64,22 +69,28 @@
        div.textbox {
            width: 270px;
            min-height: 200px; 
-            max-height:370px;
+            max-height: 375px;
            padding: 10px;
            border: 1px solid #999;
            position: absolute; 
            top: 200px; 
-            left: 968px;
+            left: 688px;
            display: inline-block;
            overflow-y: scroll;
            margin: 0;
        }
+
+        svg.graph {
+            position: absolute;
+            top: 20px;
+        }
    </style>
 </head>

 <body>    
    <!-- graph -->
-    <svg class="graph" width="960" height="560"></svg>
+    <svg class="graph" width="680" height="560"></svg>
+    <p id="oldjson"></p>
    
    <!-- legend -->
    <div class="legendbox"><svg class="legendsvg"></svg></div>
@@ -90,6 +101,7 @@
    <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>
@@ -101,7 +113,62 @@
    <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>

-    <!-- javascript for force-directed graph -->
-    <script type="text/javascript" id="cn" src="cn.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';
+            load_default();
+        }
+        else if (window.location.hash=='#time') {
+            document.getElementById("change_graph").innerHTML = 'Display Default';
+            load_time();
+        }
+        else if (window.location.hash=='') {
+          window.location.hash = 'default';
+          document.getElementById("change_graph").innerHTML = 'Display Timeline';
+          load_default();
+        }
+
+        function display(){
+            if (window.location.hash=='#time') {
+                display_default();
+            }
+            else if (window.location.hash=='#default'){
+                display_time();
+            }
+        }
+
+        function display_default() {
+            window.location.hash = 'default';
+            window.location.reload();
+        }
+
+        function display_time() {
+            window.location.hash = 'time';
+            window.location.reload();
+        }
+
+        function load_default() {
+            var htmlHeader = document.getElementsByTagName("head")[0];         
+            var myScript = document.createElement('script');
+            myScript.type = 'text/javascript';
+            myScript.src = 'cn_default.js';
+            myScript.id='abc';
+            htmlHeader.appendChild(myScript);
+        }
+
+        function load_time() {
+            var htmlHeader = document.getElementsByTagName("head")[0];         
+            var myScript = document.createElement('script');
+            myScript.type = 'text/javascript';
+            myScript.src = 'cn_timeline.js';
+            myScript.id='abc';
+            htmlHeader.appendChild(myScript);
+        }
+    </script>
 </body>
 </html>
\ No newline at end of file
--- a/assets/json_text.json
+++ b/assets/json_text.json
-{"nodes": [{"doi": "https://doi.org/10.1021/acs.jcim.6b00709", "name": "Matched Molecular Series: Measuring SAR Similarity", "author": ["Emanuel S. R. Ehmki", "Christian Kramer"], "year": "May 1, 2017", "journal": "Journal of Chemical Information and Modeling", "group": "Input", "depth": 0, "citations": 5}, {"doi": "https://doi.org/10.1021/acs.jcim.0c00269", "name": "Matched Molecular Series Analysis for ADME Property Prediction", "author": ["Mahendra Awale", "Sereina Riniker", "Christian Kramer"], "year": "May 5, 2020", "journal": "Journal of Chemical Information and Modeling", "group": "Citedby", "depth": 1, "citations": 6}, {"doi": "https://doi.org/10.1021/acs.jcim.0c00290", "name": "Identification of Bioisosteric Substituents by a Deep Neural Network", "author": ["Peter Ertl"], "year": "June 15, 2020", "journal": "Journal of Chemical Information and Modeling", "group": "Citedby", "depth": 2, "citations": 2}], "links": [{"source": "https://doi.org/10.1021/acs.jcim.0c00269", "target": "https://doi.org/10.1021/acs.jcim.6b00709"}, {"source": "https://doi.org/10.1021/acs.jcim.0c00290", "target": "https://doi.org/10.1021/acs.jcim.0c00269"}]}
\ No newline at end of file
--- a/citation_parser_ui.py
+++ b/citation_parser_ui.py
--- a/count_journal.py
+++ b/count_journal.py
-#!/usr/bin/env python3
-
-from input.interface import InputInterface as Input
-
-def count_journals(url: str):
-    inter = Input()
-    pub = inter.get_publication(url)
-
-    if pub.citations:
-        for citation in pub.citations:
-            journal = citation.journal
-            if journal in cit:
-                cit[journal] += 1
-            else:
-                cit[journal] = 1
-
-    if pub.references:
-        for reference in pub.references:
-            journal = reference.journal
-            if journal in cit:
-                cit[journal] += 1
-            else:
-                cit[journal] = 1
-
-if __name__ == "__main__":
-    cit = {}
-	
-    count_journals("https://doi.org/10.1021/acs.jcim.1c00203")
-    count_journals("https://doi.org/10.1021/acs.jcim.6b00561")
-    count_journals("https://doi.org/10.1021/acs.jcim.6b00613")
-    count_journals("https://doi.org/10.1021/acs.jcim.1c00917")
-    count_journals("https://doi.org/10.1021/acs.jmedchem.0c01332")
-		#count_journals("https://pubs.acs.org/doi/10.1021/acs.biochem.1c00290")
-		#count_journals("https://pubs.acs.org/doi/10.1021/acsenvironau.1c00007")
-		#count_journals("https://pubs.acs.org/doi/10.1021/acs.biochem.7b01162")
-
-    cit = dict(sorted(cit.items(), key=lambda item: item[1]))
-    for journal in cit:
-        if journal != "":
-            print(f'{journal}: {cit[journal]}')
--- a/example_input.py
+++ b/example_input.py
-#!/usr/bin/env python3
-
-from input.interface import InputInterface as Input
-
-def main(url: str):
-    i = Input()
-    #print(i.get_publication(url))
-    print(i.get_pub_light(url))
-    # print(i.get_supported_fetchers()) Useless because all classes are called the same
-
-if __name__ == "__main__":
-	#main("https://doi.org/10.1021/acs.jcim.1c0023")
-    main("https://doi.org/10.1021/acs.jcim.5b00332")
--- a/info_box.txt
+++ b/info_box.txt
-English
-
-Show Info: Can be activated and deactivated by clicking on the button.
-
-Input: input by entering a DOI ("Digital Object Identifier")
-
-Drag and drop or click to select a file to upload: entering multiple DOI by txt-file is only possible if every DOI has its own line.
-
-Recursion:
-
-Clear All: clearing all inputs
-
-Clear Selected: clearing all selected inputs
-
-Generate Graph: generates the graph
-
-Update Automatically: automatically updates the graph for every new input
+Deutsch

-Smart Input: checks the correctness of the entered DOI and shows a nicer depiction: Author, Journal, publication date.
+Bei Eingabe eines DOI ("Digital Object Identifier") oder Hyperlinks zu einem wissenschaftlichen Artikel ist es diesem Programm möglich, die Zitierungs-Beziehungen zwischen diesen wissenschaftlichen Artikeln mittels eines Graphen visuell darzustellen. 

+Smart Input: direkte Überprüfung der Eingabe auf Korrektheit, zudem wird nicht mehr der DOI angezeigt sondern:
+Der Autor, Das Journal, Das Veröffentlichungsdatum. (muss vor Hinzufügen aktiviert worden sein)


-German 
-
-Show Info: Durch wiederholtes klicken kann das Fenster ein und aus geblendet werden.
-
-Input: Die Eingabe erfolgt in Form eines DOI ("Digital Object Identifier") 
-
-Drag and drop or click to select a file to upload: Mehrere DOI in einem txt-Dokument müssen untereinander angeordnet sein.
-
-Recursion: 
-
-Clear All: alle Eingaben werden gelöscht
-
-Clear Selected: alle markierten Eingaben werden gelöscht
-
-Generate Graph: generiert den zugehörigen Graphen
-
-Update Automatically: automatische Aktualisierung des Graphen nach neuer Eingabe
+English

-Smart Input: direkte Überprüfung der Eingabe auf Richtigkeit zudem wird nicht mehr der DOI angezeigt sondern: Der Autor, Das Journal, Das Veröffentlichungsdatum.
+By entering a DOI ("Digital Object Identifier") or hyperlink to a scientific article, this program is able to visualize the citation relationships between these scientific articles using a graph.

+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)
No results found