Reactで、文章によく出る言葉をワードクラウドで表示する方法

export type Scale = 'linear' | 'sqrt';

// 回数を minPx〜maxPx の文字の大きさにする。'sqrt' は平方根で差を縮める
export function fontSizeOf(
  count: number, minCount: number, maxCount: number,
  minPx: number, maxPx: number, scale: Scale = 'sqrt',
): number {
  if (maxCount === minCount) return maxPx; // 全部同じ回数なら、全部いちばん大きく
  const f = scale === 'sqrt' ? Math.sqrt : (n: number) => n;
  const t = (f(count) - f(minCount)) / (f(maxCount) - f(minCount));
  return Math.round(minPx + (maxPx - minPx) * t);
}

回数        : 12 6 3 2 1
linear (px) : 56 33 22 18 14
sqrt   (px) : 56 39 26 21 14
6回の語の面積（12回の語を1とする）: linear 0.35 / sqrt 0.49

見本の文章 6/3/2/1回: linear 56 31 22 14 / sqrt 56 35 26 14

// 2つの箱（x, y は左上）が、gap の隙間を空けても重なるか
function overlaps(a: Placed, b: Placed, gap: number): boolean {
  return a.x < b.x + b.width + gap && b.x < a.x + a.width + gap
    && a.y < b.y + b.height + gap && b.y < a.y + a.height + gap;
}

// 大きい語から順に、真ん中からうず巻きの線に沿って外へ動かし、
// どの語とも重ならず、枠からもはみ出さない最初の位置に置く
export function layout(
  words: readonly Sized[], measure: (word: string, fontSize: number) => Size,
  area: Size, gap = 2, step = 3,
): { placed: Placed[]; skipped: Sized[] } {
  const placed: Placed[] = [];
  const skipped: Sized[] = [];
  const cx = area.width / 2;
  const cy = area.height / 2;
  const aspect = area.width / area.height; // 横長の枠では、横に広がるうず巻きにする
  const maxR = Math.hypot(cx, cy);
  for (const w of words) {
    const { width, height } = measure(w.word, w.fontSize);
    let spot: Placed | null = null;
    // アルキメデスのらせん r = (step / 2π)θ。1周で step だけ外へ出る
    for (let theta = 0, r = 0; r <= maxR; ) {
      const box: Placed = {
        ...w, width, height,
        x: cx + r * Math.cos(theta) * aspect - width / 2,
        y: cy + r * Math.sin(theta) - height / 2,
      };
      const inside = box.x >= 0 && box.y >= 0
        && box.x + width <= area.width && box.y + height <= area.height;
      if (inside && placed.every((p) => !overlaps(box, p, gap))) {
        spot = box;
        break;
      }
      theta += step / Math.max(r, step); // 線の上を、だいたい step ずつ進む
      r = (step / (2 * Math.PI)) * theta;
    }
    if (spot) placed.push(spot);
    else skipped.push(w);
  }
  return { placed, skipped };
}

export type Size = { width: number; height: number };
export type Sized = WordCount & { fontSize: number };
export type Placed = Sized & { x: number; y: number; width: number; height: number };

  猫 x=152.0 y=86.0 w=56 h=68
  窓辺 x=73.3 y=104.6 w=76 h=46
  眠り x=210.3 y=82.3 w=76 h=46
  庭 x=212.8 y=131.6 w=28 h=34
同じ入力で2回並べて同じ結果: true

import type { WordCount } from './words';
import { fontSizeOf, layout, type Scale } from './cloud';

const FONT = '"Noto Sans CJK JP", "Hiragino Sans", sans-serif';
const LINE_HEIGHT = 1.2;

// 文字の幅は、画面に出さない canvas で測る（最初に1回だけ作る）
let ctx: CanvasRenderingContext2D | null = null;
function measureText(word: string, fontSize: number) {
  ctx ??= document.createElement('canvas').getContext('2d')!;
  ctx.font = `bold ${fontSize}px ${FONT}`;
  return {
    width: Math.ceil(ctx.measureText(word).width),
    height: Math.ceil(fontSize * LINE_HEIGHT),
  };
}

type Props = {
  words: WordCount[]; // 多い順に並んだ単語と回数
  width: number;
  height: number;
  limit?: number; // 表示する語の数の上限
  scale?: Scale;
  maxFontSize?: number; // いちばん多い語の文字の大きさ（px）
};

export function WordCloud({ words, width, height, limit = 40, scale = 'sqrt', maxFontSize = 56 }: Props) {
  // 並べた結果は state にせず、レンダーのたびに props から計算する
  const top = words.slice(0, limit);
  const max = top[0]?.count ?? 0;
  const min = top[top.length - 1]?.count ?? 0;
  const sized = top.map((w) => ({ ...w, fontSize: fontSizeOf(w.count, min, max, 14, maxFontSize, scale) }));
  const { placed, skipped } = layout(sized, measureText, { width, height });

  return (
    <figure className="word-cloud">
      <ul aria-label="よく出る言葉（多い順）" style={{ position: 'relative', width, height }}>
        {placed.map((w, i) => (
          <li
            key={w.word}
            style={{
              position: 'absolute', left: w.x, top: w.y,
              fontSize: w.fontSize, lineHeight: LINE_HEIGHT,
              fontFamily: FONT, fontWeight: 'bold', whiteSpace: 'nowrap',
              color: i === 0 ? '#d85878' : i % 2 ? '#067a98' : '#1f2a30',
            }}
          >
            {w.word}
            <span className="visually-hidden">（{w.count}回）</span>
          </li>
        ))}
      </ul>
      <figcaption>
        {placed.length}語を表示
        {skipped.length > 0 && `（枠に入りきらなかった${skipped.length}語は省略）`}
      </figcaption>
    </figure>
  );
}

canvas で測った幅 − 表示の幅: 最小 0.00 px 最大 0.98 px

.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

- list "よく出る言葉（多い順）":
  - listitem: 猫 （6回）
  - listitem: 眠り （3回）
  - listitem: 窓辺 （2回）
  - listitem: 来 （2回）
  - listitem: 窓 （2回）

import { useId, useState } from 'react';
import { countWords } from './words';
import { WordCloud } from './WordCloud';

const SAMPLE =
  '猫は窓辺で眠ります。朝になると、猫は台所に来て、ごはんを待ちます。' +
  'ごはんを食べた猫は、また窓辺に戻って眠ります。' +
  '雨の日の猫は、窓の外をじっと見ています。窓の外には庭があり、庭には小鳥が来ます。' +
  '小鳥を見つけた猫は、しっぽを振ります。夜になると、猫は毛布の上で眠ります。';

export function App() {
  const [text, setText] = useState(SAMPLE);
  const textId = useId();
  const words = countWords(text, true); // ひらがなだけの語は数えない
  // 確かめるときだけ、?max=32 で最大の文字の大きさを変えられるようにした
  const max = Number(new URLSearchParams(location.search).get('max')) || 56;

  return (
    <main>
      <label htmlFor={textId}>文章</label>
      <textarea id={textId} rows={5} value={text} onChange={(e) => setText(e.target.value)} />
      <WordCloud words={words} width={360} height={240} maxFontSize={max} />
    </main>
  );
}

--- 長い英単語 40 種類
caption : 10語を表示（枠に入りきらなかった30語は省略）
words   : strawberrya(56px) blueberrya(41px) raspberrya(36px) watermelona(28px) grapefruita(25px) cranberrya(22px) cranberryb(17px) blueberryc(17px) raspberryc(17px) cranberryd(14px)

--- 長い英単語 40 種類（いちばん大きい文字を 32px に）
caption : 24語を表示（枠に入りきらなかった16語は省略）

見本の文章（20語、置けた 20 語）: 中央値 2.4ms 最小 1.7ms 最大 3.1ms
長い英単語 40 種類（40語、置けた 10 語）: 中央値 37.8ms 最小 36.8ms 最大 43.6ms