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によるデータバインド (2) | main | D3.js v4で「レ・ミゼラブル」の人物関係を可視化 >>
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) | - | - |
    スポンサーリンク