diagnostics/d3: node sizes
Juan Batiz-Benet committed
Jan 14, 2015 at 10:55 UTC
a14d77e3685ea04b468701c65234a62197deb8ba
1 file changed
+30
-1
diagnostics/d3/chord.html
+30
-1
@@ -2,6 +2,10 @@
2
<meta charset="utf-8">
3
<style>
4
5
+body {
6
+ font: 11px "Helvetica Neue", Helvetica, Arial, sans-serif;
7
+}
8
+
9
.node {
10
font: 11px "Helvetica Neue", Helvetica, Arial, sans-serif;
11
}
@@ -12,8 +16,27 @@
16
fill: none;
17
}
18
19
+#legend {
20
+ position: fixed;
21
+ top: 10px;
22
+ left: 10px;
23
+ font-size: 14px;
24
+ background: rgba(255, 255, 255, 0.7);
25
+}
26
+
27
+#legend h1 {
28
+ font-weight: 200;
29
+ margin: 0px;
30
+ padding: 0px;
31
+}
32
+
33
</style>
34
<body>
35
+<div id="legend">
36
+<h1>IPFS TestNet</h1>
37
+<a href="http://ipfs.io">ipfs.io</a> - <span id="node-count"></span> nodes
38
+</div>
39
+
40
<script src="http://d3js.org/d3.v3.min.js"></script>
41
<script>
42
var hash = window.location.hash.substring(1)
@@ -47,7 +70,7 @@ d3.json(hash, function(error, data) {
70
.attr("transform", function(d) { return "rotate(" + (d.x - 90 + rotate) + ")translate(" + d.y + ")"; })
71
72
node.append("svg:circle")
50
- .attr("r", function(d) { return 6; })
73
+ .attr("r", function(d) { return d.conns + 3; })
74
.style("fill", function(d, i) { return color(i % 20); })
75
76
node.append("text")
@@ -67,6 +90,9 @@ d3.json(hash, function(error, data) {
90
+ "S" + p(d[1])[0] + "," + p(d[1])[1]
91
+ " " + p(d[2])[0] + "," + p(d[2])[1];
92
})
93
+ .style("stroke", function(d) { return color(d[0].index % 20); })
94
+ .style("stroke-opacity", function(d) { return 0.3; })
95
+
96
97
// var mid = svg.selectAll(".node-mid")
98
// .data(graph.mids)
@@ -100,6 +126,7 @@ function parseGraph(graph2) {
126
data.y = innerRadius
127
data.x = ((360 / graph2.nodes.length) * i)
128
data.conns = 0
129
+ data.index = i
130
graph.nodes.push(data)
131
graph.byName[data.name] = data
132
})
@@ -122,6 +149,8 @@ function parseGraph(graph2) {
149
graph.paths.push(path)
150
})
151
152
+ document.getElementById("node-count").innerText = graph.nodes.length
153
+
154
return graph
155
}
156