BLOGワンダープラネットの開発者ブログです。モバイルゲーム開発情報を発信。2014-09-05D3.jsによる数値の可視化JavaScript今回のエンジニアブログを担当する藤岡です。今回はD3.jsと呼ばれるJavaScriptのライブラリを使い、配列の可視化を行ってみたいと思います。Documents(データ駆動ドキュメント)」の頭文字を取ったもので、その名の通りデータとDOMを結びつける機能があります。この機能を使うことでデータセットをループ文等で制御する必要が無くなり、コードをシンプルに書くことが可能となっています。因みに、海外ではD3.jsの人気が高く、現在非常に注目度の高いライブラリです。D3.jsは、Scriptタグ内に以下の記述をすることで扱えるようになります。※チェイン構文を使わずともコードは動作しますが、個人的にはチェイン構文を使った方がコードが見やすいように感じます。200の大きさで生成しています。JavaScriptコンソールで確認してみるとsvg領域が追加されていることが確認できるかと思います。データバインディング先ほど用意したSVG領域内に、データセットと対応した棒線を描画します。datasetは配列なのですが、for文等のループ構文が使用されていません。セレクション対象をrectに設定してから、data()関数でDOMにデータバインドしています。data()関数はデータセット内の値の個数を数え、解析してくれます。よって、data()関数がチェインされている全ての要素は、各々のデータセットの個数分繰り返されることになります。セレクト対象の要素rectはまだ生成されていません。セレクト対象を生成するにはenter()関数が必要です。enter()関数は、バインドされたデータを受け取り、DOM要素の個数を比べ、足りない分を仮データとして生成します。enter()関数が生成した仮データを受け取り、svg領域にrect要素を追加しています。i等の引数はバインドされたデータを監視しています。これらの動作のお陰で、ループ制御をする必要が無くなっています。各要素が追加されていることが確認できると思います。上記のソースは、データセットを棒線グラフの用に表示させています。データの値通りの幅で棒線が表示されていますが、svg描画領域を使い余してしまっています。このような事態を解消するため、スケールという機能でsvgの表示領域で棒線の幅をリサイズします。マッピングすることにより、描画領域を余すこと無く使うことが可能でしょう。スケールを定義します。線形を取り扱いますので、linear()関数を使用します。スケールによるマッピングを行うためには、入力ドメイン(domain())と出力レンジ(range())の設定が必要となります。入力データの取りうる範囲のこと。出力値の取りうる範囲のこと。500(svg領域の幅)を設定しています。後は表示幅をscaleを使って設定してあげるだけです。リサイズされたグラフが表示されました。いかがでしたでしょうか。大量のデータセットを扱う際も簡素なコードの記述と、柔軟なデータの可視化が可能です。公式ドキュメントを見て分かるのですが、D3.jsは奥が深いライブラリです。その奥深さを理解し、より本格的なグラフの描画に挑戦していきたいです。matplotlibでデータプロッティングしてみる今回のエンジニアブログを担当する藤岡です。D3.js等のデータ...2015-02-19「TexturePacker」のあれこれこんにちは。今回ブログを担当する長屋です。intro入門あけましておめでとうございます、エンジニアの成田です。本年...2014-11-04D3.jsによるデータドリブンなアニメーション今回のエンジニアブログを担当する藤岡です。Setからランダムに要素を選択する今回のエンジニアブログを担当する原です。採用情報ワンダープラネットではモバイルゲーム開発者を募集しております。(S編)C/C++でネットワークプログラミングをやってみよう(2)スターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。