-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
110 lines (94 loc) · 3.32 KB
/
index.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
<!DOCTYPE html>
<meta charset="utf-8">
<style>
text {
font: 10px sans-serif;
text-anchor: middle;
}
</style>
<svg width="960" height="960" style="text-align: center"><g transform="translate(1,1)"></g></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
var format = d3.format(",d");
var pack = d3.pack()
.size([width - 2, height - 2])
.padding(2);
d3.json("/json", function(error, data) {
if (error) throw error;
root = d3.hierarchy(data)
.sum(function(d) { return d.value; })
.sort(function(a, b) { return b.value - a.value; });
pack(root);
var node = svg.select("g")
.selectAll("g")
// .data(root.leaves().concat(root.children))
.data(root.children.concat(root.leaves()))
.enter().append("g")
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
.attr("class", function(d) { return "node" + (!d.children ? " node--leaf" : d.depth ? "" : " node--root"); })
.each(function(d) { d.node = this; });
node.append("circle")
.attr("id", function(d) { return "node-" + d.data.id; })
.attr("r", function(d) { return d.r; })
.style("fill", function(d) {
if(d.data.id == "coins") return;
var colorScale = parseInt((new Date().getTime() - new Date(d.data.timestamp).getTime()) / (1000 * 60 * 60 * 24));
var background = "rgb(255, 255, 255)";
if (d.data.sentiment == "neg") {
background = "rgb(255, " + (colorScale*35) + ", " + (colorScale*35) + ")";
} else if (d.data.sentiment == "pos") {
background = "rgb(" + (colorScale*35) + ", 255, " + (colorScale*35) + ")";
}
return background;
})
.style("fill-opacity", function(d) {
if(!d.data.sentiment) return 1;
else return 0.5;
})
.attr("stroke-width", function(d) {
if(!d.data.sentiment) return "5px";
return;
})
.attr("stroke", function(d) {
if(!d.data.sentiment) return "rgb(250,250,250)";
return;
})
.on("click", function(d) {
if(d.data.sentiment) location.href = d.data.url;
})
.on("mouseover", hovered(true))
.on("mouseout", hovered(false));
node.append("text")
.style("color", "#ff0000")
.style("font-weight", "bold")
.style("class", ".bubble_hover")
.text(function(d) {
if(!d.data.sentiment) {
return d.data.id.replace(" ", "\n") + " (" + (d.data.diff?d.data.diff:"0") + "%)";
} else return;
})
.style("font-size", function(d) {
var fs = parseInt(Math.min(2 * d.r, (2 * d.r - 8) / 8));
fs = fs<10?10:fs;
return fs + "px";
});
node.append("title")
.text(function(d) {
if(d.data.sentiment) return d.data.url + " (" + d.data.value + ")"
});
});
function hovered(hover) {
return function(d) {
if(d.data.sentiment) {
d3.select(this).attr("stroke", hover?"#000":"");
d3.select(this).attr("cursor", hover?"pointer":"auto");
}
};
}
</script>
<body>
<div id="list"></div>
</body>