見出し画像

きれいな Word Cloud を作るには

たきびさん

今回はテックな話です。自分の note 記事はまだ数少ないですが、マガジン毎にジャンルを分けますので、ジャンルが合わない場合はマガジンごとの個別フォローよろしくお願いします。

以前 FIREに関する検索クエリを解析してWord Cloud にしてみた でこのような画像を生成しました。

"FIRE"の後に来る検索ワード

この表示形式は Word Cloud ですが、綺麗に作るのに少し手間取ったので、備忘録として手順を残しておきます。

Word Cloud Generator

上記の画像を生成する段階では、FIRE に関連するクエリ一覧とその検索回数をすでに取得していました。

表示させたいデータ

クエリの頻度はばらつきが激しく、「FIRE とは」のような高頻度クエリから、「FIRE ずるい」のような低頻度クエリまで様々です。表示の際にフォントサイズが極端にバラつかないよう、後述する理由からスプレッドシート上で平方根をあらかじめ計算しました。

表示には Word Cloud Generator を使用しています。これはD3.js ライブラリ群に含まれる d3-cloud を利用したツールです。自身で仕様を理解しコードを書いても構いませんが (例: D3-cloud (d3-v5版) でワードクラウドを作成する)、d3-cloud 開発者による上記のデモページがインタラクティブで使いやすいため、今回はそちらを採用しました。

リンクを開くといきなり英語の Word Cloud が表示されます。“Go” を押すたびにアニメーションで再生成される点は面白いです。Word Cloud は一発で理想的な結果を得るのが難しいため、何度も簡単に再生成できるのは利点です。

ただし、この Generator は、そのままだとテキストボックスに入力された文字をスペース区切りで切って単語の頻度を計算してしまいます。ちなみに伸ばし棒(ー)も区切られてしまいます。そのため、画面下の ”One word per line” にチェックを入れます。これにより、改行区切りで認識されるようになります。

そして、今回、こちらには頻度付きのデータを持ってしまっています。一応 d3-cloud ライブラリを直接使えば頻度付きのデータを扱えるのですが、今回は Word Cloud Generator の UI をそのまま使用したいため、入力側を調整します。具体的には、先ほどのスプレッドシートから

ずるい
その後
その後
その後
その後
その後
その後
その後
つまらない
つまらない
つまらない
つまらない
つまらない
つまらない
つまらない
...

のようなデータを作成します。これは =REPT(CONCATENATE(B2, CHAR(10)), C2) を D列に入力することで実現できます。 これはクエリ (B2) に改行 (CHAR(10)) を追加した文字列を C2 回繰り返した文字列を生成します。この操作の前に、行の高さを固定しておかないと行の高さが大きくなりすぎるため、事前に手動で調整しておきましょう。

REPT を入力

その後、全てを結合した =CONCATENATE(D2:D) を E2 に入力すれば完成です。

CONCATENATE を入力

ただし、改行を含むスプレッドシートのセルをコピペするとダブルクォートが出現します。これは最初と最後だけなので、コピペ後に削除しましょう。

Scale は前処理したので n (そのまま) でも良いですし、

Scale=N

スカスカだと感じる場合は √n や

Scale=√n

log を選択することも可能です。

Scale=log(n)

日本語の場合、傾きすぎると読みにくくなるため、”5 orientations from -20° to 20°” に設定し、-20°, -10°, 0°, 10°, 20° のいずれかを選択しています。

試しに “2 orientations from 0° to 90°” にすると、縦横のみの word cloud が生成できます。

2 orientations from 0° to 90°

ただし、やはり日本語だと少し読みにくい印象です。

注: Word Cloud はお遊びで

WordCloud ライブラリ (英語)の “WARNING” にも記載されていますが、Word Cloud は重要なプレゼンテーションでの使用は避けるべきです。理由として以下が挙げられています。

  1. 人間の目は面積で表現された数値を正確に認識できません。単語の大きさから正確な頻度を読み取るのは困難です。

  2. 長い単語は構造上大きく表示されるため、バイアスが生じます。

なので、自分用のプレゼンとかくらいにとどめておくのがいいかと思います。

他の WordCloud のツール

試した他の手法もメモとして残しておきます。

kuromoji.js

HTML拡張タグでお手軽ワードクラウド、ESモジュール化したkuromoji.jsで作るword-cloudタグ も試しました。こちらは長文から word cloud を生成する目的に適しており、内部で JS 版形態素解析を実行し、名詞のみを抽出します。コード自体は d3-cloud を使用しているため結果は似ていますが、インタラクティブな調整はできません。

手順:

  1. https://code4fukui.github.io/htmlprac/ を開く

  2. 左側に以下を埋め込む

<script type="module" src="https://code4fukui.github.io/word-cloud/word-cloud.js"></script>

<word-cloud style="display:block; height:500px;">
${ここに文章}
</word-cloud>

  1. “見てみる” ボタンを押す

すると、以下のような word cloud が表示されます。

今年の夏の長期天気予報のページを入れてみた結果

Font は以下のように font-family を指定することで変更できます。

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Klee+One&display=swap" rel="stylesheet">
<word-cloud style="display:block; height:500px; font-family: 'Klee One'">
…
</word-cloud>

上記は Klee One を使用し、教科書のような雰囲気にする例です。

React + kuromoji.js + D3-CloudでWordCloudをブラウザに描画 にカスタマイズ方法が記載されていますが、習得には時間がかかりそうです。

Python の WordCloud library

Python にも WordCloud というライブラリがあって、使っている記事はいくつか見つかります。

これらの方法も試しましたが、出力画像のフォントや色合いが好みではなく、解像度の調整方法も分からず、ピンボケ画像ばかり生成されてしまったため、すぐに使用をやめました。全体的に暗く、読みにくい印象でした。

特徴としては、任意の境界線を設定できる点が挙げられます。

www.wordclouds.com

この記事を書いている途中で見つけたためまだ試しきっていませんが、日本語に対応しており、CSV 読み込み、様々なフォント指定、傾きパターン指定、外側の形指定、影付き、背景指定などが可能で、ダウンロードも無料のようです。試してみる価値はありそうです。

まとめ

Word Cloud Generator は、手軽に調整できる点が魅力です。何度も “Go” ボタンを押したくなる点も、地味に評価ポイントです。頻度付きデータを元のテキストに復元する必要がある点は少し面倒ですが、スプレッドシートでの作業は1分もかからないため、許容範囲内です。

みなさんも作ってみると楽しいですよ。

動植物の絵文字を全部出してみたら「大変良くできました💮 」が混じりましたｗ


いいなと思ったら応援しよう！