-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
75 lines (68 loc) · 2.4 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
<!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>
(function() {
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([10, 90]);
//create my cloud object
var mycloud = d3.layout.cloud().size([1200, 1200])
.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(400)
.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(400)
.style("opacity", 1)
.text(function(d) { return d.text; });
}
//ajax call
function get_words() {
//make ajax call
d3.json("http://tarikdadi.me:5048/feed/word_count", function(json, error) {
if (error) return console.warn(error);
var words_array = [];
for (key in json){
words_array.push({text: key, size: json[key]})
}
//render cloud
mycloud.stop().words(words_array).start();
});
};
//create SVG container
d3.select("body").append("svg")
.attr("width", 1200)
.attr("height", 1200);
//render first cloud
get_words();
//start streaming
//var interval = setInterval(function(){get_words()}, 4000);
})();
</script>