好みのアイコンでピープルグラフ⁈

People Graph

レベルなどグラフ情報を記載した[ JSON ]ファイルを読み込んでアイコン化したグラフを複数表示

| 2021/05/12

グラフをアイコン個数で表示する事をピープルグラフというらしい

エクセルではピープルグラフというらしいです。こんな感じでアイコンでグラフを表示します。

整数は一個まるまる、小数点以下はアイコンを刈り込んだ状態で表示。

サンプルデモ：https://labo.studio-happyvalley.com/peopleGraph/

いろいろな小数に合わせてアイコンも表示

WEBサイトで、いろいろな事柄をグラフを使ったりしてより分かりやすく説明することも多いと思います。
そんな時、味気ない棒グラフや折れ線グラフより、アイコンで表示する方が興味深く見ることができるのではと思います。
アイコンは画像でもいいのですが、大きさが自在に変更できるSVGの方がいいでしょう。また、小数をアイコンの欠けた状態で表すのがミソです。

小数の大きさに合わせてアイコンを刈り込む方法は、アイコンを囲む要素の幅をパーセントで設定し子要素のアイコンを刈り込むことで小数を表現

アイコンはカラーとモノクロの2種類用意します。この二つを上下に重ねることでカラーのアイコンが刈り込まれて表示されてないスペースにモノクロ画像が表示されるようにします。
アイコンの箱になる親要素の横幅とアイコンの横幅は同じにします。
レベルが整数の時は親要素の横幅は100％。
小数の時はそのまま横幅の値に100%乗算します。( つまり 0.1 -> 10 にします )
画像を囲む親（.wrapper）の幅が子（svg.color）より小さくなった時、overflow: hiddenを設定することでアイコンを刈り込んだように表示されます。
また刈り込まれた空きスペースにはモノクロアイコンが表示されます。

jaonファイルを読み込み指定要素へappend

グラフデータはJSON形式で記述し読み込みます。

ひとつのオブジェクトがグラフ一個分になります。データのcountキーは個数（グラフの数値）で一定の計算式でcountからLevelを算出します。

function initJson(i) {
　let data=[];
　ifcInfo(i);
　i.ifcInfo.forEach( v => {
　　i.num++;
　　v.lv= Math.round( v.count * i.ratio *10) / 10;
　　data.push(setBoxHtml(v,i));
　});
　$(i.levelBox).append(data.join(''));
}