免費開源時間軸製作 TimelineJS 視覺化歷史免程式碼


我之前在電腦玩物介紹過:「教學利器!我用「時間地圖」實作一個台灣文學家地圖」獲得許多回響,這個台灣團隊的專案目前還可以使用,幫助我們把各種結合時空軸線的資料,轉化成更清楚易懂的時間軸圖像。

今天要介紹的是另外一個非常好用且快速的線上時間軸工具:「 TimelineJS 3 」,免費開源,並且開發者還在持續維護其功能與效能,目前即將推出 3.0 版。而且最重要的是,對於不懂程式碼的我們來說「 TimelineJS 3 」讓我們只需要四個步驟,用我們最熟悉的表格方式,就能在桌面或行動網頁上創造出可以滑動、結合影音的精美時間軸。

如果你有很多歷史資料需要視覺化處理,或是你想介紹自己的產品發展史,無論是教學或展示用途,「 TimelineJS 3 」一定都可以幫上你的大忙。




下面就是我利用「 TimelinJS 3 」製作的一個簡單的時間軸,大家可以左右滑動看看效果。





那麼我們要如何製作出這樣的時間軸圖像呢?下面就來看看其簡單的步驟

首先,你需要在一份制式的時間軸表格範本上填寫你需要的資料,打開 TimelineJS 提供的「時間軸表格範本」,利用 Google Drive 完成表格填寫即可。

就像我下圖這樣,表格的內容很好理解,就是設定時間、寫上內容,然後在 Media 處可以填寫你需要的影音圖像的網址,例如插入圖片網址就會顯示圖片,「 TimelineJS 3 」支援的多媒體來源有 Twitter, Flickr, Google Maps, YouTube, Vimeo, Vine, Dailymotion, Wikipedia, SoundCloud ,或是任何可以直接連結圖片的網址都可以。




完成時間軸的表格填寫後,在 Google Docs 的左上方「檔案」選擇「發佈到網路」,把這份表格發布成公開網頁,並且獲得這份表格的網址。




接著回到「 TimelineJS 3 」網站首頁,在下方說明的「第三步」中輸入前面獲得的表格網址。




就這麼簡單,這時候你可以在「 TimelineJS 3 」網站的下方看到自己建立的時間軸的預覽效果,你可以獲得這份時間軸要嵌入其他網頁的程式碼,或是這個時間軸直接展示的網址。

而且「 TimelineJS 3 」製作出來的時間軸還可以自動適應桌機、平板與手機螢幕的不同顯示方式。

如果你需要幫自己的知識製作成時間軸,那麼就來試試看「 TimelineJS 3 」這個資料視覺化工具吧!

「 TimelineJS 3 」網站

轉貼本文時禁止修改,禁止商業使用,並且必須註明來自電腦玩物原創作者 esor huang(異塵行者),及附上原文連結:免費開源時間軸製作 TimelineJS 視覺化歷史免程式碼


留言

  1. 這兩個服務的操作方式感覺很像,一直想說是不是同一個

    回覆刪除
    回覆
    1. 「 TimelineJS 3 」是開源的,不知道是否在時間軸的部分就有共通?

      刪除
  2. label左侧的icon是怎么加上去的呢?

    回覆刪除
  3. 請問新版的google協作平台,如何嵌入從TimelineJS所獲得的時間軸程式碼?

    回覆刪除

張貼留言

為了避免垃圾廣告留言過多,開始測試「留言管理」機制,讓我可以更容易回應讀者留言,並更簡單過濾掉廣告,但只要不是廣告留言都會通過審核。

這個網誌中的熱門文章

全家沖印、 7-11 列印照片誰好用?立可得與 ibon教學+比較表

微軟 Bing AI 繪圖工具 Image Creator 免費開放,30秒輕鬆生成圖片

Google Maps 我的地圖完全教學!規劃自助旅行攻略

3個 ChatGPT 輸入到輸出實驗,第二大腦筆記用 AI 生成文章報告

Arc 瀏覽器 windows 版測試心得,用四大介面改造升級專注工作流

Google 表單的 10 個專業問卷調查設計秘密教學

如何為筆記命名,建立搜尋規則?我的標題、分類、標籤命名法

Draw.io 中文線上製作流程圖首選!專業水準完全免費

如何用 ChatGPT 加速生成一份有圖有文的簡報,實戰案例教學

Google 表單自動關閉回覆教學:時間人數到達就過期