GUNMA GIS GEEK

群馬県の片隅でオープンデータとデータビジュアライゼーションとGIS(地理情報システム)に戯れるエンジニアのブログ。

*

過去の震災データを並べて視覚化してみた。

     - d3.js, datavis, map

  • このエントリーをはてなブックマークに追加

もうすぐ3月11日。震災から5年経ったわけですが、時が経つのは早いものですね。

Map of Worldというサイトで東日本大震災を含む、1902年〜2015年までの間で死者数が1000人を超える地震のデータが公開されていたので、そのデータをビジュアライズしてみました。

earthquake histroy

Demo

赤い円が死者数、青い円がマグニチュードの大きさです。
点線は最大値の直径になります。
左上のセレクトメニューから「年月日」「死者数」「マグニチュード」順に並べ替えが行えます。

元データに井戸経度の情報があったので、地図でも表示してみました。スクリーンのサイズが横幅960px以上ある場合、セレクトメーニューで「地図」を選ぶことができます。

earthquake histroy
濃淡が判別しにくいですが、色の濃い地域は震災の多い地域です。
やはり環太平洋ベルト地帯付近での発生数が多い模様。

全体的に近年に近づくほど死者数が増えているようです。マグニチュードの大きさと死者数は比例していません。やはり被害の大きさは地震そのものより他の要因、津波や人口集中地であるか否かなどにさゆうされるようですね。

マグニチュードの大きさに対して死者数が多かった例。
・ハイチ地震 (2010年)
earthquake histroy

逆にマグニチュードの大きさに対して死者数が少なかった例
・チリ地震 (1960年)
earthquake histroy

・東日本大震災
3.11earthquake

・阪神淡路大震災
hansin.awaji.earthquake

・関東大震災
kanto.earthquake

 - d3.js, datavis, map

  • このエントリーをはてなブックマークに追加

  関連記事

D3 living code
d3.js Living Code

週末にちょっと作ってみました。 昔懐かしいコンソール画面風のcanvasにD3. …

svg logo
SVGをぬるぬる動かしたいので勉強中

SVGアニメーション習作。 D3のトランジション機能を使うことで殆どの用途を満た …

【D3.js】トランジション終了時にコールバックを呼ぶ
【D3.js】トランジション終了時にコールバックを呼ぶ

D3を使って要素を移動したりスタイルを変化させる際、変更(Transition) …

地理院地図
新しい地理院地図のソースコードがGitHubに公開されていたので、Fx0(FirefoxOS)にアプリとしてインストールしてみた。

国土地理院、「地理院地図」がスマホ対応、「触地図」特設サイトや西之島のGIFアニ …

pixel2latlong
【D3.js】クリックした位置の緯度経度を求める

小ネタ。 example pixel座標と緯度経度の変換を行います。 サンプル …

Google Mapにマスクをかける
【D3.js】Google Mapにsvgを使ってマスクをかける

example 実は以前、ClipPathを使って似たようなことをやったことがあ …

no image
D3.jsとjQueryのセレクションメソッドの違い

本日は小ネタ。 D3.jsのセレクションは、ほぼjQueryのセレクションと似た …

d3select000005-a
【D3.js】超基本! コンソールでselect,data,enterメソッドを理解する。

D3.jsの学習曲線が急激な坂道を描くのは、D3独特のデータバインディングの仕組 …

D3.js + hull.js
点集合を包むパスを描画する(hull.js + D3.js)

表示されている点の集合を包むパスを作成します。 D3では、「d3.geom.hu …

wpcalendar
【D3.js + node.js】 ブログのデータをGithub風のカレンダーに表示する

example WordPressもくもく勉強会@群馬 #1で作成したものです。 …