Global Earthquake - Cover

最近地震頻繁,剛剛在巴布亞紐幾內亞又發生一個規模七的地震,讓我們利用這個機會教大家一起來做全球地震視覺化吧!

談到地震視覺化,我們在之前的文章「D3.js 實戰 - 地表最速地球儀實作」有介紹過 3D 立體地球儀的製作方式。想想看,在地球儀上顯示地震好像很酷!之前的文章中也同時有提供程式碼,所以我們現在唯一要做的就是追加將資料畫到地球上的程式碼。

首先,我們要取得全球地震的即時資料,並確認能取得資料的使用授權。以個人或小型企業的力量很難搜集到這樣的資料,但是透過 Google 搜尋我們很快的在美國政府 USGS 網站 找到了全球地震的即時資料;他提供包含 KML、ATOM、GEOJSON 等各式各樣的格式與不同的時間區間供下載;至於資料的使用授權則是 Public Domain ,代表我們可以自由的使用。

取下來的 Geojson 檔內包含了一個個代表世界各地地震的座標點,值得注意的是每個座標點除了經緯度外還多了深度。比方說,五月一日下午五點多發生於阿拉斯加的地震其資料大概像下面這樣:

  {
    "type":"Feature",
    "properties":{"mag":2.7,"time":1430470821000," ... },
    "geometry":{"type":"Point","coordinates":[-156.489,57.3437,11.5]}, ... 
  }

可以看到經緯度座標是 -156.489 ( 經度 ) 、 57.3437 ( 緯度 ) 、 深度則是 11.5 公里。直接用 d3.json 讀取後做資料綁定,並設定 CSS ClassName 「quake」以便跟陸地版塊做區隔:

d3.json("quake.json", function(quake) {
  var circles = d3.select("svg").selectAll("path.quake")
    .data(quake.features).enter().append("path").attr("class", "quake");
});

為了實際表現地震規模的威力,我們利用泡泡面積來呈現不同規模所對應的地震波振幅。地震規模每差一級,地震波產生的最大振幅則相差十倍,而泡泡的面積又與半徑平方成正比,所以規模每增一級,對應到的泡泡半徑約增加 3.162 倍 ( 10 的平方根 ) ,我們使用 Math.pow 函式將規模對應到適當的泡泡大小 ( 如下 ) :

  function magmap(mag) {
    return Math.pow(3.162, it) / 100;
  }

產生的的「規模-泡泡對應」大致上則會如下圖:

Earthquake Magnitude

地震規模對應到的圈圈大小,以面積表現地震波振幅

 

接下來,我們要將各別的地震轉換成 SVG 物件,類似陸地版塊, D3.js 提供我們把單點繪製成圓圈的輔助函式,我們只要提供半徑計算函式就可以了。我們利用半徑來表示地震規模 ( 規模可以在地震資料中的 properties.mag 取得 ) ,並透過 magmap 轉換函式轉成適當的數值:

  var pathQuake = d3.geo.path().projection(projection)
    .pointRadius(function(it) { 
      return magmap(parseFloat(it.properties.mag)); 
  });

 

最後,記得利用 pathQuake 把剛剛綁定好的 path 標籤畫出來,為了方便隨著滑鼠移動而更新,我們將之寫成一個函式:

  function updateQuakeLocation() {
    circles.attr({
      d: pathQuake,
      stroke: "red", // 畫紅圈
      fill: "none"   // 紅圈不填滿
    });
  }

接著在原本地球儀的滑鼠事件處理函式中呼叫 updateQuakeLocation() ,我們的地震地球儀就完成了!小編順手加上了一個 Legend ,這樣可以清楚的對照每個泡泡的地震規模:

這裡使用的是近 30 日規模 2.5 以上的地震。用滑鼠拖動地球到亞洲的位置可以看到有個很大的圈圈,那就是最近剛發生大地震的尼泊爾。想要瞭解更多實作細節的話,可以參考:

 


結語

事件的第一手資訊會獲得大量的關注,因此視覺化開發效率也變得相對重要,從資料截取、專案討論、程式開發與文案編輯,團隊間的默契也對花費時間有極大的影響。

使用 d3.js 搭配各種資料提供網站,我們能很快的做出各種應用。以這次的專案來說,資料調查與程式碼撰寫在半小時內便完成,這樣的技術對即時新聞或即時行銷等與時間賽跑的課題來說都相當有幫助。

回到視覺化本身,這次的視覺化在地球儀上以泡泡呈現資訊,讓人直觀的了解地震發生的位置與規模,但是無法同時看到全部的地震又需要透過滑鼠拖動,是否會造成閱讀障礙?同時,立體的資訊表現讓我們在製作視覺化比起平面圖又多了一個維度可以應用,讀者們可以想想看:如果是你,這個視覺化還有什麼可以改進的空間呢? 🙂

 


Written by infographics.tw