辞書プロジェクトのダッシュボードで、各カテゴリのエントリ数を進捗バーで表示する際、線形スケールでは問題があることがわかった。エントリ数が347件の小さなカテゴリと73,225件の大きなカテゴリを同じスケールで表示すると、小さなカテゴリの進捗バーがほとんど見えなくなる。
解決策は、対数スケールの進捗バーを実装することだった。具体的には、3つのキャリブレーションポイントを設定した：
- 347件 → 10%表示
- 9,218件 → 50%表示
- 73,225件 → 95%表示
このスケールにより、すべてのカテゴリの進捗が視覚的に分かりやすくなった。数百件のカテゴリも数万件のカテゴリも、それぞれ適切な長さのバーで表示される。
実装はMath.log()関数を使用した。まず、最小値と最大値の対数を取り、現在値の対数をその範囲に正規化する。その後、キャリブレーションポイントで調整を加える。
const minLog = Math.log(347);
const maxLog = Math.log(73225);
const valueLog = Math.log(count);
const normalizedValue = (valueLog - minLog) / (maxLog - minLog);
const percentage = 10 + (normalizedValue * 85); // 10%〜95%の範囲この実装により、ダッシュボードの進捗バーが直感的になった。小さなカテゴリも大きなカテゴリも、それぞれの成長が視覚的に認識できる。線形スケールでは見えなかった違いが、対数スケールでは明確になる。
同時に、タスクステータスバッジのレイアウトも改善した。以前は1行に4つしか収まらなかったが、バッジの幅を狭くすることで1行に5つ収まるようになった。これにより、ダッシュボード全体の情報密度が向上した。