Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
11
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

@january108

D3-cloud (d3-v5版) でワードクラウドを作成する

ワードクラウドを作成したい。
d3-cloud で作成したという記事をいくつか見つけ、よさそうなので利用することにした。これにあたり、D3の現在のバージョン(v5)にあわせて試行錯誤した。

概要

できあがりイメージ

スクリーンショット 2018-12-31 10.19.50.png

  • ワードと頻度をJSON形式で受け取り、ワードクラウドを作成する
  • クラウドは、
    • ランダムで着色(v5のカラーチャートの範囲で)。
    • ランダムでローテートさせる

実装

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ファイルを読み込む。
読み込みが完了したら、(1)dataのMapを作り、(2)クラウドのレイアウトを決め、(3)描画する。

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>

以下の順に読み込んでいる。
- d3ライブラリ(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 のみ。好きな方法で作ってください。

参考サイト

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
11
Help us understand the problem. What are the problem?