調湿TMAのグラフをD3.jsで描いてみました


皆様こんにちは。
桜の開花予想を見ると、南のほうではもうそろそろ咲き始まるんですね。
シルラボの敷地内にある桜はやっと蕾が大きくなってきたところなのでうらやましい限りです。

今日は前々から化学分析とwebを絡めた内容で何か書きたいなーと思っていたところ、最近今更ながらjavascriptライブラリのD3.jsのことを知ったので、テストも兼ねてコーポレートサイト調湿TMAのページに掲載されているグラフをD3.jsで描いてみたいと思います。
ちなみに、D3.jsとはwebでSVG(スケーラブル・ベクター・グラフィックス)を簡単に扱えるjavascriptライブラリです。これを使うと見栄えのするグラフが簡単に描けちゃいます。

今回D3.jsで描くのはこのグラフ

では早速いきましょう。
今回D3.jsで描くのは調湿TMAのページ中程にあるグラフです。
それじゃコーディングしてくるのでしばしお待ちください。
・・・
・・

で、できました!
単純に折れ線グラフを描くだけなら割とすぐだったんですが、線を引くアニメーション処理の書き方がわからなくて手間取ってしまいました。まぁそれは置いておいて、下のボタンを押すと3本の線がにょろにょろと動き出しますので、興味のある方は動きを見てみてください。


いかがでしょうか?
作る側としては、グラフの画像ただをぺたっと貼り付けておくより、こんな感じで多少動きがあるほうが目を引いて良いと思うんですが、見る側としてはどうなんでしょう。
あんまりぐりぐり動くのもどうかと思いますが、グラフがディスプレイの表示領域に入った瞬間にバーなりラインなりが数秒間アニメーションするくらいなら面白いと思うんだけどなぁ。
今度仕事の合間を見てグラフの置き換えを提案してみようかな。

The following two tabs change content below.
ヤギー

ヤギー

<お仕事>シルラボのweb担当   <専門> web系エンジニア  <趣味>ネット、Androidアプリ開発、自転車、将棋、写真  <特徴>燃えあがれ!我が内臓脂肪!!
ヤギー

ヤギー

<お仕事>シルラボのweb担当   <専門> web系エンジニア  <趣味>ネット、Androidアプリ開発、自転車、将棋、写真  <特徴>燃えあがれ!我が内臓脂肪!!

あわせて読みたい

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)