D3.js Word Cloud

 

?
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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">  
<meta charset="utf-8">
<title>D3.js Word Cloud</title>
</head>
 
<body>
 <div class="cloud"></div>
 <script src="d3/3.5.5/d3.js" type="text/javascript"></script>
<script src="d3-cloud/1.2.5/d3.layout.cloud.min.js" type="text/javascript"></script>
      <script id="rendered-js" >
           
          //https://cdnjs.cloudflare.com/ajax/libs/
          //https://cdnjs.cloudflare.com/ajax/libs/
var text1 = "two two seven seven seven seven seven seven seven three three three eight eight eight eight eight eight eight eight five five five five five four four four four nine nine nine nine nine nine nine nine nine one ten ten ten ten ten ten ten ten ten ten six six six six six six 中国",
text2 = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac condimentum tortor. Maecenas porta id tortor dapibus ultrices. Pellentesque a ligula sapien. Nam scelerisque dictum metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec quam vitae lacus pharetra lobortis at in est. Cras semper massa et fringilla vehicula. Nunc eros metus, ultrices nec commodo ut, lacinia ac enim. Sed cursus mattis sapien et sodales. Aliquam pulvinar nec sem vel elementum. Integer non lectus varius, viverra lacus non, pulvinar tellus. 中国深圳是南方的城市, 河口南无奈呀蝇放得开撒酒疯啊城范德萨看风景, 中国, 发动机卡城范德萨啊, 国规定2, 放大镜FDA, 江西省吉安市永丰县, 沿陂镇,涂家村, 方面的卡就, 浴室圳主, 稿朝右工, 深圳高人口中开发阶段刷卡哈士奇式. 中国深圳, 中国深圳, 中国深圳, 中国深圳, 中国深圳, 中国深圳, 中国深圳, 中国深圳, 中国深圳, 中国深圳, 中国深圳, 中国深圳, 中国深圳, 中国深圳, 中国深圳, 中国深圳, 中国深圳, 中国深圳, 中国深圳, 中国深圳, 中国深圳, 中国深圳, 中国深圳, 中国深圳, 中国深圳, 中国深圳, 中国深圳, 中国深圳, 中国深圳, 中国深圳, 中国深圳, 中国深圳, 中国深圳, 中国深圳, 中国深圳, 中国深圳, 中国深圳, 中国深圳, 中国深圳, 中国深圳, 中国深圳, 中国深圳, 中国深圳.江南，江西省，吉安市，涂家村，天下为公，深圳市中国的一个南方小渔村发展起来国际大都市。北京是中国的首都。涂家村是老表的乡野农村。江南是古代的水乡，也是鱼米之乡。Geovin Du, geovindu, 涂聚文，是中国公民。Geovin Du, geovindu, 涂聚文，是中国公民，Geovin Du, geovindu, 涂聚文，是中国公民，Geovin Du, geovindu, 涂聚文，是中国公民，Geovin Du, geovindu, 涂聚文，是中国公民，Geovin Du, geovindu, 涂聚文，是中国公民，Geovin Du, geovindu, 涂聚文，是中国公民，Geovin Du, geovindu, 涂聚文，是中国公民，Geovin Du, geovindu, 涂聚文，是中国公民Geovin Du, geovindu, 涂聚文，是中国公民，Geovin Du, geovindu, 涂聚文，是中国公民，Geovin Du, geovindu, 涂聚文，是中国公民，Geovin Du, geovindu, 涂聚文，是中国公民，Geovin Du, geovindu, 涂聚文，是中国公民，Geovin Du, geovindu, 涂聚文，是中国公民，Geovin Du, geovindu, 涂聚文，是中国公民，Geovin Du, geovindu, 涂聚文，是中国公民Geovin Du, geovindu, 涂聚文，是中国公民，Geovin Du, geovindu, 涂聚文，是中国公民，Geovin Du, geovindu, 涂聚文，是中国公民，Geovin Du, geovindu, 涂聚文，是中国公民，Geovin Du, geovindu, 涂聚文，是中国公民，Geovin Du, geovindu, 涂聚文，是中国公民，Geovin Du, geovindu, 涂聚文，是中国公民。",
words = sortByFrequency(text2.split(/[ ,.，。]+/)).
map(function (d, i) {
  //console.log(d);
  return { text: d, size: -i };
});
 
var fontName = "Impact",
cWidth = 720,
cHeight = 400,
svg,
wCloud,
bbox,
ctm,
bScale,
bWidth,
bHeight,
bMidX,
bMidY,
bDeltaX,
bDeltaY;
 
var cTemp = document.createElement('canvas'),
ctx = cTemp.getContext('2d');
ctx.font = "100px " + fontName;
 
var fRatio = Math.min(cWidth, cHeight) / ctx.measureText(words[0].text).width,
fontScale = d3.scale.linear().
domain([
d3.min(words, function (d) {return d.size;}),
d3.max(words, function (d) {return d.size;})])
 
//.range([20,120]),
.range([20, 100 * fRatio / 2]), // tbc
fill = d3.scale.category20();
 
d3.layout.cloud().
size([cWidth, cHeight]).
words(words)
//.padding(2) // controls
.rotate(function () {return ~~(Math.random() * 3) * 120;}).  //120 旋转角度
font(fontName).
fontSize(function (d) {return fontScale(d.size);}).
on("end", draw).
start();
 
function draw(words, bounds) {
  // move and scale cloud bounds to canvas
  // bounds = [{x0, y0}, {x1, y1}]
  bWidth = bounds[1].x - bounds[0].x;
  bHeight = bounds[1].y - bounds[0].y;
  bMidX = bounds[0].x + bWidth / 2;
  bMidY = bounds[0].y + bHeight / 2;
  bDeltaX = cWidth / 2 - bounds[0].x + bWidth / 2;
  bDeltaY = cHeight / 2 - bounds[0].y + bHeight / 2;
  bScale = bounds ? Math.min(cWidth / bWidth, cHeight / bHeight) : 1;
 
  console.log(
  "bounds (" + bounds[0].x +
  ", " + bounds[0].y +
  ", " + bounds[1].x +
  ", " + bounds[1].y +
  "), width " + bWidth +
  ", height " + bHeight +
  ", mid (" + bMidX +
  ", " + bMidY +
  "), delta (" + bDeltaX +
  ", " + bDeltaY +
  "), scale " + bScale);
 
 
  // the library's bounds seem not to correspond to reality?
  // try using .getBBox() instead?
 
  svg = d3.select(".cloud").append("svg").
  attr("width", cWidth).
  attr("height", cHeight);
 
  wCloud = svg.append("g")
  //.attr("transform", "translate(" + [bDeltaX, bDeltaY] + ") scale(" + 1 + ")") // ah!
  .attr("transform", "translate(" + [bWidth >> 1, bHeight >> 1] + ") scale(" + bScale + ")") // ah!
  .selectAll("text").
  data(words).
  enter().append("text").
  style("font-size", function (d) {return d.size + "px";}).
  style("font-family", fontName).
  style("fill", function (d, i) {return fill(i);}).
  attr("text-anchor", "middle").
  transition().
  duration(500).
  attr("transform", function (d) {
    return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
  }).
  text(function (d) {return d.text;});
 
  // TO DO: function to find min and max x,y of all words
  // and use it as the group's bbox
  // then do the transformation
  bbox = wCloud.node(0).getBBox();
  //ctm = wCloud.node().getCTM();
  console.log(
  "bbox (x: " + bbox.x +
  ", y: " + bbox.y +
  ", w: " + bbox.width +
  ", h: " + bbox.height +
  ")");
 
 
};
 
function sortByFrequency(arr) {
  var f = {};
  arr.forEach(function (i) {f[i] = 0;});
  var u = arr.filter(function (i) {return ++f[i] == 1;});
  return u.sort(function (a, b) {return f[b] - f[a];});
}
//#
    </script>
 
   
</body>
 
</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
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">  
<meta charset="utf-8">
<title>D3.js Word Cloud Simple</title>
</head>
 
<body>
    <div class="cloud"></div>
  <script src='d3/3.5.5/d3.min.js'></script>
<script src='d3-cloud/1.2.5/d3.layout.cloud.min.js'></script>
      <script id="rendered-js" >
var zrzutka = [
{ nick: "Marek P.", kwota: 20 },
{ nick: "Justynka", kwota: 110 },
{ nick: "Magdalena", kwota: 60 },
{ nick: "deszczu", kwota: 20 },
{ nick: "majster", kwota: 110 },
{ nick: "Krzychu R.", kwota: 20 },
{ nick: "Miłka", kwota: 40 },
{ nick: "Drabek", kwota: 110 },
{ nick: "wąsal", kwota: 80 },
{ nick: "Anonim", kwota: 20 },
{ nick: "Krecik", kwota: 50 },
{ nick: "Anonim", kwota: 40 },
{ nick: "Magdalena", kwota: 20 },
{ nick: "中国", kwota: 820 },
{ nick: "geovindu", kwota: 9820 },
{ nick: "涂聚文", kwota: 8820 },  
{ nick: "Anonim", kwota: 500 }],
 
 
w = 1000,
h = 1000,
size_ratio = w / d3.max(zrzutka, function (d) {return d.kwota;}) / 5,
 
words = zrzutka.
sort(function (a, b) {return b.kwota - a.kwota;}).
map(function (d) {
  return { text: d.nick, size: d.kwota * size_ratio };
}),
 
layout = d3.layout.cloud().
size([w, h]).
words(words).
padding(5).
rotate(function () {return ~~(Math.random() * 2) * 90;})
//.rotate(0)
.font("Impact").
fontSize(function (d) {return d.size;}).
on("end", draw);
 
console.log(size_ratio);
console.log(words);
 
layout.start();
 
function draw(words) {
  d3.select(".cloud").append("svg").
  attr("width", w).
  attr("height", h).
  attr("viewbox", "0 0 " + w + " " + h).
  attr("preserveAspectRatio", "xMidYMid meet").
  append("g").
  selectAll("text").
  data(words).
  enter().append("text").
  style("font-size", function (d) {return d.size + "px";}).
  style("font-family", "Impact").
  attr("text-anchor", "middle").
  attr("transform", function (d) {
    return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
  }).
  text(function (d) {return d.text;});
 
  var b = d3.select("svg g").node(0).getBBox();
  d3.select("svg").
  attr("width", b.width).
  attr("height", b.height).
  attr("viewbox", "0 0 " + b.width + " " + b.height).
  select("g").
  attr("transform", "translate(" + -b.x + "," + -b.y + ")");
 
  console.log(
  "bbox (x: " + b.x +
  ", y: " + b.y +
  ", w: " + b.width +
  ", h: " + b.height +
  ")");
 
}
//# sourceURL=pen.js
    </script>
 
   
</body>
</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">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>D3.js Word Cloud Simple</title>
<body>
<h2>Animation of famous opening lines:</h2>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>
  <script src="../build/d3.layout.cloud.js"></script>
  <script>
 
function wordCloud(selector) {
 
  var fill = d3.scale.category20();
 
  var svg = d3.select(selector)
              .append("svg")
              .attr("width", 500)
              .attr("height", 500)
              .append("g")
              .attr("transform", "translate(250,250)");
 
  function draw(words) {
    //Use the 'text' attribute (the word itself) to identity unique elements.
    var cloud = svg.selectAll("g text")
                    .data(words, function(d) { return d.text; })
 
    //Entering words
    cloud.enter()
          .append("text")
          .style("font-family", "Impact")
          .style("fill", function(d, i) { return fill(i); })
          .attr("text-anchor", "middle")
          .attr('font-size', 1)
          .text(function(d) { return d.text; });
 
    //Entering and existing words
    cloud.transition()
          .duration(600)
          .style("font-size", function(d) { return d.size + "px"; })
          .attr("transform", function(d) {
            return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
          })
          .style("fill-opacity", 1);
 
    //Exiting words
    cloud.exit()
          .transition()
          .duration(200)
          .style('fill-opacity', 1e-6)
          .attr('font-size', 1)
          .remove();
  }
 
  return {
      //Recompute the word cloud for a new set of words. This method will
      // asycnhronously call draw when the layout has been computed.
      update: function(words) {
          d3.layout.cloud().size([500, 500])
              .words(words)
              .padding(5)
              .rotate(function() { return ~~(Math.random() * 2) * 90; })
              .font("Impact")
              .fontSize(function(d) { return d.size; })
              .on("end", draw)
              .start();
      }
  }
 
}
 
//http://en.wikiquote.org/wiki/Opening_lines
var words = [
  "You don't know about me without you have read a book called The Adventures of Tom Sawyer but that ain't no matter.",
    "中国人民解放军，江西省吉安市永丰县，中国深圳，学会中中中，中国。涂聚文，Geovin Du,geovindu",
  "The boy with fair hair lowered himself down the last few feet of rock and began to pick his way toward the lagoon.",
  "When Mr. Bilbo Baggins of Bag End announced that he would shortly be celebrating his eleventy-first birthday with a party of special magnificence, there was much talk and excitement in Hobbiton.",
  "It was inevitable: the scent of bitter almonds always reminded him of the fate of unrequited love."
]
 
//Remove punctation and repeated words. Compute a random
// size attribute for each word.
function getWords(i) {
  function unique(value, index, self) {
      return self.indexOf(value) === index;
  }
 
  return words[i]
          .replace(/[，。!\.,:;\?]/g, ' ')
          .split(' ')
          .filter(unique)
          .map(function(d) {
            return {text: d, size: 10 + Math.random() * 60};
          })
}
 
//Tell the word cloud to redraw with a new set of words.
//In reality the new words will probably come from a server request,
// user input or some other source.
function showNewWords(vis, i) {
  i = i || 0;
 
  vis.update(getWords(i ++ % words.length))
  setTimeout(function() { showNewWords(vis, i + 1)}, 2000)
}
 
var myWordCloud = wordCloud('body');
showNewWords(myWordCloud);
 
</script>

　　

posted @   ®Geovin Du Dream Park™  阅读(10)  评论(0)  编辑  收藏  举报
相关博文：
·  javascript: TimelineJS3 Examples
·  css: normalize.css
·  d3js -- 词云(word cloud)
·  简单的css动画---跳动的文字
·  6.1软工日报
阅读排行：
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 零经验选手，Compose 一天开发一款小游戏！
· 一起来玩mcp_server_sqlite，让AI帮你做增删改查！！
历史上的今天：
2023-01-29 CSharp: Relational mapping in donet using Entity Framework
2010-01-29 Setting the Reply-To Header in an Email using CDONTS.NewMail Object and CDO Message
< 2025年3月 >
日 一 二 三 四 五 六
23 24 25 26 27 28 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 1 2 3 4 5
点击右上角即可分享
微信分享提示