From 3ff7ebc09e9ac644c2f6166b2c8db40ebcd305d2 Mon Sep 17 00:00:00 2001
From: Merle Stahl <merle.stahl@studium.uni-hamburg.de>
Date: Fri, 26 Nov 2021 19:18:38 +0100
Subject: [PATCH] Jahreszahlen als X-Achse
---
Output/11_05_index_Ansatz_1.html | 101 --------------------
Output/11_05_index_Ansatz_2.html | 75 ---------------
Output/11_05_index_Ansatz_3.html | 157 -------------------------------
Output/cn.js | 73 +++++++++++---
Output/json_text.json | 2 +-
5 files changed, 61 insertions(+), 347 deletions(-)
delete mode 100644 Output/11_05_index_Ansatz_1.html
delete mode 100644 Output/11_05_index_Ansatz_2.html
delete mode 100644 Output/11_05_index_Ansatz_3.html
diff --git a/Output/11_05_index_Ansatz_1.html b/Output/11_05_index_Ansatz_1.html
deleted file mode 100644
index b1ef716..0000000
--- a/Output/11_05_index_Ansatz_1.html
+++ /dev/null
@@ -1,101 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
- <meta charset="UTF-8">
- <title>Force Tutorial</title>
-</head>
-<body>
-
-<h1>Force Tutorial</h1>
-<canvas id="network" width="500" height="500"></canvas>
-
-<script src="https://d3js.org/d3.v4.min.js"></script>
-
-<script>
-/* global d3 */
-
-
-
-var canvas = d3.select("#network"),
- width = canvas.attr("width"),
- height = canvas.attr("height"),
- ctx = canvas.node().getContext("2d"),
- r = 10,
- color = d3.scaleOrdinal(d3.schemeCategory20),
- x=d3.scaleOrdinal().range([20,width-20]),
-
-
-
-
- simulation = d3.forceSimulation()
- .force("x", d3.forceX(function(d){ return x(d.input);}).strength(0.05))
- .force("y", d3.forceY(height/2))
- .force("collide", d3.forceCollide(r+10))
- .force("charge", d3.forceManyBody()
- .strength(-20))
- .force("link", d3.forceLink().strength(0.1)
- .id(function (d) { return d.doi; }));
-
-
-d3.json("data.json", function (err, graph) {
- if (err) throw err;
-
- simulation.nodes(graph.nodes);
- simulation.force("link")
- .links(graph.links);
- simulation.on("tick", update);
-
-
- function update() {
- ctx.lineWidth=3;
-
- ctx.clearRect(0, 0, width, height);
-
- ctx.beginPath();
- ctx.globalAlpha = 0.5;
- ctx.strokeStyle = "#a";
- graph.links.forEach(drawLink);
- ctx.stroke();
-
-
- ctx.globalAlpha = 1.0;
- graph.nodes.forEach(drawNode);
- }
-
-
-});
-
-
-function drawNode(d) {
- ctx.lineWidth=3;
- ctx.beginPath();
- ctx.fillStyle = color(d.input);
- ctx.moveTo(d.x, d.y);
- ctx.arc(d.x, d.y, r, 0, Math.PI*2);
- ctx.fill();
-}
-
-function drawLink(l) {
- //ctx.moveTo(l.source.x, l.source.y);
- //ctx.lineTo(l.target.x, l.target.y);
- canvas_arrow(ctx,l.source.x,l.source.y,l.target.x,l.target.y);
-}
-
-function canvas_arrow(context, fromx, fromy, tox, toy) {
- context.lineWidth=3;
- var headlen = 10; // length of head in pixels
- var dx = tox - fromx;
- var dy = toy - fromy;
- var angle = Math.atan2(dy, dx);
- context.moveTo(fromx, fromy);
- context.lineTo(tox, toy);
- context.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
- context.moveTo(tox, toy);
- context.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
-}
-
-
-</script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/Output/11_05_index_Ansatz_2.html b/Output/11_05_index_Ansatz_2.html
deleted file mode 100644
index ad175b2..0000000
--- a/Output/11_05_index_Ansatz_2.html
+++ /dev/null
@@ -1,75 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
- <meta charset="UTF-8">
- <title>Force Tutorial</title>
-</head>
-<body>
-
-<h1>Force Tutorial</h1>
-
-<script src="https://d3js.org/d3.v4.min.js"></script>
-<div id="my_dataviz"></div>
-<script>
-// set the dimensions and margins of the graph
-var margin = {top: 10, right: 30, bottom: 30, left: 40},
- width = 400 - margin.left - margin.right,
- height = 400 - margin.top - margin.bottom;
-
-// append the svg object to the body of the page
-var svg = d3.select("#my_dataviz")
-.append("svg")
- .attr("width", width + margin.left + margin.right)
- .attr("height", height + margin.top + margin.bottom)
-.append("g")
- .attr("transform",
- "translate(" + margin.left + "," + margin.top + ")");
-
-d3.json("data.json", function( data) {
-
- // Initialize the links
- var link = svg
- .selectAll("line")
- .data(data.links)
- .enter()
- .append("line")
- .style("stroke", "#aaa")
-
- // Initialize the nodes
- var node = svg
- .selectAll("circle")
- .data(data.nodes)
- .enter()
- .append("circle")
- .attr("r", 20)
- .style("fill", "#69b3a2")
-
- // Let's list the force we wanna apply on the network
- var simulation = d3.forceSimulation(data.nodes) // Force algorithm is applied to data.nodes
- .force("link", d3.forceLink() // This force provides links between nodes
- .id(function(d) { return d.doi; }) // This provide the id of a node
- .links(data.links) // and this the list of links
- )
- .force("charge", d3.forceManyBody().strength(-400)) // This adds repulsion between nodes. Play with the -400 for the repulsion strength
- .force("center", d3.forceCenter(width / 2, height / 2)) // This force attracts nodes to the center of the svg area
- .on("end", ticked);
-
- // This function is run at each iteration of the force algorithm, updating the nodes position.
- function ticked() {
- link
- .attr("x1", function(d) { return d.source.x; })
- .attr("y1", function(d) { return d.source.y; })
- .attr("x2", function(d) { return d.target.x; })
- .attr("y2", function(d) { return d.target.y; });
-
- node
- .attr("cx", function (d) { return d.x+6; })
- .attr("cy", function(d) { return d.y-6; });
- }
-
-});
-
-</script>
-
-</body>
-</html>
diff --git a/Output/11_05_index_Ansatz_3.html b/Output/11_05_index_Ansatz_3.html
deleted file mode 100644
index ce1e960..0000000
--- a/Output/11_05_index_Ansatz_3.html
+++ /dev/null
@@ -1,157 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <style type="text/css">
- .node {}
-
- .link { stroke: #999; stroke-opacity: .6; stroke-width: 1px; }
- </style>
-</head>
-<body>
-<svg width="960" height="600"></svg>
-
-<script src="https://d3js.org/d3.v4.min.js" type="text/javascript"></script>
-<script src="https://d3js.org/d3-selection-multi.v1.js"></script>
-
-<script type="text/javascript">
- var colors = d3.scaleOrdinal(d3.schemeCategory10);
-
- var svg = d3.select("svg"),
- width = +svg.attr("width"),
- height = +svg.attr("height"),
- node,
- link;
-
- svg.append('defs').append('marker')
- .attrs({'id':'arrowhead',
- 'viewBox':'-0 -5 10 10',
- 'refX':13,
- 'refY':0,
- 'orient':'auto',
- 'markerWidth':13,
- 'markerHeight':13,
- 'xoverflow':'visible'})
- .append('svg:path')
- .attr('d', 'M 0,-5 L 10 ,0 L 0,5')
- .attr('fill', '#999')
- .style('stroke','none');
-
- var simulation = d3.forceSimulation()
- .force("link", d3.forceLink().id(function (d) { return d.doi; }).distance(100).strength(1))
- .force("charge", d3.forceManyBody())
- .force("center", d3.forceCenter(width / 2, height / 2));
-
- d3.json("data.json", function (error, graph) {
- if (error) throw error;
- update(graph.links, graph.nodes);
- })
-
- function update(links, nodes) {
- link = svg.selectAll(".link")
- .data(links)
- .enter()
- .append("line")
- .attr("class", "link")
- .attr('marker-end','url(#arrowhead)')
-
- link.append("title")
- .text(function (d) {return d.author;});
-
- edgepaths = svg.selectAll(".edgepath")
- .data(links)
- .enter()
- .append('path')
- .attrs({
- 'class': 'edgepath',
- 'fill-opacity': 0,
- 'stroke-opacity': 0,
- 'id': function (d, i) {return 'edgepath' + i}
- })
- .style("pointer-events", "none");
-
- edgelabels = svg.selectAll(".edgelabel")
- .data(links)
- .enter()
- .append('text')
- .style("pointer-events", "none")
- .attrs({
- 'class': 'edgelabel',
- 'id': function (d, i) {return 'edgelabel' + i},
- 'font-size': 10,
- 'fill': '#aaa'
- });
-
- edgelabels.append('textPath')
- .attr('xlink:href', function (d, i) {return '#edgepath' + i})
- .style("text-anchor", "middle")
- .style("pointer-events", "none")
- .attr("startOffset", "50%")
- .text(function (d) {return d.author});
-
- node = svg.selectAll(".node")
- .data(nodes)
- .enter()
- .append("g")
- .attr("class", "node")
-
- node.append("circle")
- .attr("r", 5)
- .style("fill", function (d, i) {return colors(i);})
-
- node.append("title")
- .text(function (d) {return d.author;});
-
- node.append("text")
- .attr("dy", -3)
- .text(function (d) {return d.author;});
-
- simulation
- .nodes(nodes)
- .on("tick", ticked);
-
- simulation.force("link")
- .links(links);
- }
-
- function ticked() {
- link
- .attr("x1", function (d) {return d.source.x;})
- .attr("y1", function (d) {return d.source.y;})
- .attr("x2", function (d) {return d.target.x;})
- .attr("y2", function (d) {return d.target.y;});
-
- node
- .attr("transform", function (d) {return "translate(" + d.x + ", " + d.y + ")";});
-
- edgepaths.attr('d', function (d) {
- return 'M ' + d.source.x + ' ' + d.source.y + ' L ' + d.target.x + ' ' + d.target.y;
- });
-
- edgelabels.attr('transform', function (d) {
- if (d.target.x < d.source.x) {
- var bbox = this.getBBox();
-
- rx = bbox.x + bbox.width / 2;
- ry = bbox.y + bbox.height / 2;
- return 'rotate(180 ' + rx + ' ' + ry + ')';
- }
- else {
- return 'rotate(0)';
- }
- });
- }
-
-
-// function dragended(d) {
-// if (!d3.event.active) simulation.alphaTarget(0);
-// d.fx = undefined;
-// d.fy = undefined;
-// }
-
-</script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/Output/cn.js b/Output/cn.js
index 46b146a..cc33116 100644
--- a/Output/cn.js
+++ b/Output/cn.js
@@ -22,7 +22,7 @@ color = d3.scaleOrdinal()
.range([' #01d7c0', ' #8b90fe ', ' #a15eb2 ']),
yscale = d3.scaleOrdinal()
.domain(["citing", "input", "cited"])
- .range([0, 200, 400]),
+ .range([50, height/2+20, height-10]),
toRemove;
/**
@@ -44,22 +44,43 @@ var rect = svg.append("rect")
/**
* 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)
+* arranges the nodes according to their group on the y-axis
+* arranges the nodes according to their year on the x-axis
*/
var simulation = d3.forceSimulation()
- .force("link", d3.forceLink().id(function(d) {return d.doi;}).distance(100).strength(1))
- .force("collide", d3.forceCollide(50))
- .force("charge", d3.forceManyBody().strength(-30))
- .force("center", d3.forceCenter(width/2, height/2))
+ .force("link", d3.forceLink().id(function(d) {return d.doi;}).distance(150).strength(1))
+ .force("collide", d3.forceCollide(30))
+ //.force("charge", d3.forceManyBody().strength(-50))
+ .force("center", d3.forceCenter(width/2, height/2+50))
+ .force("xscale", d3.forceX().strength(1).x(function(d) {return xscale(parseInt(d.year))}))
.force("yscale", d3.forceY().strength(1).y(function(d) {return yscale(d.group)}));
-
+
/**
* creates group element
*/
var g = svg.append("g")
.attr("class", "everything")
+/**
+* creates XAxis element
+*/
+var xAxis = d3.axisBottom()
+ .tickFormat(function(d) {return d;})
+ .ticks(10);
+
+/**
+* draw xAxis
+*/
+var gX = svg.append("g")
+ .attr("class", "axis axis--x")
+ .attr("transform", "translate(0,25)")
+ gX.append("text")
+ .attr("y", 0)
+ .attr("x", 80)
+ .attr("text-anchor", "end")
+ .attr("stroke", "black")
+ .text("year");
+
/**
* loads JSON data and calls the update function
*/
@@ -68,12 +89,15 @@ d3.json("json_text.json").then(function(graph) {
})
/**
-* calls update functions for links and nodes
+* calls update functions for xAxis, links and nodes
* adds the nodes and links to the simulation
+* updates the positions of the links and nodes when the
+ state of the layout has changed (simulation has advanced by a tick)
* @param {object} nodes - nodes
* @param {object} links - links
*/
function update(links, nodes) {
+ updateXAxis(nodes);
updateLinks(links);
updateNodes(nodes);
@@ -83,7 +107,26 @@ function update(links, nodes) {
simulation.force("link")
.links(links);
- d3.selectAll(".link").attr('marker-end', function(d) {return updateMarker("#999", d.target);});
+ d3.selectAll(".link")
+ .attr('marker-end', function(d) {return updateMarker("#999", d.target);});
+}
+
+/**
+* initializes and shows xAxis
+* @param {object} nodes - nodes
+*/
+function updateXAxis(nodes) {
+ years = [];
+ for (i = 0; i < nodes.length; i++) {
+ years.push(parseInt(nodes[i]["year"]));
+ }
+
+ xscale = d3.scaleLinear()
+ .domain([d3.min(years), d3.max(years)])
+ .range([50, width-50])
+
+ xAxis.scale(xscale);
+ gX.call(xAxis);
}
/**
@@ -115,10 +158,10 @@ function updateNodes(nodes) {
.attr("class", "node")
.attr("initial_x", function(d) {return d.dx;})
.attr("initial_y", function(d) {return d.dy;})
- .call(d3.drag()
+ /*.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
- );
+ )*/;
node.append("circle")
.attr("class", "circle")
@@ -225,7 +268,8 @@ function firstauthor(authors){
function textfunc(node){
document.getElementById('textbox').innerHTML = "Title:" + '</br>' + node.name +
'</br>' +'</br>'+"Author:"+ '</br>' +node.author+'</br>'+'</br>'+"Year:"+'</br>'
- +node.year+'</br>'+'</br>'+"doi:"+'</br>'+node.doi;
+ +node.year+'</br>'+'</br>'+"doi:"+'</br>'+node.doi+'</br>'+'</br>'+"Citations:"
+ +'</br>'+node.citations;
}
/**
@@ -274,6 +318,9 @@ function resetGraph() {
*/
function zoomHandler() {
d3.select('g').attr("transform", d3.event.transform);
+ //gX.call(xAxis.scale(d3.event.transform.rescaleX(xscale)));
+ var new_xScale = d3.event.transform.rescaleX(xscale)
+ gX.call(xAxis.scale(new_xScale));
}
/**
diff --git a/Output/json_text.json b/Output/json_text.json
index b664cc4..12491ef 100644
--- a/Output/json_text.json
+++ b/Output/json_text.json
@@ -11,7 +11,7 @@
{
"name": "Combining Machine Learning and Computational Chemistry for Predictive Insights Into Chemical Systems ",
"author": "John A. Keith, Valentin Vassilev-Galindo, Bingqing Cheng, Stefan Chmiela, Michael Gastegger, Klaus-Robert M\u00fcller, Alexandre Tkatchenko. ",
- "year":"1937",
+ "year":"1967",
"doi": "https://doi.org/10.1021/acs.chemrev.1c00107",
"group": "citing",
"citations": 140
--
GitLab