SELECTED ENTRIES
CATEGORIES
ARCHIVES
SPONSORED LINK
MOBILE
qrcode
LINKS
PROFILE
OTHERS

08
--
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
D3 v4 を使って地震データの一覧表を作成する
0

    これまでD3を使ってSVGを操作してきましたが、D3を使って操作できるのはSVGだけではありません。同じように select() メソッドを使って、他のDOM要素を JavaScript 側から操作することも可能です。そこで今回は、米国地質調査所 (USGS: United States Geological Survey) が公開している過去4.5ヶ月分の地震データをもとに、<div>~</div> 要素を操作して一覧表を作成するプログラムを作成しました。

     

    2行目で、まずUSGSが JSON 形式で公開している、過去4.5ヶ月分の世界の地震データ最新版のURLを設定しています。これにより、この JavaScript プログラムが呼び出されるたびに、表示されるテーブルの内容は自動的に最新版の地震データになるというわけです。7~24行目では、テーブルのヘッダー行を作成しています。ヘッダー行の背景色や文字のスタイルは CSS 側で自由に設定できるように、<div> 要素にはそれぞれクラス名を与えています。

     

    26行目以下は、いよいよ USGS のサーバーから JSON 形式の公開データを取得して、必要な情報を整理してテーブルで表示する部分です。この例では受領したデータから、個別の地震の情報のうち .泪哀縫船紂璽鼻↓発生場所の名称、H生日時、USGSの詳細情報ページのURL、の4つの情報を抽出して表示することにしています。USGSが公開しているデータにはこれ以外にも、震源地の緯度・経度や震源の深さ、発生した国の名称など多くの情報が記録されています。詳細については、USGSによる説明を参照してください。

     

    42~48行目では、データに含まれるマグニチュードの最大値と最小値を求めて、マグニチュードの数値によりテーブルの行の色が変わるようにカラーグラデーションを設定しています (関連記事:D3 v4でオリジナルのカラーマップを作成する方法)。

     

    今回は JavaScript だけでなく、CSS側でも色々な設定をしています。それぞれの内容は、下記のタブを切り替えることで確認することができます。

     

     

     

    過去の関連記事

    D3 v4でオリジナルのカラーマップを作成する方法

    D3 v4で「レ・ミゼラブル」の人物関係を可視化する

    D3で過去30日間に世界で発生した地震を可視化する

     

    JUGEMテーマ:JavaScript

    このエントリーをはてなブックマークに追加
    | 応用 | 21:23 | comments(0) | - | - |
    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) | - | - |