設計說明
網路上搜尋得到的資產負債表多以數字為主,
比較難看出每一個母項目 (Assets, Liability and Equity)是由什麼子項目所構成,
以及每一個子項目構成母項目的比例,因此我想把這些關係給呈現出來。
這個視覺化圖表是將一個公司擁有的資產負債表設計成類似Treemap的形式,
左欄為資產 (Assets),右欄為負債及權益 (Liability & Shareholder Equity)的總和。
只要把游標移到任一個母項目的長方形盒子裡面,就可以看到構成這個母項目的子項目。
設計選擇
原始的資產負債表有項目名稱以及金額兩個項目。
項目為名目尺度,故以顏色作區別。
另外流動資產(Current Assets)及非流動資產(Noncurrent Assets)都與資產有關,
只是意義上來說這兩種資產可以拿來變現所需的「時間長度」不同,
因此在顏色上的設計資產為紅色,Current Assets為淡紅,Noncurrent Assets為深紅。
這個區別方式在流動負債(Current Liabilities)以及非流動負債(Noncurrent Liabilites)一樣適用。
金額的部分為了顯示出每個項目所佔的比例,故以面積做表示,
而且因為左右兩邊的總額以及長方形的長度皆相同,兩邊的長方形可以互相比較。
經驗法則 - Overview first, details on demand
這個圖表一開始為顯示母項目,若是使用者想進一步觀看子項目的資訊,
即可以將游標移至相對應的母項目。未來可以嘗試將觸發動態轉場的Mouse Event改為 onClick(),
以方便使用者可以觀看多個母項目包含子項目的資訊。
資料來源
https://www.investing.com/equities/google-inc-balance-sheet