Comparison: Original vs Improved Visualization

Original Visualization
Original Chart
Improved D3.js Visualization
Real Estate Index
Rent Index
參考圖表的問題
  • 背景干擾數據閱讀:深色且具細節的背景圖像(例如沙發和桌面)與數據線條、文字重疊,干擾了讀者聚焦於關鍵數據。背景使數據不夠清晰,降低了圖表的專業性。
  • 文字過於突兀:「3.56%-3.58%」和「0.64%」文字位置直接置於數據線上,過於突出且遮擋線條,干擾了讀者觀察數據趨勢。
  • 軸標題與刻度缺乏統一:Y 軸標題缺乏詳細說明,例如未說明「單位:指數」。此外,Y 軸刻度和數據線間的關聯沒有清晰的視覺引導,容易讓讀者誤解數據範圍。
  • 顏色對比不足:雖然橙色數據線條和白色文字有一定對比,但在深色背景下顯得模糊,整體視覺效果不佳。
  • 資訊密度不均:圖表內容資訊過於集中於「增長率」,而對數據趨勢變化缺乏上下文解釋,例如不同年份的轉折點或背景原因。
  • 時間軸標示密集:X 軸年份標籤過多(每年標示 4 個季度),導致視覺雜亂,並未有效突出重要的年份或季度。
改良圖表的選擇與分析
  • 清晰的背景設計:使用簡單的白色背景,消除了背景圖像對數據和文字的干擾,突出了數據本身,使視覺效果更專業且易於閱讀。
  • 增長率的位置優化:將 「5.15%」 和 「0.41%」 分別放置於對應的數據線末端(右側),並與線條保持適當距離。這樣的設計既不遮擋數據線,又自然引導讀者注意到重要指標。
  • 軸標題與刻度更具可讀性:Y 軸清楚標示了基準值(2008Q1 = 100),並均勻分布刻度,增加了數據的對比效果。此外,X 軸僅標示年份,避免了過多的標籤干擾。
  • 顏色對比強化:使用顏色鮮明的藍色(房地產指數)和橙色(租金指數)區分數據線條,且配合文字標籤,讓不同數據集一目了然。
  • 關鍵數據的強調:在數據線條的適當位置加入清晰的關鍵數字,並以簡單的字體和顏色突顯增長率,便於觀眾快速理解主旨。
  • 整體視覺簡化:去除了不必要的裝飾性元素(如背景圖),保持圖表整潔,突出了數據趨勢,讓讀者能快速聚焦於資訊的核心內容。
  • 時間軸標示簡化:只保留年份標示,減少 X 軸的雜亂感,同時突出關鍵時間段的數據趨勢。
改進的挑戰度

首先是在資料集的收集上花了許多時間,我們認為在這次作業中,花上最多時間的為資料的收集上。若資料與參照圖表的差異過大就失去了比較的意義,最終只能在多方選擇下挑選最適當的資料集。 因為 591 並找不到歷年的資料,最終我們選擇國泰房地產指數代替 591 作為這次的資料集。