Project2: Interactive Presentation
目標:
設計及實作出互動式之呈現方式、及可進行判斷及比較之資訊內容。
說明:
中央地質調查所長期於廬山溫泉地區作各種資料監測, 希望能夠在坡地災害發生之前提出預警,以降低災損。 請使用 d3js 同時展示位移量、雨量與地下水位三種不同資料。
請使用助教以下所提供資料檔案,網頁可自由發揮創意,並不限定使用助教所提供之技術來源。
需求:
1 展示地滑、雨量與地下水位三種資料
2 互動顯示詳細文字資訊
3 輔助對照進行觀察或調整顯示範圍大小
呈現方式
1.互動:藉由滑鼠游標在X軸上的移動,能夠清楚標示三種物理量,累積雨量、地下水位與位移的詳細數字,並藉由輔助線幫助對照同時間下三種物理量的相對關係。
2.線條:X軸為時間並使用淡細線向上延伸作為背景,藉此幫助對照不同時間點資料的數值。黃色粗線條為隨著時間流動三種物理量的趨勢。
3.顏色:利用背景顏色區分safe,attention,caution三種警戒狀態,可以快速知道在某時間區間內三種物理量的警戒狀況。
廬山溫泉區防災資訊
特色
- 簡潔:
我們刻意不標上縱座標的物理量,僅僅在滑鼠游標在上面時會同時顯示當下時間點的各個詳細數值,方便大家去比較對照。因為對一般非專業相關人士來說,累積雨量、地下水位與位移這些數字並不會帶給大家特別的感覺,所以便不特地標上在座標中。如此在畫面上看起來相當乾淨,不會讓使用者不知道該注意重點在哪而使重點失焦,能馬上意會黃色明亮的線條代表隨著時間物理量的趨勢。 - 配色:
在顏色的選擇上我們下了許多功夫去選,目的是能讓顏色去說話,最好的情況是即使沒有顏色說明大家也能有直覺哪種顏色代表緊急狀況,那些顏色代表還在安全範圍,而且是能讓大家感覺舒服的顏色,即使長時間盯著這個圖表也能心曠神怡,而三種資訊則用顯眼且大字體的白色展現出大方明瞭的呈現。 - 更直觀的數值:
採用三個物理量的數值都是與警戒標準的相對值,雖然原始DATA給的是淨值,但因為若只照著原始數據去畫出圖可能容易被表面上的趨勢所誤導,例如雨量的部份若只照著原始數據去畫可能就會認為在某段時間雨量特別多的地方有可能是警戒,但事實不然,因此採用這種重新計算數值去畫的圖更能清楚表示當前情況,也可以跟景底色的警戒標準相互呼應。