-
Notifications
You must be signed in to change notification settings - Fork 1
/
scrollable_d3_graph.html
118 lines (108 loc) · 4.14 KB
/
scrollable_d3_graph.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!DOCTYPE HTML>
<html>
<head>
<title>elgehelge - D3 interactive network background graphics</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,300,100' rel='stylesheet' type='text/css'>
<style type="text/css">
html, body {
height: 300%;
margin: 0;
background: linear-gradient(to top, #e74c3c 0%,#c0392b 100%);
}
h1 {
font-family: 'Roboto Slab', serif;
font-weight: 400;
color: #fff;
opacity: 0.5;
font-size: 5em;
padding: 1em;
margin: 0;
}
h1 span {
font-weight: 100;
}
line {
stroke-width: 0.2;
stroke: white;
stroke-opacity: 0.7;
}
circle {
fill: white;
fill-opacity: 0.7;
}
</style>
</head>
<body>
<svg id="background-graph" xmlns="http://www.w3.org/2000/svg" viewBox=" 0 0 500 800" style="position: fixed; top: 0; left: 0; opacity: 0.3;"></svg>
<script type="text/javascript">
var NO_NODES = 150;
var CONNECTING_DISTANCE = 100;
var CANVAS_HEIGHT = 700;
var CANVAS_WIDTH = 500;
var ACROSS_SIDES = 120;
var MIN_SHIFT = 0.5;
var SHIFT_SCALE = 2;
var scrollPosition = document.body.scrollTop / (document.body.clientHeight - window.innerHeight) * 100;
function makeRandomNumberBetween(lower, higher) {
return Math.floor((Math.random() * Math.abs(lower-higher)) + lower);
}
function calcNodeDistance(node1, node2) {
return Math.sqrt( Math.pow(Math.abs(node1.x - node2.x), 2) + Math.pow(Math.abs(node1.y - node2.y),2) );
}
function calcScrollShift(node) {
return (MIN_SHIFT + node.z / 10) * (-scrollPosition + 50) * SHIFT_SCALE;
}
var node_data = [];
for (i=0; i < NO_NODES; i++) {
node_data[i] = {'x': makeRandomNumberBetween(-ACROSS_SIDES, CANVAS_WIDTH + ACROSS_SIDES),
'y': makeRandomNumberBetween(-ACROSS_SIDES, CANVAS_HEIGHT + ACROSS_SIDES),
'z': makeRandomNumberBetween(0, 10)};
}
var edge_data = [];
for (i=0; i<NO_NODES; i++) {
for (j=0; j<NO_NODES; j++) {
var node_i = node_data[i]
var node_j = node_data[j]
if (calcNodeDistance(node_i, node_j) < CONNECTING_DISTANCE && node_i.x != node_j.x && node_i.y != node_j.y) {
edge_data.push([i,j]);
}
}
}
// Initialize
var canvas = d3.select("#background-graph");
var nodes = canvas.selectAll("circle")
.data(node_data)
.enter()
.append("circle")
.attr("cx", function (d) { return d.x; })
.attr("cy", function (d) { return d.y + calcScrollShift(d); })
.attr("r", function (d) { return d.z / 10 + 1; })
var edges = canvas.selectAll("line")
.data(edge_data)
.enter()
.append("line")
.attr("x1", function (d) { return node_data[d[0]].x; })
.attr("y1", function (d) { return node_data[d[0]].y + calcScrollShift(node_data[d[0]]); })
.attr("x2", function (d) { return node_data[d[1]].x; })
.attr("y2", function (d) { return node_data[d[1]].y + calcScrollShift(node_data[d[1]]); })
function redraw() {
nodes.data(node_data)
.attr("cx", function (d) { return d.x; })
.attr("cy", function (d) { return d.y + calcScrollShift(d); })
.attr("r", function (d) { return d.z / 10 + 1; })
edges.data(edge_data)
.attr("x1", function (d) { return node_data[d[0]].x; })
.attr("y1", function (d) { return node_data[d[0]].y + calcScrollShift(node_data[d[0]]); })
.attr("x2", function (d) { return node_data[d[1]].x; })
.attr("y2", function (d) { return node_data[d[1]].y + calcScrollShift(node_data[d[1]]); });
}
// Redraw canvas on scroll
window.addEventListener("scroll", function() {
scrollPosition = document.body.scrollTop / (document.body.clientHeight - window.innerHeight) * 100;
redraw();
});
</script>
<h1>Random graph<br /><span>for your website</span></h1>
</body>
</html>