LATEST ENTRIES
CATEGORIES
ARCHIVES
SPONSORED LINK
MOBILE
qrcode
LINKS
PROFILE
OTHERS

11
--
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
--
>>
<<
--

Agata's Blog

MATLABやPythonとともにD3.jsを使ってデータ解析とデータビジュアライゼーションに挑戦する某エンジニアのBlog
D3.js v4 によるパイチャートの描画 (1)
0

    以前、このブログで「D3.jsによるパイチャートの描画」という記事を書きました。ところが D3 の v4 へのバージョンアップに伴って、d3.svg.arc() が d3.arc() に変更されたため、以前のコードのままでは v4 でパイチャートを描画できなくなってしまいました。そこで、あらためて D3 v4 を使ってパイチャートを描画してみます。

     

    ただ、前回と同じものを作っても面白くないので、ちょっとだけインタラクティブに動くグラフを作ってみました。

     

    今回のポイントは以下の 3つです。

     

    • d3.arc() によるアークの設定 (20~23行目)
    • attrTween() によるアークの連続的な変化 (66~72行目)
    • tween() によるテキスト表示内容の変化 (56~62行目)

     

    それでは順番に見ていきます (下記のJavaScriptタグやHTMLタグをクリックすると、それぞれの中身が表示されます)。

     

    1. d3.arc() によるアークの設定

    d3.arc() は、円弧の形のPath要素を生成するための関数を生成します。そこに outerRadius(), innerRadius() メソッドによって、それぞれ円弧の外側の半径と内側の半径を指定します。さらに、今回は円弧の開始角度を常に 0度 (時計の12時の位置) に設定するため、startAngle() メソッドで開始角度を指定しています。ウェブブラウザの JavaScriptコンソール上で toString.call(arc) として変数 arc の型を確認すると、関数型になっていることが分かると思います。

     

    2. attrTween() によるアークの連続的な変化

    これまで作成したアニメーションは、円の半径のようなSVG要素の基本的な属性を変更するもので、transition(), duration() などのメソッドで簡単にアニメーションとして表示することができました。ところが今回は円弧のPath要素を連続的に変化させる必要があります。そんなときに使うのが attrTween() メソッドです。

    55行目以降で定義しているgrapUpdate関数が最初に呼び出されたとき、66行目の attrTween() の第1引数 "d" は、31行目でバインドした変数 {endAngle: 2*Math.PI} です。このため、67行目の interpolate() の第1引数は d.endAngle、つまり 2*Math.PI になっています。ちなみに interpolate() メソッドは第1引数と第2引数の間を内挿 (interpolate) するための関数です。

    69行目では、この interpolate() を使って、更新前の角度と更新後の角度の間を連続的にスイープさせて d.endAngle に設定しています。つまり、68行目から71行目全体で、角度を連続的に変更させたPath要素が次々と生成されているわけです。

     

    3. tween() によるテキスト表示内容の変化

    これはパイチャートのアニメーション化に必要というわけではありませんが、せっかくなので使ってみました。

    インタラクティブなデータの可視化をする際、しばしばテキストの表示内容も連続的に変更させたくなることがあります。そのような場合には tween() メソッドが役に立ちます。やっていることは基本的には attrTween() でやったことと同じです。まず interpolate() メソッドで、ある値と別の値を内挿するための関数を作成して (58行目)、それを使って連続的に変化するテキストを生成している (69~61行目) というわけです。

     

     

     

    JUGEMテーマ:JavaScript

    このエントリーをはてなブックマークに追加
    | グラフ作成 | 14:10 | comments(0) | - | - |
    D3.js v4で「レ・ミゼラブル」の人物関係を可視化
    0

      今回はちょっと応用編です。

       

      インターネットで公開されているデータセットをいろいろ見ていると、文豪ヴィクトル・ユゴーの名作『レ・ミゼラブル』の人間関係というデータがありました。JSON形式で公開されているこのデータ、内容がどこまで正しいのかは良く分かりませんが、D3.js でJSON形式のファイルを読み込んで可視化する練習にちょうど良い手ごろなサイズなので、SVGのrect要素とtext要素だけを使って可視化してみました。

       

       

       

      JUGEMテーマ:JavaScript

      このエントリーをはてなブックマークに追加
      | 応用 | 19:57 | comments(0) | - | - |
      D3.js v4で等高線プロットを作成する
      0

        D3.js は、以前は1つのライブラリでしたが、v4 にバージョンアップしてからはモジュール化されています。たとえば、これまでに紹介した、カラーグラデーションを作成するための d3-scale-chromatic.v1.min.js というのもモジュールです。

         

        D3.jsにはいろいろなモジュールがありますが、等高線をプロットするためのモジュール、d3-contour.v1.min.js もその1つです。等高線プロットは、いろいろなデータを可視化するうえで無くてはならない手法のひとつなのですが、残念ながらこのモジュールの説明は(特に日本語のページでは)まだまだ少ないのが現状です。そこで今回は、このモジュールを使って簡単な等高線プロットを作成してみました。

         

        まずは d3.v4.min.js といっしょに d3-contour.v1.min.js を読み込みます(下の「HTML」タグをクリックすると、これらのモジュールを読み込む処理を確認できます)。せっかくなので、今回はついでに d3-scale-chromatic.v1.min.js も読み込んでいます。

         

        javascript プログラムでは、14~19行目でサンプルデータを作成しています。ここでは d3.randomNormal というメソッドを使って、(x,y) ともに正規分布に従う乱数400個を生成しています。

         

        次の22~44行目が今回のポイントです。まず22~26行目では、x-y平面上に散布されたデータから密度を計算して、等高線を示すポリゴンデータを生成する関数を定義しています。このなかでは、作成する等高線レベルの数(この例では10個)と等高線プロットの描画サイズを指定しています。

         

        そのうえで、29~44行目では、まずこの関数をつかってポリゴンデータを生成(30行目)したうえで、そのデータをSVGのpath要素として描画しています(35行目~)。37行目以降の部分では、少し見栄えをよくするためにカラーグラデーションと透明度を調整して、個々のポリゴンに色をつけています。

         

         

        JUGEMテーマ:JavaScript

        このエントリーをはてなブックマークに追加
        | D3.js | 20:40 | comments(0) | - | - |