LATEST ENTRIES
CATEGORIES
ARCHIVES
SPONSORED LINK
MOBILE
qrcode
LINKS
PROFILE
OTHERS

09
--
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によるVoronoi図の作り方
0

    以前、このブログでD3.jsを使ったVoronoi図の作成方法を紹介しました (【D3.js】ボロノイ図の作成)。ところが、v4へのバージョンアップに伴い、Voronoi図を作成するための関数も d3.geom.voronoi() から d3.voronoi() に変更されたため、以前作成したプログラムのままでは D3 v4 でVoronoi図を作成できなくなってしまいました。

     

    そこで、改めて D3 v4 を使って Voronoi図の作成方法について紹介します (Voronoi図そのものの説明については割愛します。Wikipediaの説明などを参照して下さい)。

     

    それでは、下記のサンプルプログラムを使って説明を進めます。1~10行目はもう大丈夫ですね。これまで何度も出てきた、SVGを描画するための領域を定義している部分です。14~16行目では、前回紹介した方法でオリジナルのカラーグラデーションを定義しています。ここでは、0~1の数値を入力引数として与えると、LightGreenからLightCyanになめらかに変化する色を返す関数として定義しました。19~22行目では、乱数を使ってx-y平面上にVoronoi図の母点40個を設定しています。

     

    いよいよ25~28行目が今回のポイントです。そもそも d3.voronoi() というメソッドは何を返しているのでしょうか?答えは、Voronoi図を作成するための「関数」を返しています。具体的には、母点のx-y座標の配列を入力引数として与えると、Voronoi図の領域などを自動的に計算して出力する関数です。d3.voronoi() メソッドに対して、データ配列のどの値をx,y座標の数値として渡すかを、26, 27行目の .x(), .y() メソッドで定義しています。最後の .extent() メソッドは、Voronoi図を描画する範囲を指定するためのものです (JavaScriptやCSSの内容は、下記のタブを選択すると表示されます)。

     

    こうして定義した関数を使って、いよいよ31~41行目でVoronoi図を描画しています。ここで、SVGのPath要素にバインドするデータとして、voronoi.polygons(data) を与えています。これは、25行目で定義した voronoi という関数に data を与えて、それぞれの母点に対するVoronoi領域をSVGのPath要素として描画するためのものです。36~38行目の部分は、上記の関数が返したポリゴンの頂点を結んでSVGのPath要素を生成するためのものです。これらの部分については、後で詳細に見ることにします。最後に40, 41行目では、各ポリゴン要素にマウスオーバー/マウスアウトのイベントが発生した場合に、クラス要素を書き換えています。これは、CSS側でクラス名に従って色を変えるように指定しているためです。つまり、JavaScriptによるSVG要素のクラス名変更処理と、CSSによる色の設定が協調することで、マウスオーバー/マウスアウトされたポリゴン要素だけの色が変化するようにしているというわけです。

     

     

    さて、これだけだとなかなか分かりにくいので、32行目に出てきた voronoi.polygons(data) の動きもう少し詳細に見てみることにしましょう。例えばChromeなどのブラウザの開発者モードを使って、JavaScriptコンソールで voronoi.polygons(data) を呼び出すと、以下のような配列を生成していることが分かります。Voronoi図との対応が分かるように、1枚の画像の左側にブラウザ表示、右下に voronoi.polygons(data) の出力、右上に生成されたSVG要素を、それぞれ示しています。

     

    まず、右下と右上を比較すると、voronoi.polygons(data) の出力は、ぞれぞれのVoronoi領域を表現するためのPathの頂点のx-y座標の集合であることが分かります。ただ、x-y座標の数値のままではSVGのPath要素として生成できないので、36~38行目の関数でPath要素を指定するフォーマットに整形しているというわけです。

     

     

     

    JUGEMテーマ:JavaScript

    このエントリーをはてなブックマークに追加
    | D3.js | 19:08 | comments(0) | - | - |
    D3.js v4でオリジナルのカラーマップを作成する方法
    0

      以前、d3-scale-chromatic.v1.min.js を使ってグラデーションを作成する方法を紹介しました (D3.js v4で利用可能なカラーマップ一覧)。今回は、d3-scale-chromatic.v1.min.js を読み込まずに、任意のカラーマップを作成する方法を紹介します。

       

      このブログで D3.js v4 で折れ線グラフを作成する方法について紹介したときに、scaleLinear() というメソッドが出てきました。そのときは、データの値の範囲をSVG画像の座標軸にマッピングするために、このメソッドを使っていました。ところがこのメソッド、使い方によっては、数値の範囲をRBGの色の範囲にマッピングすることも可能です。試しに 0~1 の範囲の数値を、0 => cyan, 0.5 => yellow, 1 => orange となるようなオリジナルのカラーマップを作ってみました。

       

      ポイントは、14~16行目の部分です。この部分で、0~1の数値を入力引数として、cyan~yellow~orange の範囲で連続的に変化するRGB値を出力する関数を作成しています。色の指定は、この例のように既に定義されているカラーネームを使うこともできますし、RGB値を直接入力することもできます (せっかくなので、サンプルコードにアニメーションも加えてみました)。

       


       

      JUGEMテーマ:JavaScript

      このエントリーをはてなブックマークに追加
      | D3.js | 21:27 | comments(0) | - | - |
      D3.js v4 によるパイチャートの描画 (2)
      0

        前回は、d3.arc() メソッドを使ったパイチャートの作成方法について説明しました (D3.js v4 によるパイチャートの描画 (1)) 。ただ、前回は簡単のためにアークの開始角度を固定していました。そこで今回は、アークの開始角度と終了角度の両方をデータにあわせて設定できるようにして、より現実的なパイチャートにしてみましょう。

         

        せっかくなので、前回と同様にパイチャートと数字が変化するようにしてみました。ただ、今回はアークの数が複数になっているので、変化前の状態を保持しておくために each() メソッドを使ってデータを保持しておくようにしています (55行目など) 。

         

        JavaScriptのソースコードを確認するには、下記の "JavaScript" タブをクリックして下さい。

         

         

         

        過去の関連記事

        D3 v4 によるパイチャートの描画 (1)

        D3による円グラフの描画

         

        JUGEMテーマ:JavaScript

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