薛惟仁 筆記本

使用前端框架 (React/Vue/Angular 等) 搭配 Electron 開發桌面應用程式時，最容易在呼叫 Node 套件時遇到問題，此時若查詢相關文獻，會發現大多數人提供一種方法，也就是將 require 改為 window.require 來引用套件。卻伴隨 TypeError: window.require is not a function 錯誤訊息出現，且通常不會提到此問題的解法。因此這裡記錄下個人對於該問題的想法與解決方法，供未來的自己或同好參考。

我們已經學會使用長條圖來做資料探索。然而，Tableau Desktop 除了長條圖外，還有其他有趣的圖表可以使用，地圖就是其中一種，這裡分享如何使用地圖圖表來將數據視覺化。

Electron 桌面應用程式是使用 html/css/js 來建立，所以我們可以整合其他前端框架 (React/Vue/Angular 等) 作為應用程式 UI 開發工具。這裡要分享的是如何建立基於 React 的 Electron 開發環境，並詳細記載最重要的打包步驟。

相對於數據視覺化操作，官方在外觀調整的教學算是較少，或許難下關鍵字也是一個問題。平常在實作的時候，最困擾的卻也總是美化外觀的部分，對於不熟悉的人來說難以找到相對應的設定，這裡會分享幾個剛開始使用 Tableau Desktop 時不容易找到，但個人常常會用到的外觀設定。

不知道讀者們在實作長條圖工作表的時候，心裡有沒有冒出一些疑惑。「為什麼放在 Rows 的欄位顯示出來是這個方向？」、「為什麼放在 Columns 的欄位又是那樣的方向？」、「怎麼好像跟我所知道 Row 與 Column 的方向不太一樣？」有這些疑問是正常的，這裡特意獨立出一篇文章來釐清 Rows 與 Columns 的概念。

到目前為止，我們已經積累一定的基礎概念，例如：資料型態、資料角色、檔案架構等等，因此可以提升到從實作中學習的階段。這篇文章會以實作長條圖工作表作為範例說明，從中學習設計圖表的流程與體會簡單的資料探索過程。

檔案架構是在開發前應該要先了解的事，可以讓我們在對的地方做對的事情，以節省寶貴的時間。主要有四個名詞需要學習：Workbook、Worksheet、Dashboard 與 Story。

Tableau 將所有的資料欄位分成 Dimension (維度) 與 Measure (度量) 兩種角色，在實際設計工作表之前，需要先明白如何區分這兩個概念，在後續的製作中才能靈活地運用資料欄位。

若實作中遇到與資料來源有關的設定，會回到 Data Source 頁面來做調整，因此在進入實作階段之前，讓我們腳步緩一緩，先到 Data Source 頁面認識每個區塊的功用。

在開始畫面中通常會使用到的是 Connect 窗格的功能，因此特別拿出來說明。在 Connect 窗格中我們可以建立與資料來源的連線設定，這裡說是連線，但我們可以把它想成是將資料匯入 Tableau Desktop，有了資料才能繼續後續的工作，例如：建立工作表與儀表板。