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を使ってデータの可視化をするうえでの小ワザ
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) | - | - |