資料視覺化

圖表做來做去都一樣、視覺化再怎麼變化都很無聊嗎？試試看 loading.io 動畫圖示庫，讓你的視覺化活起來！loading.i ...

向量式圖形在網路時代的地位越來越重要，然而除了卡卡的 Inkscape 、貴鬆鬆的 Adobe Illustrator 之外，我 ...

你常用到網路上各種來源的資料嗎？搜集整理總是一番功夫，是不是覺得若有一個小精靈能幫我們從搜集、整理到計算都自動完成就好了呢？ 這 ...

用戶互動的過程中，一點動態效果能有效地提升整體的使用體驗，但程式製作動畫過程繁瑣，撰寫 CSS 也相當費時。這次要介紹的 Ani ...

做了超讚視覺化作品想要在簡報中與大家分享，卻總是受限於簡報軟體而無法自由發揮嗎？瀏覽器原生簡報工具 Reveal.js 讓你直接 ...

看到想嘗試的視覺化手法，卻不知道該怎麼做嗎？讓 PlotDB 幫你吧！線上視覺化服務 PlotDB 提供上百種的視覺圖表樣版供我 ...

看膩了靜態圖表，又覺得互動套件效果有限嗎？D3.js 除了提供強大的視覺化輔助函式，就連製作動畫也難不倒他！那麼，就讓我們一起來 ...

簡單的地圖視覺化，你還要靠 QGIS 繁複的製作步驟嗎？開源專案 Datamaps 讓我們在線上快速產製十來組不同類型的熱度地圖 ...

你想做視覺化，但不會寫程式嗎？程式設計往往是資料視覺化的一大門檻，即便現今已有相當多工具可以幫我們達成任務，但當我們問起：「那我 ...

這是個所有人都需要圖表的時代，但你確定你的圖表做對了嗎？其實，使用圖表有一些簡單的規則跟手法，今天我們就三個最基本的要點、從基本 ...

最近大家最關注的話題之一即是新總統就職，同時也出現了許多演講內文分析的圖表與新聞，但是你知道這樣的視覺化要怎麼製作嗎？這次就讓我 ...

D3.js ，當前最火紅的視覺化套件，你用過了嗎？越來越多人使用 D3.js 來開發視覺化專案，但… 你對 D3.js 的了解又 ...

「哇！這好炫！可是我不會做」這是否是你內心裡常常有的遺憾呢？一個常見的例子便是 Voronoi Treemap — 一種類似教堂 ...

視覺化卻要靠寫程式這種反視覺化的方式來做，不是太諷刺了嗎？雖然程式搭配人機介面與螢幕可以展現非常強大的各種視覺化，但也為許多人製 ...

老師叫我學 Python ，學完才發現沒辦法做互動視覺化，怎麼辦？不要緊，讓 Bokeh 解救你！Bokeh 為一個 Pytho ...

會用 R 做圖表、但不懂網頁、不知道如何做互動視覺化嗎？讓 Shiny 來拯救你吧！Shiny 幫我們打包了網頁的製作細節、提供 ...

事件太多，拉起時間軸傷透腦筋嗎？時間軸是常見的視覺化手法，但現成工具往往缺乏變化，手繪又曠日費時。不要緊！Labella.js ...

當你搞懂了明度彩度、資料型態與選色工具，挑選顏色還有更重要的問題：如何為你的讀者而選？搞定色盤最終章！ ...

上週我們帶大家了解了視覺化選色的基本原則與分類，也許大家都很急著想要實際做做看，但別急 — 選色的重點從現在才開始！這次就讓我們 ...

曾煩惱視覺化作品的顏色怎麼選嗎？也許你看過很多色盤網站，但你可能不知道，一般色盤網站的色盤並不適合直接運用在資料視覺化之上的喔！ ...

不會寫程式，也想要做出 D3.js 的各種動態圖表嗎？動態圖表往往比靜態圖表強力許多，但礙於技術與工具的限制，要做出動態的視覺化 ...

正在學 D3.js 嗎？那錯過這篇你就糗大了！大約在兩個多月前， D3.js 作者 Michael Bostock 宣佈下一版本 ...

手上的資料格式跟圖表格格不入，總要處理半天才搞定嗎？當我們在利用 d3.js 做視覺化時，常碰到需要把資料轉換成各種不同結構的時 ...

長得很像圓餅圖，但概念更接近直方圖 ( Histogram ) — 這樣的極區圖又被稱做南丁格爾玫瑰圖，他與南丁格爾有什麼關係呢 ...

手上有筆資料試了半天，卻老是做不出好的圖表？覺得做圖步驟重覆又費時嗎？網路上有許多很棒的視覺化工具，然而往往我們卻不知道該如何下 ...

想利用資訊圖表做行銷嗎？線上有各式各樣的資訊圖表工具，然而很少可以讓你加入互動元素。 Venngage 除了一般資訊圖表工具會有 ...

不擅長繪圖軟體也不會畫畫，卻又想要做出不錯的資訊圖表嗎？現在資訊圖表工具百百種，但其實光是 PowerPoint 就能做出很不錯 ...

手上有一堆資料，但對於內容卻毫無頭緒嗎？前陣子 Databasic 正式上線，一口氣推出了三個有趣的資料探索工具，主打資料科學初 ...

想自製地理區塊範圍做視覺化，但現有的製圖軟體 QGIS、ArcGIS 等又好複雜！地圖視覺化總是讓人煩惱，有沒有比較好用的工具呢 ...

甘特圖為一種特殊的長條圖，最常被用來進行專案管理，所以在專案管理軟體中比較常見，一般的視覺化工具裡反而不容易見到。沒關係，今天為 ...

每天監測流量、用戶互動、銷售跟伺服器狀態，一堆視窗真是蠟燭兩頭燒！ Chartio 讓你建立視覺化的資料儀表版，將各大服務整合於 ...

我的視覺化，盲人看得到嗎？雖然資料視覺化本質上就是要用「看」的，但我們其實也可以讓他用「聽」的、「讀」的或「摸」的！這次讓我們一 ...

當我們看新聞時，報導往往一看過便忘，很多事件缺乏一個縱觀性的整理。Line.do 利用類似臉書動態牆的呈現形態，讓我們將各種資訊 ...

喜歡說故事，卻不善於繪畫與設計嗎？「要是有人能幫我畫就好了…」那你真的該看看這個服務！Storybird 串連起插畫家社群，讓無 ...

「好不容易學了 D3.js ，可是做出來的作品都好慢…」結合資料與文件模型的 D3.js 可說已是當代視覺化必備技能，可是與 S ...

「我只是要做個長條圖，有必要學程式嗎？」現今的圖表工具大多強調圖表類型多樣化與客製的彈性，卻往往把製作圖表的難度推到另一個門檻外 ...

使用現成圖表，卻常覺得做不到想要的效果嗎？ Highchart 身為一個圖表函式庫，它同時也提供了線上的圖表編輯器，讓你在使用工 ...

強大的 D3.js 有個極大的缺點 — 任何圖表都要自己重頭寫！彈性往往帶來繁瑣的副作用，然而 Cloudstitch 這間公司 ...

龐大的資料常不易分析與理解，有沒有什麼可以快速探索資料的方式呢？你需要 Datacomb ！ Datacomb 是個視覺化分析與 ...

大家可能都看過這樣的數位專輯：滿版的影象、背景動畫等極具震憾效果的敘事方式，但你是否想過這要如何做到呢？ Pageflow 讓你 ...

還記得最近爆紅的台北市政府預算視覺化嗎？它使用了 D3.js 的 Treemap 與 Force Layout 製作；前幾個月我 ...

你曾經覺得需要一個量身打造的統計圖表工具嗎？線上圖表工具用過了百百種，真的要挑一個給公司、團隊的同事們使用，有時候還是綁手綁腳的 ...

看到別人的網頁視覺化作品感到賞心悅目想要珍藏收集、或是帶回家改一改拿來自用嗎？紐約時報開發的「SVG Crowbar」套件幫你一 ...

敘事是視覺化的一個重點要素，然而網路時代的今天，說個好故事怎麼少得了先進的工具幫忙呢？今天為大家介紹 Storify — 讓你透 ...

一成不變的色塊視覺化，想來點花樣嗎？一般我們在使用 SVG 繪圖時都會指定填滿形狀的顏色，不過其實 SVG 不光只能用顏色填滿， ...

縮時攝影 ( Timelapse ) 的製作礦日費時，動態縮時 ( Hyperlapse ) 的製作更是麻煩，但是現在只要坐在家 ...

三天三夜的逐行修正、重新調整欄位 … 你曾經跟資料奮戰過嗎？為了加速人類文明進步以及節省我們的時間， Google  開發了 O ...

地圖是很棒的視覺化敘事媒介，先前我們也介紹過像是 TimeMapper 、  StorymapJS 等地圖敘事工具，但這些工具搭 ...

寫爬蟲程式、用爬蟲服務好麻煩，即便有 import.io 、  kimonolabs ，還是得點半天再另外整理，要是有個服務直接 ...

線上視覺化工具相當多，其中很多都提供了相當多的功能、素材以及複雜的收費模式。這次讓我們帶大家來看看 Visage.co － 一個 ...

中文數字轉換器除了 Spreadsheet 套件，也推出了網頁版，試試看吧： ...

資料視覺化並不難做，但做出一個優秀的視覺化作品卻是一門大學問。為了幫助大家做出更棒的視覺化作品，我們整理了六條關於視覺化相當基礎 ...

常聽到有人抱怨你的視覺化出包嗎？為什麼在臉書分享的效果總是這麼差？我們這次整理了幾個很方便的工具，讓我們可以在發表網頁視覺化作品 ...

初玩視覺化的朋友常常會犯這種錯誤：「不管什麼資料，通通畫出來就對了！」「不管資料類型，用最炫的方法就沒錯！」然而圖表也是有各自的 ...

「我的視覺化好慢！」使用 D3.js 作網頁視覺化最常與 SVG 一起運用，但向量化的本質讓 SVG 實用上有些許限制，最大的問 ...

「路殺」（路死）兩個字，可能會讓很多人覺得驚悚與陌生，但它代表的卻是台灣生態圈常見的「死亡模式」。路殺究竟是什麼呢？生態界的資料 ...

看過了許多線上資訊圖表製作工具，想要來點不一樣的嗎？那你一定要試試看 Visme ！除了常見的大量素材跟方便的編輯介面， Vis ...

「格式是PDF？喔不~~~！」相信不少人有類似的經驗，好不容易找到的資料，卻是藏在 PDF 的表格中。我們要的往往只有表格裡的資 ...

發生災害時，如何用地圖快速呈現各地區最近的救護站？在做地理資料視覺化時，常有這樣的需求：依據站點將地圖切分成許多塊，每一塊都有專 ...

常常我們嘔心瀝血的圖表作品最後會轉換成圖後以圖片的方式發表，但麻煩的是圖片的內容 Google 搜尋無法分析，而每次修改又都要重 ...

複製、貼上… 你還在手動爬資料嗎？類似 Kimono ， import.io 同樣幫程式苦手爬網站的資料，但 import.io ...

不太懂程式的你想要做 3D 視覺化，卻覺得 3D 離你太遙遠嗎？事實上，我們完全可以用平常寫網頁的方式來製作 3D 內容！網頁上 ...

想要有個圖表，但你的資料很簡單，不想搞得太複雜嗎？繪圖軟體、線上圖表工具通通丟掉，在你的網頁裡裝上這個 jQuery Plugi ...

要會動！要很炫！要很多功能！製作視覺化作品時你心裡想的是什麼？有沒有想過什麼才是真正該注意的重點呢？一個好的視覺化作品並不在於最 ...

想在網頁上做視覺化？那「SVG」這項技術你最好別錯過。可縮放式向量圖形 ( SVG ， Scalable Vector Grap ...

撰寫報導、文章時，常對如何傳達地理訊息的部份感到頭痛嗎？試試看故事地圖吧！美國北西大學奈特實驗室 ( Knight Lab  o ...

看過人物關係圖嗎？說到 D3.js 與互動視覺化，你一定不能錯過的就是 Force Layout 了，這是一個利用引力與斥力計算 ...

曾經要做特殊用途的海報，卻搞不定尺寸、比例，也不知道怎麼設計嗎？那你可能會對線上設計軟體 Canva 有興趣！Canva 不僅提 ...

常看到網上精美的泡泡圖，想不想自己做做看？透過 D3.js ，不光是一般的泡泡圖，還可以做出各種不同的變化喔！這次就讓我們來看看 ...

一圖勝萬語，有時萬言書不如一張圖來得巧。符號、圖標已成生活不可或缺的一部份，但設計圖示又不是簡單的工作；若有個地方已經收集了世界 ...

在做視覺化時，曾考慮過載入速度嗎？資料視覺化常牽涉到資料讀取，然而費時的資料傳輸很容易就讓你的讀者轉台。在資料傳輸時，讓讀者轉 ...

大家往往說台北工作好找，就業機會多，所以要上台北打拼… 事實上台北比各地的失業率狀況，你知道是如何嗎？這次我們就來利用政府釋出的 ...

你有沒有想過，在某個突發事件發生時，如果能立刻標出事件的發生次序以及地點，可以幫助更多人迅速了解發生過程。今天要介紹的，就是一款 ...

你知道怡君跟雅婷哪個名字比較「年輕」嗎？前陣子火紅的年齡計算器 how-old.net 其實是微軟 Oxford 計劃中的一部份 ...

製作視覺圖表，常常需要用到地圖表示不同的數據，但自己動手重頭畫又很麻煩。因此今天要推薦的網站 Free Vector Maps， ...

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

資料翻來翻去，就是不知道哪裡有玄機？如果你曾經試著解讀手上的資料，那你大概也了解：要用資料講故事，最困難的一點就是找出「爆點」了 ...

  ...

你有這樣的經驗嗎：明明覺得做得很棒的視覺化卻沒什麼人點？明明看起來很遜的作品卻引發了病毒效應？這樣的經驗小編有好幾次，可惜大多 ...

在地圖上畫資料，效能往往是個大問題。我們手上常有大量的資料，像是台北市監視器列表、全台登記工廠列表等等，但數十萬筆的資料要畫得 ...

有沒有廁所上到一半、或是澡洗到一半卻發生地震的經驗？台灣處在地震帶上，經常發生地震，規模常常也不小，這次我們利用地圖事件視覺化工 ...

在台灣地圖上做視覺化常常讓人困擾，因為很多工具雖然支援地圖上的資料視覺化，但在台灣往往卻看不到比縣市還更細緻的區塊。沒問題，今天 ...

做報告、做海報、做資訊圖 … 是不是曾經很煩惱，圖片資源找半天，圖表還要想辦法畫？來試試 Piktochart 吧 － Pikt ...

看過地球儀嗎？有沒有想過要怎麼做類似的視覺化？感覺起來好像很難，但是用 D3.js 的話，短短十幾行程式就做得到喔！這次 D3j ...

常用 D3.js 繪圖，但都只能在瀏覽器裡面看嗎？前端動態的結果需要即時截圖，卻不知道怎麼做比較好？這次我們帶大家看看怎麼利用 ...

常常做報告時需要網路上的資料，卻因為東西太多、滑鼠點壞了都都還抓不完嗎？ 科技的進步就是這麼神奇，Kimono 讓你連程式都不用 ...

這個標題下得可能不好，因為 pol.is ( polis.io ) 不光是個留言版，而是包含「線上評論」與「觀點分析」的「視覺化 ...

收集資料、匯出、整理再上傳？相信大家日常都會用到很多不同來源的資料，但在視覺化這些資料之前，難免要費一番功夫把資料搞定。Data ...

網頁資料視覺化常使人感到挫折 － 各種不同規格、瀏覽器支援、技術細節的瑣碎，往往令初學者為之卻步。p5.js 包裝所有的技術細節 ...

Amcharts 是一個強大的 Javascript 圖表函式庫，但他不只是一個函式庫而已；他同時提供了一個線上製作圖表的工具 ...

五彩繽紛的立體長條圖，有沒有什麼該注意的？ ...

想在網站上做資料視覺化，你會怎麼做？用 Excel 填填拉拉產生圖表再存成圖檔上傳嗎？用套件產生千篇一律的圖表再嵌入到網站裡？雖 ...

做網站從來都沒有好好設定過 Open Graph Meta Data 嗎？你這下糗大了！ 現在已有相當多的網站能讀取 Open ...

常見的圖表工具提供的往往是繪製特定圖表的功能，你有看過可以在類型間變化的圖表嗎？這次我們為了展現 D3JS 與  SVG 強大的 ...

上次介紹了網頁前端資料直爬的手法，但當資料量很大或是需要費時處理時，並不適合在網頁上做，否則會讓我們讀者的電腦當掉。因此，後端資 ...

資料，資料，我需要資料！視覺化通常拿整理好的資料來做，尤其是網頁上的資料視覺化。但如果你需要即時產生的資料，而且資料還是從別的網 ...

這次要介紹的線上圖表工具是 plot.ly 。比起 infogr.am 或 amchart 等不同的工具，plot.ly 更強調 ...

RAW ( https://raw.densitydesign.org/ ) 是個很特別的圖表工具。基於 D3.js，一頁式不需 ...

偶而看到很棒的資料視覺化也會想玩玩看他的資料，而他們的資料通常也不難取得，只要透過瀏覽器監看網路傳輸的內容很容易就可以找到。不過 ...

我們看到了厲害的草莓、不錯的蘋果、可以的夏威夷豆跟龍眼，還有其它一堆無關緊要的傢伙 ...

D3.js ( https://d3js.org ) 是一個強大的網頁端視覺化函式庫，除了他獨特的資料驅動式物件模型之外，完整的 ...

不同於一般的資訊圖表製作網站， infogr.am 是以圖表製作為主軸，以捲軸式的頁面插入各種不同的素材來做編輯，大大簡化了圖表 ...

Southwest Airlines Flight 1248, photo by Gabriel Widyna ...

2015年2月4日，一架從松山前往金門的復興航空 235 號班機疑因機件問題，機身傾斜無法順利控制，此時飛機剛駛離松山機場，尚在 ...