こういう表現方法のアイディアって面白いですね。 健康というのは上限値と下限値があるものです。数値が低すぎてもダメな一方、高すぎてもダメというのもあります。一定の範囲があって、その中に収まっていれば問題なしというパターンが多いです。 そんな健康状態を一つのグラフに表現しているのがhGraphになります。レーダーチャート風ですが、一風変わった面白いグラフになっています。 デモです。 中央に全体としての評価、その周囲に健康状態を表す各指標と範囲内かどうかの評価があります。濃緑の部分は問題なし、赤い部分は標準範囲外となります。 各指標をクリックすると拡大されてさらに細かな数字が見られるようになります。 血液検査も実際には細かく数値が分かれています。 こちらは別なデモ。ツールバーからの操作もできます。 さらにこうやってパーツごとに説明もできます。SVGならではですね。 健康状態のグラフをレーダーチャートで表すのはよく見ますが、そこに標準範囲も入れることで全体としての健康状態が一目で分かるようになります。さらにクリックイベントでズームイン/アウトさせることも可能です。利用用途が限られますが、健康関係のサイトで使ってみると面白いグラフです。 hGraphはJavaScript製、Apache License 2.0のオープンソース・ソフトウェアです。 hGraph - Your health in one picture. hGraph - Health Score Graphing goinvo/hGraph