【D3.js】 ワードクラウド 「d3-cloud」プラグイン
【追記】
バージョン上がって動かなくなったみたいなので、以下をどうぞ。
【D3.js】「全ツイート履歴」からWord cloudを作ってみた。
「タグクラウド」という呼び名の方が一般的なのかもしれません。
「d3-clud」はワードクラウドを生成する、d3.jsのプラグインです。
使い方は、ダウンロードした中に含まれているsimple.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 |
!(function(){ d3.layout.cloud().size([300, 300]) .words([ "Hello", "world", "normally", "you", "want", "more", "words", "than", "this"].map(function(d) { return {text: d, size: 10 + Math.random() * 90}; }) ) //表示する単語を納めた配列を、wordsオブジェクトに変換 .rotate(function() { return ~~(Math.random() * 2) * 90; }) //表示する文字の角度を指定。ここでは、ランダムで 0℃ or 90℃ .fontSize(function(d) { return d.size; }) .on("end", draw) .start(); //ワード描画 function draw(words) { d3.select("body").append("svg") .attr("width", 300) .attr("height", 300) .append("g") .attr("transform", "translate(150,150)") .selectAll("text") .data(words) //wordsオブジェクトが渡される .enter().append("text") .style("font-size", function(d) { return d.size + "px"; }) .attr("text-anchor", "middle") .attr("transform", function(d) { return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")"; //ここで、実際の文字の角度を指定している }) .text(function(d) { return d.text; }); } }()); |
手軽で見栄えもよくて、とても便利なプラグインなのですがSVGで出力されるため、SVGに対応しいないブラウザでは出力されたワードクラウドが表示されません。
なので、今のところ使いどころは限られてくるかも。
備考
textタグにwriting-mode=”tb”（縦書き）を指定するとうまく配置されませんね。
