-
Notifications
You must be signed in to change notification settings - Fork 109
/
d3-v4-simianviz.html
182 lines (178 loc) · 5.8 KB
/
d3-v4-simianviz.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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3: Force layout</title>
<script type="text/javascript" src="https://d3js.org/d3.v4.0.0-alpha.29.min.js"></script>
<style type="text/css">
rect:hover {
fill: red;
}
#tooltip {
position: absolute;
width: 450px;
height: auto;
padding: 10px;
background-color: white;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
pointer-events: none;
}
#tooltip.hidden {
display: none;
}
#tooltip p {
margin: 0;
font-family: sans-serif;
font-size: 16px;
line-height: 20px;
}
</style>
</head>
<body>
<input id="chargebutton" type="button" value="More Charge" onclick="charge_button()" />
<div id="tooltip" class="hidden">
<p><span id="value">node</span></p>
</div>
<script type="text/javascript">
//Dynamically grow a graph, adding nodes and edges
//By Adrian Cockcroft @adrianco github.com/adrianco/d3grow
//Width and height
var w = 1200;
var h = 700;
//Graph data
var dataset = {
nodes: [],
edges: []
};
var nodecount = 0;
var charge = -200;
//Initialize a default force layout, using the nodes and edges in dataset
var force = d3.layout.force()
.nodes(dataset.nodes)
.links(dataset.edges)
.size([w, h])
.charge([charge]);
force.linkDistance(function(d) {
return 10 + 7 * (d.source.size + d.target.size)/2;
});
var colors = d3.scale.category10();
//var root;
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
//Every time the simulation "ticks", this will be called
force.on("tick", function() {
svg.selectAll("line").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; });
svg.selectAll("circle").attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
var k = .65;
//root.y += (h*1/10 - root.y) * k;
//root.x += (w*1/5 - root.x) * k;
});
// add a node and some edges
var addnode = function(name) {
//console.log("add node: " + name);
dataset.nodes.push([name]);
dataset.nodes[nodecount].size = 1;
//root = dataset.nodes[nodecount];
nodecount++;
};
var update = function() {
console.log("update");
svg.selectAll("line")
.data(dataset.edges)
.enter()
.append("line")
.style("stroke", "#ccc")
.style("stroke-width", 2);
svg.selectAll("circle")
.data(dataset.nodes)
.enter()
.append("circle")
.attr("r", function(d, i) {
return Math.sqrt(d.size) * 2;
})
.style("fill", function(d, i) {
var names = d[0].split(".")
if (names.length < 4) {
console.log(names)
return colors(0)
} else {
return colors(names[3].length);
}
})
.on("mouseover", function(d) {
//Get this node's x/y values, then augment for the tooltip
//var xPosition = parseFloat(d3.select(this).attr("x"));
//var yPosition = parseFloat(d3.select(this).attr("y"));
//Update the tooltip position and value
d3.select("#tooltip")
// .style("left", xPosition + "px")
// .style("top", yPosition + "px")
.select("#value")
.text(d);
//Show the tooltip
d3.select("#tooltip").classed("hidden", false);
})
.on("mouseout", function() {
//Hide the tooltip
d3.select("#tooltip").classed("hidden", true);
})
.call(force.drag);
force.start();
};
var findnode = function(nodename) {
n = 0
for (; n < dataset.nodes.length; n++)
if (dataset.nodes[n][0] == nodename) {
dataset.nodes[n].size++;
return dataset.nodes[n];
}
console.log("can't find " + nodename)
return "";
}
var addedge = function(s, t) {
//console.log("edge between " + s + " and " + t);
sn = findnode(s);
tn = findnode(t);
dataset.edges.push({ source: sn, target: tn });
};
function charge_button() {
charge = charge - 20;
force.charge([charge]);
update();
}
var arch = window.location.search.substring(1);
if (arch == "") {
window.location.href = "?netflix"
arch = "netflix"
}
d3.json("json/" + arch + ".json", function(error, json) {
console.log(json.version);
for (i = 0; i < json.graph.length; i++) {
element = json.graph[i];
if (element.node) {
addnode(element.node);
}
}
for (i = 0; i < json.graph.length; i++) {
element = json.graph[i];
if (element.edge) {
addedge(element.source, element.target);
}
}
update();
});
</script>
</body>
</html>