D3.js 视觉化教学 －全球即时地震视觉化

最近地震频繁，刚刚在巴布亚纽几内亚又发生一个规模七的地震，让我们利用这个机会教大家一起来做全球地震视觉化吧！

 

谈到地震视觉化，我们在之前的文章「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;  }

产生的的「规模－泡泡对应」大致上则会如下图：

地震规模对应到的圈圈大小，以面积表现地震波振幅

 

接下来，我们要将各别的地震转换成 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 以上的地震。用滑鼠拖动地球到亚洲的位置可以看到有个很大的圈圈，那就是最近刚发生大地震的尼泊尔。想要了解更多应用细节的话，可以参考：

• 地震资讯网页网址： http://data.infographics.tw/viz/global-earthquake/
• 地震资讯原始码： http://github.com/infographicstw/global-earthquake/

 

---

结语

事件的第一手资讯会获得大量的关注，因此视觉化开发效率也变得相对重要，从数据截取、专题讨论、程序开发与文桉编辑，团队间的默契也对花费时间有极大的影响。

使用 d3.js 搭配各种数据提供网站，我们能很快的做出各种应用。以这次的专题来说，数据调查与程序码创建在半小时内便完成，这样的技术对即时新闻或即时行销等与时间赛跑的课题来说都相当有帮助。

回到视觉化本身，这次的视觉化在地球仪上以泡泡呈现资讯，让人直观的了解地震发生的位置与规模，但是无法同时看到全部的地震又需要通过滑鼠拖动，是否会造成阅读障碍？同时，立体的资讯表现让我们在制作视觉化比起平面图又多了一个维度可以应用，读者们可以想想看：如果是你，这个视觉化还有什麽可以改进的空间呢？

 

 

D3JS相关系列教程

1. D3.js 实战 － 上色落伍了，来点图样吧！
2. D3.js 实战 － 地表最快地球仪应用   
3. 让我的视觉化动起来！D3.js 动画函数入门
4. D3.js 视觉化教学 －全球即时地震视觉化
5. 总整理！你不可错过的 d3.js 数据转换技巧
6. D3.js版贪吃蛇(Eating Snake)
7. 统计图表制作 – 使用 d3-generator
8. 用 JavaScript 做数据视觉化 - D3.JS
9. 高手才知道！七个你所不知道的 D3.js 秘技
10. D3JS 实战 － 是长条也是圆饼的变形图表

 

本文由最三方开源平台(http://www.zuisanfang.com/archives/view-2235-1.html)原创，转载请保留版权和链接!