|
@@ -0,0 +1,75 @@
|
|
1
|
+<html>
|
|
2
|
+ <head>
|
|
3
|
+ <title>블로그 검색어 Word Cloud</title>
|
|
4
|
+ <script src="https://d3js.org/d3.v3.min.js"></script>
|
|
5
|
+ <script src="https://rawgit.com/jasondavies/d3-cloud/master/build/d3.layout.cloud.js" type="text/JavaScript"></script>
|
|
6
|
+ <script type="text/JavaScript">
|
|
7
|
+ var datas = {{ value }};
|
|
8
|
+
|
|
9
|
+ // Next you need to use the layout script to calculate the placement, rotation and size of each word:
|
|
10
|
+
|
|
11
|
+ var width = 960;
|
|
12
|
+ var height = 500;
|
|
13
|
+ var fill = d3.scale.category20();
|
|
14
|
+
|
|
15
|
+ var svg = d3.select("body").append("svg")
|
|
16
|
+ .attr("width", width)
|
|
17
|
+ .attr("height", height);
|
|
18
|
+ var svg = d3.select("svg")
|
|
19
|
+ .append("g")
|
|
20
|
+ .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
|
|
21
|
+ var keywords = ["JavaScript", "Actionscript", "coffeescript"]
|
|
22
|
+
|
|
23
|
+ function showCloud(words) {
|
|
24
|
+ d3.layout.cloud()
|
|
25
|
+ .size([width, height])
|
|
26
|
+ .words(words)
|
|
27
|
+ .rotate(function() {
|
|
28
|
+ return ~~(Math.random() * 2) * 90;
|
|
29
|
+ })
|
|
30
|
+ .font("Impact")
|
|
31
|
+ .fontSize(function(d) {
|
|
32
|
+ return d.size;
|
|
33
|
+ })
|
|
34
|
+ .on("end", drawSkillCloud)
|
|
35
|
+ .start();
|
|
36
|
+ }
|
|
37
|
+ showCloud(datas);
|
|
38
|
+
|
|
39
|
+ // Finally implement `drawSkillCloud`, which performs the D3 drawing:
|
|
40
|
+
|
|
41
|
+ // apply D3.js drawing API
|
|
42
|
+ function drawSkillCloud(words) {
|
|
43
|
+ var cloud = svg.selectAll("text").data(words)
|
|
44
|
+ //Entering words
|
|
45
|
+ cloud.enter()
|
|
46
|
+ .append("text")
|
|
47
|
+ .style("font-family", "overwatch")
|
|
48
|
+ .style("fill", function(d) {
|
|
49
|
+ return (keywords.indexOf(d.text) > -1 ? "#fbc280" : "#405275");
|
|
50
|
+ })
|
|
51
|
+ .style("fill-opacity", .5)
|
|
52
|
+ .attr("text-anchor", "middle")
|
|
53
|
+ .attr('font-size', 1)
|
|
54
|
+ .text(function(d) {
|
|
55
|
+ return d.text;
|
|
56
|
+ });
|
|
57
|
+ cloud
|
|
58
|
+ .transition()
|
|
59
|
+ .duration(600)
|
|
60
|
+ .style("font-size", function(d) {
|
|
61
|
+ return d.size + "px";
|
|
62
|
+ })
|
|
63
|
+ .attr("transform", function(d) {
|
|
64
|
+ return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
|
|
65
|
+ })
|
|
66
|
+ .style("fill-opacity", 1);
|
|
67
|
+ }
|
|
68
|
+
|
|
69
|
+ // set the viewbox to content bounding box (zooming in on the content, effectively trimming whitespace)
|
|
70
|
+ setInterval(function() {
|
|
71
|
+ showCloud(skillsToDraw);
|
|
72
|
+ }, 2000)
|
|
73
|
+ </script>
|
|
74
|
+ </head>
|
|
75
|
+</html>
|