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 で世界地図を描く方法
0

    D3で「つまづきの石」になりがちなのが、地図の描画とフォースレイアウトです。そこで今回は、そんなD3の難関のひとつである地図を作成してみます。

     

    大まかな手順は以下の通りです。

     

    Step.1  GeoJSON 又は TopoJSON 形式の地図データを準備する

    Step.2  d3.json メソッドで、準備したJSONデータを読み込む

    Step.3  d3.geoPath メソッドで、SVGのPath要素として地図を描画する

     

    いろいろな本やサイトを見ていると、インターネットで公開されている地図データを GeoJSON/TopoJSON に変換する方法が紹介されていたりします。でも今回は、まずはD3で地図を作成する基本的な手順を知ってもらうために、既に GeoJSON ファイルが準備できているものとして、Step.2 から進めます。

     

    下記のサンプルコードは、公開されている GeoJSON ファイルをインターネット上から読み込んで、メルカトール図法の世界地図を作成するものです。JavaScriptソースコードの23行名以降が Step.2に、また13~17行目と25行目が Step.3 に、それぞれ対応しています。

     

    ちなみに D3 v3からv4へのバージョンアップに伴い、関連するメソッドが以下のように変化しているので、これまでv3を使っていたかたは注意が必要です。

     

    • d3.geo.path() ⇒ d3.geoPath()
    • d3.geo.mercator() ⇒ d3.geoMercator()

     

     

    過去の関連記事

    D3 v4 を使って地震データの一覧表を作成する

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

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

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

     

    JUGEMテーマ:JavaScript

    このエントリーをはてなブックマークに追加
    | D3.js | 19:51 | comments(0) | - | - |
    D3を使ってデータの可視化をするうえでの小ワザ
    0

      前回はD3 v4 を使って、米国地質調査所のデータベースから地震データの一覧表を作成する方法を紹介しました (前回の記事)。そのときのJavaScriptプログラムを作成するうえで、ブラウザ上に表示される地震データの一覧表を確認しながら、いろいろと細かい調整が必要でした。データの可視化をするときには、多かれ少なかれこういう地味な作業が必要になるものです。そこで、前回のプログラムを作成するときに使った、ちょっとした小ワザをいろいろと紹介します。

       

      d3.jsonで読み込んだデータの確認方法

      CSVファイルや外部のURLからデータを読み込むときには、d3.json や d3.csv メソッドを使います。でも、プログラムの作成中には、これらのファイルがちゃんと読み込めているかどうか確認したくなるものです。

      すぐに思いつくのは、 d3.json メソッドの内部で console.log を使って読み込んだ変数をコンソールに表示するという方法です。ただ、これだと読み込めたかどうかは確認できるのですが、変数として出力しているわけではないので、たとえば「読み込んだデータ配列の100番目にD3のxxメソッドをどう適用すればいいのかコンソールで試したい」と思ってもできません。

      そんなときには d3.json や d3.csv の関数の外でデータ変数を定義をしておけば、読み込んだデータをグローバル変数として扱うことができます。例えば前回のプログラムでは、下記のように変数 dataSet をグローバル変数として定義しておけば、d3.json でデータを読み込んだ後、dataSet に対してコンソールでいろいろテストすることができます。

       

      var dataSet = new Array();

       

      d3.json(jsonFile, function(error, data){

          for(var kk=0;kk<numData;kk++){
              dataSet.push({

                  ....
              });
          }

      });

       

      連想配列の特定のキーに対するmin/maxを取得する方法

      D3 には、d3.min, d3.max という配列の最小値や最大値を返してくれる関数が用意されています。でも場合によっては、連想配列のなかの特定のキーに対する最小値や最大値を求めたい場合があります。そんなときには、d3.min, d3.max の後ろにキーを指定するための関数を追加することで、これらを求めることができます。

      言葉ではなかなか分かりにくいので、下記に簡単な例を示します。

       

      var data = [

          {key1: 1, key2: 5},

          {key1: 3, key2: 2},

          {key1: 7, key2: 1}];

       

      d3.min(data, function(d){return d.key1;})

      // key1 の最小値 1 を出力

       

      d3.max(data, function(d){return d.key2;})

      // key2 の最大値 5 を出力

       

      ちなみに D3 で用意されている配列操作のための関数については、以下のサイトが参考になります。

       

      d3.js の配列操作関数

       

      出力する文字数を制限する方法

      データによっては、ときどき極端に長い文字列が出てくることがあります。たとえば前回プログラムを作成しているときには、地震の名称が極端に長いものが見つかって、一覧表をきれいに表示するために文字列を制限する必要がありました。そんなときには、ストリング型変数 str の substr メソッドを使って文字数を制限することができます。構文は str.substr(start[, length]) です。以下に簡単な例を示します。

       

      var str = "abcdefghijklmn";

       

      str.substr(5)

      // 最初の5文字が削除されて、残る fghijklmn を出力

       

      str.substr(0,5)

      // 0番目から5文字、abcde を出力

       

      JUGEMテーマ:JavaScript

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