來一場超級杯的地理資料視覺秀!

之前使用過Torque去呈現台灣地區OSM的2012年中編輯的歷程

沒想到CartoDB自已做的案例更酷了! 利用2015年SuperBowl期間的Twitter資料做一場資料秀,其實資料的處理不難,先在Twitter API上取出了含有#SB49的推文(tweets),區分出是新英格蘭愛國者(@Patroits)和西雅圖海鷹(@Seahawks),藉由推文(tweets)上帶有的xy座標,就可以將推文定於地圖上。當然,因為使用CartoDB所推出的Torque.js,這些資料必需匯入CartoDB,而這就是CartoDB的商業模式,它提供很好的地理視覺化工具,但資料量大或瀏覽量高時,就必須收費了!

這場超級杯的資料視覺秀,很有趣!

在18:30開場時,綠點海鷹充滿了西雅圖,而紅點的愛國者則聚集在新英格蘭,一開始就有地域上的差 異。

Screenshot 2015-02-11 17.45.24

在19:13時,新英格蘭首度觸地得分,頓時紅成一片。而19:36時,換海鷹得分則整個變成綠色。比分7:7平手!
touchdown_patriots#SB2015touchdown_seahwaks#SB2015

後來雙方再各得7分,在中場時,還是14:14的平手局面。而超級杯一直是美國本土收視率最高的節目,今年(2015)還破了最高收視率,而中場秀一直眾所矚目的焦點,廣告收益頗為驚人,然而,Katy Perry(@katyperry),我實在不認識,冏! 但從推文的量看得出來她果然是推特(Twitter)關注度高的女星。

@katyperry#SB2015

這場比賽非常戲劇化,海鷹和愛國者一路互有得分,但第四節前,海鷹一度是領先10分,但愛國者在第四節一路追趕,逆轉局面,雖然在終場前,海鷹落後3分,但球權在海鷹手中,且已經來到Goal line前不遠,只要一個touch down就完全翻盤,但關鍵出現在最後的26秒,受國者的菜鳥Malcolm Butler,居然抄掉海鷹四分衛 Rusell Wilson的傳球,而斷送海鷹的一線生機。因此,終場雖然是愛國者贏了比賽,海鷹的球迷幹譙聲浪應該不小,使得顏色有點慘綠了 XD! 整場的Highlight在Youtube,可以看得到,透過這樣地理視覺化,更讓人可以了解到球迷的動態。

Mac_BZ#SB2015

 

[試作] WebGL在Geovisualization上應用

Google Earth是一個3D視覺化的地理空間資訊展示平台,無庸置疑的是它的提供高解析度衛星影像,且虛擬實境般的地理空間資訊瀏覽環境,令許多人愛不釋手,其實由NASA的World Wind也是一個相當不錯的3D視覺化的地理空間資訊展示平台,而且是open source。這二個平台都是獨立的平台,雖然Google Earth有整合在網頁瀏覽器中,對於一個本身就是3D視覺化的地理空間瀏覽器而言,要塞入另一個瀏覽器,總是卡卡的。所以有沒有輕量一點的、且原生於網頁技術的3D視覺化工具可以用來做地理空間資訊視覺化呢?

隨著網路技術的發展,應該會有許多工具可以用,但找到許多與WebGL相關的,所以先來看看WebGL可以做什麼事。

根據Wikipedia的介紹,WebGL (Web Graphics Library) 是一個用來顯示互動式3D和2D圖形的JavaScript API,不用plug-in就可以在網頁瀏覽器中使用。WebGL的元素(elements)可以鑲嵌於其它HTML元素,且組合成網頁中的一部份,也因為WebGL與網頁瀏覽器中GPU的標準相容,因此可以加速圖形處理能力。目前WebGL的設計和維護都是 Khronos Group 。

OpenWebGlobe 簡單地說,就是一個以WebGL做的Google Earth,可以套疊上高解析度的衛星影像、用DTM把地形撐起來、可疊上3D建物、POI和文字資訊等,功能十分完善,OpenWebGlobe是以MIT License 釋出的Open source,且提供SDK給開發者。

OpenWebGlobe
以WebGL為基礎的OpenWebGlobe

 

另外,也有相對輕量化的WebGL工具,讓網頁開發者可以用於網頁中地理空間資料的3D視覺化。WebGL Globe是Chrome的一項實驗計畫,其中有許多很Cool的demo,按照介紹就可以自已做出一個地理空間資料的3D視覺化。下圖是一個簡單的試作,利用NSAS MODIS衛星影像中所採集的地面溫度,經過一番資料的處理後,地面溫度的資料根據設定的顏色顯示於這個球上,可以旋轉、放大、縮小控制瀏覽。

WebGL Globe
以NASA MODIS地面溫度的WebGL Globe試作

WebGL Earth 是強調地圖或衛星影像的套疊,如套上BingMapOSM

WebGL Earth BingMap WebGL Earth OSM

Enhanced by Zemanta