Skip to content
Snippets Groups Projects
Commit bdf571b6 authored by Stahl, Merle's avatar Stahl, Merle
Browse files

3 Ansaetze

parent e5604131
No related branches found
No related tags found
2 merge requests!10Output,!9Main
Hide whitespace changes
Inline Side-by-side
Output/11_05_index_Ansatz_1.html 0 → 100644
+ 101
− 0
View file @ bdf571b6
<!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
Output/11_05_index_Ansatz_2.html 0 → 100644
+ 75
− 0
View file @ bdf571b6
<!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>
Output/11_05_index_Ansatz_3.html 0 → 100644
+ 157
− 0
View file @ bdf571b6
<!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
Output/data.json 0 → 100644
+ 22
− 0
View file @ bdf571b6
{"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
Output/index.html 0 → 100644
+ 157
− 0
View file @ bdf571b6
<!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
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment