SELECTED ENTRIES
CATEGORIES
ARCHIVES
SPONSORED LINK
MOBILE
qrcode
LINKS
PROFILE
OTHERS

07
--
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
--
>>
<<
--

Agata's Blog

MATLABやPythonとともにD3.jsを使ってデータ解析とデータビジュアライゼーションに挑戦する某エンジニアのBlog
スケールやticksの設定値によるx軸の変化を確認する
0

    D3.js の醍醐味は、なんといってもブラウザ上でダイナミックに動くグラフの作成ができることです。このブログでも、いよいよD3.jsを使って動きのある、さまざまな "魅せる" データ可視化手法を紹介していく予定です。でもその前に、ちょっとした腕ならしとして、まずはスケールやticksの設定によって軸の描画がどのように変化するかを確認しておきましょう。

     

    せっかくなので、プルダウンメニューからインタラクティブに値を設定できるようにしてみましょう。

     

    プログラムの28行目までは、これまでと同じように x軸を描画しています。そのうえで、30~31行目ではスケールとticksそれぞれのプルダウンメニューのDOMを取得しています。DOMの指定は、HTMLファイルでタグ内にあらかじめ埋め込んでおいたIDを指定することで実現しています。

     

    35~42行目では、それぞれのプルダウンメニューが変更されたときのコールバック関数です。それぞれのコールバック関数によって、プルダウンメニューで選択された値を取得して、x軸の描画をアップデートするための関数 updateAxis を呼び出しています。

     

    updateAxis関数の内容は45行目以降です。ここでは、x軸のスケールとticksを新たに取得した値で更新したうえで、55行目以降で表示中のx軸を更新しています。ここでは、更新の様子を分かりやすく見るために、  duration(1000) とすることで1秒 (=1000ミリ秒) かけてx軸の表示を更新しています。

     

     

    ここまでで準備は整いました。いよいよ次回からは、これまでに作成した折れ線グラフやIrisデータセットの散布図がインタラクティブに動くようにするにはどうすれば良いか、順を追って見ていくことにします。

     

    JUGEMテーマ:JavaScript

    このエントリーをはてなブックマークに追加
    | グラフ作成 | 20:45 | comments(0) | - | - |
    【D3.js】CSVからデータを読み込んで散布図を作成する
    0

      データを可視化するうえで、ファイルからデータを読み込んでグラフにするという処理は基本中の基本です。今回は、一般的によく用いられるカンマ区切りのCSVデータファイルからデータを読み込んで、散布図を表示するプログラムを作成してみましょう。

       

      せっかくなので、機械学習の練習によく使われる Iris データセットを使ってみましょう。D3.js でCSVデータを読み込むときには、 d3.csv というメソッドを使います。このメソッドの入力引数として、読み込むCSVファイル名を指定します。入力引数には、外部サイトのCSVファイルのURLを指定することもできるので、今回は統計処理ソフト R のデータセットレポジトリで公開されているIrisdataセットのURLを使用してみました。

       

      14行目では、D3.js で用意されている基本10色を呼び出しています。以前の記事にも書きましたが、基本10色の呼び出し方が以前の Ver.3 と 現行の Ver.4 では異なっているので注意が必要です。なお、Ver.4 では基本10色を使うには d3-scale-chromatic.v1.min.js を呼び出す必要がありますので、この点も注意が必要です。

       

      そしていよいよ、18行目から23行目の部分で、IrisデータセットをCSVから読み込んで変数 dataSet として保存しています。25行目から50行目までは、前回やった x,y 軸の描画ですね。その後、53行目以降ではIrisデータセットから散布図を作成しています。なお、Irisデータセットは4個の連続変数 (説明変数) と1個のカテゴリー変数 (目的変数) から成る、合計 150個のデータで構成されていますが、今回はそのうち最初の2個の変数をx,y平面上でプロットしました。また、データ点の色は目的変数に対応しています。

       

      JUGEMテーマ:JavaScript

      このエントリーをはてなブックマークに追加
      | グラフ作成 | 23:45 | comments(0) | - | - |
      【D3.js】Ver.4での折れ線グラフの作成・その1
      0

        バージョンアップしたD3.jsを使って、さっそく折れ線グラフを作成してみます。前回お話したように、バージョンアップによって、 d3.scale.linear() d3.scaleLinear() に変わったことに注意して下さい。また、軸の目盛りの表示位置を指定するためのメソッドとして、 d3.axisBottom() , d3.axisTop() , d3.axisRight() , d3.axisLeft() の4つが新たに導入されています。

        それでは、これらを使って基本的な折れ線グラフを作成してみましょう。なお、27行目や33行目に出てくる .nice() というメソッドは、スケールの両端の数値を、なるべくキリの良い数字になるように、"いい感じ (nice) " に丸めてくれるメソッドです。

         

         

        JUGEMテーマ:JavaScript

        このエントリーをはてなブックマークに追加
        | グラフ作成 | 22:29 | comments(0) | - | - |