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

Jahreszahlen als X-Achse

parent a1a69c0b
No related branches found
No related tags found
2 merge requests!10Output,!9Main
Show whitespace changes
Inline Side-by-side
Output/11_05_index_Ansatz_1.html deleted 100644 → 0
+ 0
− 101
View file @ a1a69c0b
<!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 deleted 100644 → 0
+ 0
− 75
View file @ a1a69c0b
<!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 deleted 100644 → 0
+ 0
− 157
View file @ a1a69c0b
<!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/cn.js
+ 60
− 13
View file @ 3ff7ebc0
......@@ -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,14 +44,15 @@ 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)}));
/**
......@@ -60,6 +61,26 @@ var simulation = d3.forceSimulation()
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));
}
/**
......
Output/json_text.json
+ 1
− 1
View file @ 3ff7ebc0
......@@ -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
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment