<!-- .slide: data-transition="zoom" data-background="https://i.gifer.com/76YM.gif" --> # 資料視覺化 Data Visualization --- <!-- .slide: data-transition="zoom" data-background="https://i.gifer.com/76YM.gif" --> # 什麼是資料視覺化? ---- ## 先問問你(妳)怎麼看？ --- <!-- .slide: data-transition="zoom" data-background="https://i.gifer.com/76YM.gif" --> # 為何需要視覺化? ---- # 需要解決的難題 [](https://udb.moe.edu.tw/Historical) :::info :mega: 做分析時，資料量大無從下手的時候。 ::: ---- # 視覺化的用途 <!-- .slide: data-transition="zoom" --> <div style="background-color: rgba(0, 0, 0, 0.9); color: #fff; padding: 10px;"> ## 比較(Comparison) ## 分佈(Distribution) ## 關聯(Relationship) ## 組成(Composition) </div> --- <!-- .slide: data-transition="zoom" data-background="https://i.gifer.com/76YM.gif" --> # 如何做出視覺化? ---- # 步驟一 理解資料 ---- # 時間(Date&Time)  :::warning 注意：:zap: 數字型態，許多時候當作獨立的類別。 ::: ---- # 數值(Numeric)  :::warning 注意：:zap: 變量要具有連續性才會作為數值看待。 ::: ---- # 類別(Categorical)  :::warning 注意：:zap: 用來分類，可以是文字或數字。 ::: ---- # 地理(Geographical)  :::info :mega: 常見的是經緯度、郵遞區號等。 ::: ---- # 文本(Text)  :::info :mega: 可以是文本、對話、評價等。 ::: ---- # 步驟二 處理資料 ---- # 資料框結構 |長資料|寬資料| |:---:|:---:| | | | :::info :mega: 轉為長資料能夠提升圖形『比較』的效果。 ::: ---- # 欄位命名 ```graphviz digraph dfd2{ node[shape=record] subgraph{ enti1 [label="geo.name" shape=box]; enti2 [label="indicator.name" shape=box]; enti3 [label="geo" shape=box]; enti4 [label="indicator" shape=box]; } subgraph cluster_level1{ label ="更改後"; proc1 [label="{<f0> New Name|<f1> 國家名稱\n\n\n}" shape=Mrecord]; proc2 [label="{<f0> New Name|<f1> 指標種類\n\n\n}" shape=Mrecord]; proc3 [label="{<f0> New Name|<f1> 國家代碼\n\n\n}" shape=Mrecord]; proc4 [label="{<f0> New Name|<f1> 指標代碼\n\n\n}" shape=Mrecord]; } enti1 -> proc1 enti2 -> proc2 enti3 -> proc3 enti4 -> proc4 } ``` :::info :mega: 盡可能讓圖表上的資訊清楚、一目瞭然。 ::: ---- # 遺失值處理 ```graphviz digraph hierarchy { nodesep=1.0 node [color=Red,fontname=Courier,shape=box] edge [color=Blue, style=dashed] 遺失值->{剔除資料 自行定義} 自行定義->{類別 數值} 數值 ->{取近似值 補上0} 類別 ->{補上NULL} {rank=same;數值 類別} {rank=same;取近似值 補上0} } ``` :::warning 注意：:zap: 資料量越少，遺失值處理越加重要! ::: ---- # 步驟三 資料分佈 ---- <!-- .slide: data-transition="zoom" --> # 最大值、最小值  :::info :mega: 可以用來觀察目標在群體內的位置。 ::: ---- <!-- .slide: data-transition="zoom" --> # 中位數、平均值  :::info :mega: 可以簡單的將資料做初步的分類。 ::: ---- # 步驟四 探索視覺化 ---- # 常見的圖表 [](https://datavizcatalogue.com/index.html) ---- # 靜態的圖  :::warning 注意：:zap: 主要用在平面的場景，例如書面報告。 ::: ---- # 自動的圖  :::warning 注意：:zap: 用來吸引注意力，但解釋時有拘限性。 ::: ---- # 互動的圖 [](https://leemeng.tw/gapminder.html) :::warning 注意：:zap: 適合演講或報告用來拉近觀眾距離。 ::: --- <!-- .slide: data-transition="zoom" data-background="https://i.gifer.com/76YM.gif" --> # 解釋視覺化 ---- <!-- .slide: data-transition="zoom" style="text-align: left;" --> <div style="background-color: rgba(0, 0, 0, 1); color: #fff; padding: 20px;"> # 數據軸 - x軸是什麼？ - y軸是什麼？ </div> ---- <!-- .slide: data-transition="zoom" style="text-align: left;" --> <div style="background-color: rgba(0, 0, 0, 0.9); color: #fff; padding: 20px;"> # 數值 - 有哪些數值？ - 這些數值的含義？ </div> ---- <!-- .slide: data-transition="zoom" style="text-align: left;" --> <div style="background-color: rgba(0, 0, 0, 0.9); color: #fff; padding: 20px;"> # 級別 - 詳細程度 - 比例尺 - 年、月、日 </div> ---- <!-- .slide: data-transition="zoom" style="text-align: left;" --> <div style="background-color: rgba(0, 0, 0, 0.9); color: #fff; padding: 20px;"> # 焦距 - 圖表的重點是什麼？ - 趨勢、模式、異常 - 哪些數據要突出？ </div> ---- <!-- .slide: data-transition="zoom" style="text-align: left;" --> <div style="background-color: rgba(0, 0, 0, 0.9); color: #fff; padding: 20px;"> # 聽眾 - 你想表達出什麼訊息？ - 丟出今天想探討的議題 </div> ---- <!-- .slide: data-transition="zoom" data-background="https://i.imgur.com/Z32DQDu.gif" --> ## 視覺化演講範例 {%youtube jbkSRLYSojo%} --- <!-- .slide: data-transition="zoom" data-background="https://i.gifer.com/76YM.gif" --> # 常見視覺化工具 ---- # DECK GL [](https://deck.gl/#/) ---- # D3 js [](https://d3js.org/) ---- # ECHARTS [](https://echarts.apache.org/en/index.html) --- <!-- .slide: data-transition="zoom" data-background="https://i.gifer.com/76YM.gif" --> # 參考教材 [](https://www.amazon.co.uk/Data-Visualization-Made-Simple-Insights-ebook/dp/B07HS23LTN) <div style="background-color: rgba(0, 0, 0, 0.9); color: #fff; padding: 10px;"> Data Visualization Made Simple </div> --- # 參考資料 * https://wordcloud.timdream.org/ * https://udb.moe.edu.tw/Historical * https://datavizcatalogue.com/index.html * https://leemeng.tw/gapminder.html * https://deck.gl/#/ * https://d3js.org/ * https://echarts.apache.org/en/index.html * https://www.amazon.co.uk/Data-Visualization-Made-Simple-Insights-ebook/dp/B07HS23LTN --- <!-- .slide: data-transition="zoom" data-background="https://i.gifer.com/76YM.gif" --> # 課後問卷調查  --- <!-- .slide: data-background="https://i.gifer.com/76YM.gif" --> # THANK YOU!!!