Odyssey - Cover

地圖是很棒的視覺化敘事媒介,先前我們也介紹過像是 TimeMapper 、  StorymapJS 等地圖敘事工具,但這些工具搭配的地圖都是一般的靜態地圖; 如果我們可以搭配 CartoDB 製作的動態地圖來敘說故事不是很棒嗎?這次為大家介紹一款線上地圖敘事工具「Odyssey.js」,它本身即由 CartoDB 團隊開發,讓我們可以搭配 CartoDB 地圖製作各種報導與文章,一起來看看吧!

我們先前介紹過的 CartoDB 線上地圖製作工具 可以讓我們很輕易的將資料在地圖上以各種不同的方式顯示出來,例如當時所分享的實價登錄地圖、我們所製作的台灣歷年地震分布等等,而除了一般的靜態地圖外, CartoDB 也可以做出各種動態的資料呈現效果,例如台大地理系製作的台南登格熱地圖,搭配時間的演進利用熱圖將登格熱的疫情發展做很棒的呈現。

然而,資料的視覺呈現需要搭配敘事,精彩的視覺化地圖仍需要有厲害的說書人來敘說,這時候 Odyssey.js 就派上用場了!進入 http://cartodb.github.io/odyssey.js/ 之後點擊 「Create Story」,進入選擇模式的畫面:

Choose template

Odyssey.js 有三種不同模式的樣板,分別是「SLIDES」、「SCROLL」跟「TORQUE」:

  • SLIDES: 類似投影片的方式,地圖與內容逐項的演進
  • SCROLL: 類似瀏覽網頁的方式,內容隨著讀者捲動而演進
  • TORQUE: 時間軸自動的演進,故事與地圖自動變化

建立投影片式故事地圖

以 「SLIDES」樣版為例,我們可以建立類似 StorymapJS 的故事地圖。在選擇樣版畫面點擊「SLIDES」後的畫面如下:

Slide Editor

投影片模式編輯畫面主要分三個部份:底圖的地圖、左方的敘事窗,以及右方的敘事編輯器。整個故事地圖的內容完全就存在編輯器中,以 Markdown 格式寫成,若你仔細看右方的編輯器中可以看到藍色的、以「#」號開頭的文字,那即是 Markdown 的語法,表示這是一個標題。

Markdown 是一種排版語言,他使用一些簡單易理解的符號來標示各種不同的排版功能,例如:

  • 「#」開頭的行即為標題
  • 「##」開頭的行為副標題
  • 寫在兩個「*」號之間的文字 ( 例如 *這個字* ) 會以粗體呈現
  • 連結用方括號與圓括號來表現,比方說 [這個連結](http://blog.infographics.tw)
  • 可以用「*」放在行開頭製作列表清單,例如
    * 第一項 ( 注意星號後需有空白 )
    * 第二項
    * 第三項

比說下面這一段是一段簡單的 Markdown 排版文句:

  # 資料視覺化是什麼?
  * 不知道可不可以吃?
  * 聽說很好玩?
  * 我想要知道更多: [由此去](http://blog.infographics.tw)

另外,在 Odyssey.js 中也使用三個單引號「“`」區隔座標設定:

Configuration of Markers

可以看到上圖中紅框處即為設定的部份,裡面主要是儲存地圖座標點的資訊,其中 37.7620 與 -122.4316 為圖標的經緯度,「 zoom: 9」則是呈現時的地圖縮放等級。這個設定並不需要我們自己來寫,我們只將在底下的地圖中央的「+」符號對準我們要放置圖標點的位置,然後點擊標題旁的「ADD」小按鈕,設定碼便會自動加入到我們的編輯器中。

如下圖,將「2」中的「+」對準我們要放圖標的點之後,點擊「1」中的「ADD」,這時在「2」與「3」的地方便會出現圖標以及相對應的設定:

Add Marker

在這個介面的修改都會即時反應在地圖跟左方的敘事框中,所以等於可以馬上看成果。編輯完成之後,我們可以點擊下方的紙飛機按鈕來取得分享連結或程式碼 ( 下圖 1 ) ,或者是利用下載按鈕 ( 下圖 2 ) 下載原始程式碼,進而在自己的電腦上修改。若是對地圖底圖不滿意,也可以直接點選下方的地圖按鈕 ( 下圖 3 ) 來切換到不同類型的地圖。 save

 

建立捲軸式故事地圖

捲軸式故事地圖基本上與投影片式雷同,我們同樣的在地圖上標記圖標、利用 Markdown 語法撰寫文案並分段,唯一的差別在於讀者是用捲動的方式進行瀏覽,所以在瀏覽時,地圖會固定在網頁上方,而內容則在下方捲動:

scroll

除了敘事與地圖分開顯示外,你能也會注意到畫面最上方多了一小條不同顏色的線,它用來提示讀者目前已經看了多少內容了。捲動模式的地圖較小,比較是輔助的性質,因此可以讓讀者更專注於內容而不用一直分心於地圖的變化,閱讀體驗也比較接近一般的網頁,可以說也是相當實用。

建立時間軸式敘事地圖

這可以說是 Odyssey.js 與其它工具最不同的地方,他可以搭配一個自動播放的動態式地圖建立敘事地圖。若你在選擇地圖樣板畫面點選了「Torque」式樣版,首先你會注意到的即是地圖下方的時間軸控制板:

torque time track

上圖左下角的白色控制板即是時間軸控制板。這個時間軸它控制底圖的播放,與紅色的時間軸線垂直的每個灰線都代表了一個段落,自動由文章編輯器設定的時間來產生。為了設定每一個段落對應到的時間,我們在 Torque 樣板按下「ADD」時會多出幾個選項,可以讓我們將此段落設定在當前時間、強迫在進入段落時暫停等等:

Set Paragraph Time

此外, Torque 樣板中必須要在編輯器開頭設定「vizjson」參數,以指定我們要使用的動態地圖。vizjson 參數是一個網址,我們可以從我們建立的 CartoDB 地圖中取得,只要在選定的地圖點擊 Publish 後, CartoDB.js 下方的網址即是 vizjson 需要的參數。

下面這張地圖描述穆斯林節日時在推特上使用詞彙的分布狀況 ( 可以點此看實際效果 ):

ramadan

 

下圖則是 Wimbledon 相關推特在世界各地的數量與對應的比賽訊息:

結語

雖然類似的工具已經不少了,但是工具間多少都有些差異,而 Odyssey.js 搭配 CartoDB 可說是相當不錯的應用。雖然 Markdown 大家不一定有學過,但 Markdown 語法相當簡單,只要肯花十分鐘快速了解一下基本語法,相信大家都可以很快的上手。

CartoDB 本身也提供了一些使用 Odyssey.js 做出來的成品範例,有興趣的朋友可以連去參考,了解一下用 Odyssey.js 還能做到什麼樣的效果:

  • 野生的 Odyssey.js 範例 — http://blog.cartodb.com/odyssey-js-examples-in-the-wild/
  • 更多 Odyssey.js 範例 — http://blog.cartodb.com/more-odyssey-examples/

若你有使用 Odyssey.js 做出帥氣的故事地圖,也歡迎你在這裡留言分享給大家喔! 🙂

 


Written by infographics.tw

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *