ワードクラウドを作成したい。
d3-cloud で作成したという記事をいくつか見つけ、よさそうなので利用することにした。これにあたり、D3の現在のバージョン(v5)にあわせて試行錯誤した。
概要
できあがりイメージ
- ワードと頻度をJSON形式で受け取り、ワードクラウドを作成する
- クラウドは、
- ランダムで着色（v５のカラーチャートの範囲で）。
- ランダムでローテートさせる
実装
GitHub にサンプルがあるので、ご参考ください。
JavaScript
cloud.js
var DATA_FILE_PATH = './data/words.json'; // 読み込みデータファイル
var TARGET_ELEMENT_ID = '#cloud'; // 描画先
d3.json(DATA_FILE_PATH).then(function(data) { // v5
var h = 490;
var w = 600;
var random = d3.randomIrwinHall(2);
var countMax = d3.max(data, function(d){ return d.count} );
var sizeScale = d3.scaleLinear().domain([0, countMax]).range([10, 100])
var words = data.map(function(d) {
return {
text: d.word,
size: sizeScale(d.count) //頻出カウントを文字サイズに反映
};
});
d3.layout.cloud().size([w, h])
.words(words)
.rotate(function() { return (~~(Math.random() * 6) - 3) * 30; })
.font("Impact")
.fontSize(function(d) { return d.size; })
.on("end", draw) //描画関数の読み込み
.start();
// wordcloud 描画
function draw(words) {
d3.select(TARGET_ELEMENT_ID)
.append("svg")
.attr("class", "ui fluid image") // style using semantic ui
.attr("viewBox", "0 0 " + w + " " + h ) // ViewBox : x, y, width, height
.attr("width", "100%") // 表示サイズの設定
.attr("height", "100%") // 表示サイズの設定
.append("g")
.attr("transform", "translate(" + w / 2 + "," + h / 2 + ")")
.selectAll("text")
.data(words)
.enter().append("text")
.style("font-size", function(d) { return d.size + "px"; })
.style("font-family", "Impact")
.style("fill", function(d, i) { return d3.schemeCategory10[i % 10]; })
.attr("text-anchor", "middle")
.attr("transform", function(d) {
return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
})
.text(function(d) { return d.text; });
}
});
d3.json(DATA_FILE_PATH)でJSONファイルを読み込む。
読み込みが完了したら、（１）dataのMapを作り、（２）クラウドのレイアウトを決め、（３）描画する。
HTML
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>d3-cloud（v5）を用いたワードクラウドサンプル</title>
</head>
<body>
<header></header>
<DIV id="cloud"></DIV>
<footer></footer>
<!-- word cloud -->
<script src="https://d3js.org/d3.v5.min.js" charset="utf-8"></script>
<script type="text/javascript" src="js/d3.layout.cloud.js"></script>
<script src="js/cloud.js"></script>
</body>
</html>
以下の順に読み込んでいる。
- d３ライブラリ（d3.v5.min.js。この例ではCDNで取得。）
- d3-cloudライブラリ（d3.layout.cloud.js。ダウンロード済。）
- 自作したjsファイル（cloud.js）
JSONデータ
words.json
[
{"word":"イノシシ","count":9},
{"word":"おにやんま","count":3},
{"word":"ゆるっと","count":4},
{"word":"映画","count":3},
・・・
{"word":"河津桜","count":2}
]
word と count のみ。好きな方法で作ってください。