-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathwordCloud.html
93 lines (78 loc) · 2.73 KB
/
wordCloud.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
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="d3-cloud/lib/d3/d3.js"></script>
<script src="d3-cloud/d3.layout.cloud.js"></script>
<script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
<script>
(function() {
var socket = io.connect('http://sociamvm-app-001.ecs.soton.ac.uk:9001');
var words = {};
var fill = d3.scale.category20();
//what range of font sizes do we want, we will scale the word counts
var fontSize = d3.scale.log().range([100, 300]);
//create my cloud object
var mycloud = d3.layout.cloud().size([1000, 1000])
.words([])
.padding(2)
.rotate(function() { return ~~(Math.random() * 2) * 90; })
// .rotate(function() { return 0; })
.font("Impact")
.fontSize(function(d) { return fontSize(d.size); })
.on("end", draw)
//render the cloud with animations
function draw(words) {
//fade existing tag cloud out
d3.select("body").selectAll("svg").selectAll("g")
.transition()
.duration(1000)
.style("opacity", 1e-6)
.remove();
//render new tag cloud
d3.select("body").selectAll("svg")
.append("g")
.attr("transform", "translate(300,300)")
.selectAll("text")
.data(words)
.enter().append("text")
.style("font-size", function(d) { return ((d.size)* 1) + "px"; })
.style("font-family", "Impact")
.style("fill", function(d, i) { return fill(i); })
.style("opacity", 1e-6)
.attr("text-anchor", "middle")
.attr("transform", function(d) { return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")"; })
.transition()
.duration(1000)
.style("opacity", 1)
.text(function(d) { return d.text; });
}
//ajax call
function get_words() {
//make ajax call
var words_array = [];
for (key in words){
words_array.push({text: key, size: words[key]})
}
if(Object.keys(words).length >10){
words = {};
}
//render cloud
mycloud.stop().words(words_array).start();
};
//create SVG container
d3.select("body").append("svg")
.attr("width", 1000)
.attr("height", 1000);
socket.on('news', function (data) {
//console.log(data.wikipedia_page_name);
if(data.wikipedia_page_name != undefined){
console.log(data.wikipedia_page_name);
words[data.wikipedia_page_name]= 1;
}
});
//render first cloud
get_words();
//start streaming
var interval = setInterval(function(){get_words()}, 2000);
})();
</script>