資料視覺化 (科智企業股份有限公司 內訓課程)
TRANSCRIPT
資料視覺化：資訊圖表在 WEB 開發上面的應用彭其捷
ABOUT ME
• 中正經濟系 > 中正資管系• 交大資管所• 資策會 前端工程師• 卡米爾 專案經理
我的著作
Q ：科智為什麼需要深化視覺化能力？
大數據趨勢
大數據的興起？
資料視覺化的趨勢
Q ：資料為什麼要視覺化？
網頁存取的 LOG 黑盒子
GOOGLE ANALYTICS
資訊浪費• 思科公司（ Cisco ）稍早預測，今年將步入階位元組
（ zettabyte ， ZB ）時代，網路產生的資料量達 1ZB （ 10 億 TB ）。
全部資料 實際擷取 有被分析 視覺化0
25
50
75
100
125 4 月
IDC 研究
視覺化的原理？
資料視覺化的爸媽訊息設計 INFORMATION DESIGN
資訊圖表類型一：故事型簡報、雜誌、議題所使用，需要美美的，講清楚一件事情數據背後可能是一段故事
視覺化互動網頁 3D NASDAQhttp://graphics.wsj.com/3d-nasdaq/
資訊圖表類型二：實驗型用於研究用途，需真實反映數據的真實性與閱讀性有時候是進階的使用者才有辦法閱讀
http://budget.g0v.tw/budget
資訊圖表類型三：視覺效果型確切數字不太重要，重點是要華麗
資訊圖表類型四：互動型
衛福部（壽命剩餘預測）http://iiqsw.mohw.gov.tw/dv/Life_expectancy.html
同樣的資料，不同使用者可以各取所需
http://www.datajournalismtw.com/#!privacy-and-terms/cdgb
「資料視覺化」是三種元素的疊加，既有傳統新聞具備的資料性、故事性同時又透過視覺化設計吸引讀者
跨領域的學科
資料視覺化的好處• 製作某種強烈的印象• 資料即時性• 吸引人閱讀• 快速理解資料• 觀察到原本沒看到的訊息• 找出資料的瑕疵
Q ：為什麼視覺化可以製作強烈的印象？
因為圖 + 數字很有說服力
Q ：為什麼視覺化能夠吸引人閱讀？
案例 1 ：全球暖化數據
• 、
2015 Was the Hottest Year on Recordhttp://www.bloomberg.com/graphics/hottest-year-on-record/
台灣水庫近期蓄水量圖http://data.infographics.tw/viz/reservoir/
Q ：為什麼視覺化能夠快速理解資料？
很好理解 ...
銷售數據請你告訴我：平均客單價超過 150 的時段？
找到 NYC 最多的樹種http://www.cloudred.com/labprojects/nyctrees/
Q ：為什麼視覺化能夠觀察到原本沒看到的訊息？
THIS CHART SHOWS WHO MARRIES CEOS, DOCTORS, CHEFS AND JANITORS
http://www.bloomberg.com/graphics/2016-who-marries-whom/
職業數據加上婚姻數據
各地區誤放颱風假比率有多高？http://p.udn.com.tw/upf/newmedia/2015_data/20150930_udntyphoon/udntyphoon/index.html
Q ：為什麼視覺化能夠更快找到資料的問題？
一目了然的概念
資料視覺化的流程(1) 瞭解這些人到底在意的是什麼？製造服務化、客戶洞察
(2) 盤點擁有什麼資料？(3) 挑選適合的視覺化圖表
http://www.datavizcatalogue.com/index.html
每個圖表有他的個性要先確認，想要知道什麼訊息？長條圖折線圖一般表格歷史圖表泡泡圖熱點圖地圖網路關係圖圓餅圖
一般是從要放什麼圖表開始比較正確的情境是由需求來驅動我想要看到工廠的資料
是什麼樣資料呢？資料量的多寡呢？時間的長短呢？
我想要知道數據隨著時間的變化
我想要知道資料分布的狀況我想要看各單位相對佔比的改變
我想要同時看許多單位 (超過 50個 ) 的大小比較‘我想要看各地區數據的差異
我想要觀察道路位置的數據資訊我想要看在一個環境當中各個單位之間的關係
我想要同時比較不同單位的多維度資料我想要看出這塊市場的數字比例
我想要同時看到不同資料的摘要資訊
我想要看到單純數字的比較網路關係圖
長條圖我想要看到單純數字的比較類比型的資訊
折線圖我想要知道數據隨著時間的變化連續的資料
LESS IS MORE
橫的直條圖
歷史圖表HISTOGRAM
我想要知道資料分布的狀況例如：都集中在哪些時段？
一般表格我想要同時看到不同資料的摘要資訊(而且資訊量蠻多的 )
泡泡圖我想要同時看許多單位 (超過 50個 ) 的相對數字大小比較關鍵議題
細胞組織圖我想要看各單位相對佔比的改變http://howmuch.net/articles/world-economy-as-a-living-organism
熱點地圖我想要看各地區數據的差異
我想要看各地區數據的差異 熱點道路圖http://www.bloomberg.com/graphics/2016-metro-shutdown/
網路關係圖我想要看在一個環境當中各個單位之間的關係
圓餅圖我想要看出這塊市場的數字比例( 例如：國家預算都分到哪些單位 )
雷達圖我想要同時比較不同單位的多維度資料( 例如：員工 1 & 員工 2 的專長比較 )
https://en.wikipedia.org/wiki/Radar_chart
資料視覺化與前端工程
前端工程技術 ( 處理資料 ) + 設計 (合適的呈現方式 ) 的結合
網頁使用圖表的幾個技巧• 重點視覺 > 細部視覺• 慎用動畫• 後端 v.s. 前端• 視覺化的同時提供證據• 加強故事性• 挑選合適的前端工具
滿不一定好
重點視覺 > 細部視覺
慎用動畫• 瀏覽器支援度較低
• 行動裝置支援較低
圖表由：後端產出( 重效能 )
V.S.
前端產出( 重互動 )
視覺化的同時提供證據人的慾望是無窮的滑鼠滑上去想要看更多點選想要看細節
HICHARThttp://www.highcharts.com/
加強故事性
為視障者而設計世界上大約有 8% 的男性人
口擁有某種形式的色盲，女性約 0.5% 。如果用台灣的人口數來計算的話，色盲的人將近有
116 萬人
挑選合適的資料視覺化工具
http://www.slideshare.net/fitc_slideshare/the-future-of-data-visualization?qid=8c32b48d-7823-41c9-8c61-c81bae8af88f&v=&b=&from_search=1
彈性與複雜度成正比。價格與好用度成正比
資料視覺化工具市佔率http://www.randalolson.com/2016/03/11/what-data-visualization-tools-do-rdataisbeautiful-oc-creators-use/
D3.JS較進階但是彈性很大
GOOGLE CHART免費但沒有這麼華麗
TABLEAU不用寫程式也可以做出各種好用的互動圖表
一句話總結
一張圖表要超過 2 秒才看得懂太慢了！
THE END