D3.js Word Cloud
<!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>
<!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>
<!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>
哲学管理(学)人生, 文学艺术生活, 自动(计算机学)物理(学)工作, 生物(学)化学逆境, 历史(学)测绘(学)时间, 经济(学)数学金钱(理财), 心理(学)医学情绪, 诗词美容情感, 美学建筑(学)家园, 解构建构(分析)整合学习, 智商情商(IQ、EQ)运筹(学)生存.---Geovin Du(涂聚文）
浙公网安备 33010602011771号