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.js v4によるVoronoi図の作り方 | main | D3を使ってデータの可視化をするうえでの小ワザ >>
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) | - | - |
    スポンサーリンク