From bdf571b662bb1f40bd0c354c808b946cc3b03a87 Mon Sep 17 00:00:00 2001
From: Merle Stahl <merle.stahl@studium.uni-hamburg.de>
Date: Tue, 9 Nov 2021 14:36:22 +0100
Subject: [PATCH] 3 Ansaetze
---
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/data.json | 22 +++++
Output/index.html | 157 +++++++++++++++++++++++++++++++
5 files changed, 512 insertions(+)
create mode 100644 Output/11_05_index_Ansatz_1.html
create mode 100644 Output/11_05_index_Ansatz_2.html
create mode 100644 Output/11_05_index_Ansatz_3.html
create mode 100644 Output/data.json
create mode 100644 Output/index.html
diff --git a/Output/11_05_index_Ansatz_1.html b/Output/11_05_index_Ansatz_1.html
new file mode 100644
index 0000000..b1ef716
--- /dev/null
+++ b/Output/11_05_index_Ansatz_1.html
@@ -0,0 +1,101 @@
+<!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
new file mode 100644
index 0000000..ad175b2
--- /dev/null
+++ b/Output/11_05_index_Ansatz_2.html
@@ -0,0 +1,75 @@
+<!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
new file mode 100644
index 0000000..ce1e960
--- /dev/null
+++ b/Output/11_05_index_Ansatz_3.html
@@ -0,0 +1,157 @@
+<!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/data.json b/Output/data.json
new file mode 100644
index 0000000..f82eac0
--- /dev/null
+++ b/Output/data.json
@@ -0,0 +1,22 @@
+{"nodes":[{"name":"StudieA","author":"MenschA","year":"JahrA","doi":"doiA","input":"true"},
+ {"name":"StudieB","author":"MenschB","year":"JahrB","doi":"doiB","input":"false"},
+ {"name":"StudieC","author":"MenschC","year":"JahrC","doi":"doiC","input":"true"},
+ {"name":"StudieD","author":"MenschD","year":"JahrD","doi":"doiD","input":"false"},
+ {"name":"StudieE","author":"MenschE","year":"JahrE","doi":"doiE","input":"false"},
+ {"name":"StudieF","author":"MenschF","year":"JahrF","doi":"doiF","input":"false"},
+ {"name":"StudieG","author":"MenschG","year":"JahrG","doi":"doiG","input":"false"},
+ {"name":"StudieH","author":"MenschH","year":"JahrH","doi":"doiH","input":"false"},
+ {"name":"StudieI","author":"MenschI","year":"JahrI","doi":"doiI","input":"false"}],
+"links":[{"source":"doiA","target":"doiB"},
+ {"source":"doiA","target":"doiC"},
+ {"source":"doiC","target":"doiE"},
+ {"source":"doiD","target":"doiB"},
+ {"source":"doiA","target":"doiH"},
+ {"source":"doiA","target":"doiI"},
+ {"source":"doiI","target":"doiC"},
+ {"source":"doiH","target":"doiC"},
+ {"source":"doiG","target":"doiA"},
+ {"source":"doiH","target":"doiI"},
+ {"source":"doiE","target":"doiF"}
+
+ ]}
\ No newline at end of file
diff --git a/Output/index.html b/Output/index.html
new file mode 100644
index 0000000..ce1e960
--- /dev/null
+++ b/Output/index.html
@@ -0,0 +1,157 @@
+<!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
--
GitLab