Studio Happyvalley

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

WEBサイトのグラフを
アイコンを使って
面白く魅力的に表現

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

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

 | 2021/05/12

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

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

https://studio-happyvalley.com/wp/wp-content/uploads/2021/05/fig1.png

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

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

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

https://studio-happyvalley.com/wp/wp-content/uploads/2021/05/fig2.png

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

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

https://studio-happyvalley.com/wp/wp-content/uploads/2021/05/fig3.png

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

https://studio-happyvalley.com/wp/wp-content/uploads/2021/05/fig4.png

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

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

https://studio-happyvalley.com/wp/wp-content/uploads/2021/05/fig5.png

ひとつのオブジェクトがグラフ一個分になります。データの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(''));
}

https://studio-happyvalley.com/wp/wp-content/uploads/2021/05/fig6.png

forEach文などでJsonファイルからグラフデータを読み込みます。
さらにそのデータをHTMLへ整形します。

https://studio-happyvalley.com/wp/wp-content/uploads/2021/05/fig7.png

整形したグラフデータを指定の要素内へappendし、完了です。
Googlemapなんかと同じようにHTML側にはグラフ挿入用に1行要素を記述しておきます。
グラフの数はjsonファイルに記載した数だけいくらでも表示させることができます。

https://studio-happyvalley.com/wp/wp-content/uploads/2021/05/fig14.png

設定でアイコン数やグラフの数など
自由自在に変更可能

下記のようにそれぞれの設定値を変更すると自由にグラフを変更できます。

https://studio-happyvalley.com/wp/wp-content/uploads/2021/05/fig8.png

アイコンの種類
アイコンの名前を設定することでアイコンを変更することができます。

https://studio-happyvalley.com/wp/wp-content/uploads/2021/05/fig9.png

アイコンの数
アイコン数はlevel値なので、level5までなら5、地震の震度などのように約10まで想定できる場合は10と自在に数を設定変更できます。

https://studio-happyvalley.com/wp/wp-content/uploads/2021/05/fig10.png

アイコンの大きさ
アイコンの種類によっては大きさを変えたい場合もあります。たとえば下記のようなキャラクターの場合は大きめの方がわかりやすいので大きめに設定するなど自由にサイズを変更できます。

https://studio-happyvalley.com/wp/wp-content/uploads/2021/05/fig11.png

level値とアイコン数の係数
グラフの内容によっては何万という数値を扱う場合もるので、一個のアイコンを1万単位に設定するようなこともできます。

https://studio-happyvalley.com/wp/wp-content/uploads/2021/05/fig12.png

『好みのアイコンでピープルグラフ⁈』関連のお薦め

このページで紹介しているプログラムやビジュアルなどご依頼いただければ実装を賜ります。
お問い合わせはこちら

Permanent Exhibition