專題2: Interactive Presentation
目標:
設計及實作出互動式之呈現方式、及可進行判斷及比較之資訊內容。
說明:
中央地質調查所長期於廬山溫泉地區作各種資料監測, 希望能夠在坡地災害發生之前提出預警,以降低災損。 請使用 d3js 同時展示位移量、雨量與地下水位三種不同資料。
請使用助教以下所提供資料檔案,網頁可自由發揮創意,並不限定使用助教所提供之技術來源。
繳交:
每組需在小組網頁上,發表1000字左右的報告並上傳實作成果,並在課堂上做20分鐘的簡報。專題需達到以下評核點:
1 展示地滑、雨量與地下水位三種資料
2 互動顯示詳細文字資訊
3 輔助對照進行觀察或調整顯示範圍大小
完整功能 ( ̄ー ̄)
http://vie-project-2.herokuapp.com/
設計及實作出互動式之呈現方式、及可進行判斷及比較之資訊內容。
說明:
中央地質調查所長期於廬山溫泉地區作各種資料監測, 希望能夠在坡地災害發生之前提出預警,以降低災損。 請使用 d3js 同時展示位移量、雨量與地下水位三種不同資料。
請使用助教以下所提供資料檔案,網頁可自由發揮創意,並不限定使用助教所提供之技術來源。
繳交:
每組需在小組網頁上,發表1000字左右的報告並上傳實作成果,並在課堂上做20分鐘的簡報。專題需達到以下評核點:
1 展示地滑、雨量與地下水位三種資料
2 互動顯示詳細文字資訊
3 輔助對照進行觀察或調整顯示範圍大小
完整功能 ( ̄ー ̄)
http://vie-project-2.herokuapp.com/
使用技術
•javascript 部分引入助教提供的 metricsgraphics.js 的資料庫繪製圖表,參考其程式碼修改部分內容
資料判讀
•24小時累積 降雨量 (mm)
我們這組將原始累積雨量改成24小時內之累積雨量,由值的大小可以看出24小時內雨量之多寡。我們由第一個圖表可知,從6/11開始累積雨量漸增,到6/12 12:00 時達到注意值200mm;幸運的是,該處之累積雨量並沒有達到警戒值500mm,且在6/15 2:00時便已低於注意指標值,因此我們認為從累積降雨量的指標來看,安全程度算是可以接受的。
• 地下水位面 (m)
若雨持續地下,一般來說地下水位便會上升,而圖中正好驗證此一現象,而且我們發現地下水位面的上升會較降雨量慢,揣測是因為降雨之後的地表積水會慢慢地滲流進入地下成為地下水需要一段時間。我們可以看到圖中從6/9 14:00開始,水位面便漸漸上升,然後到6/11 16:00時幾乎達到注意值-42m,而此時的上升趨勢(斜率)開始漸緩,到6/13 16:00時超過了警戒值-35m,所以從此時之後便開始有些危險,當地居民可能要考慮暫時撤離此區。Y軸的負號代表地下距離地表的距離,因此值漸增表示愈接近地表。
• 位移量 (cm)
位移量一般來說也與降雨量成正比,雨愈大,沖刷地面的程度愈強,該點之位移量也會愈大。比較詭異的地方是,從6/5到6/6 0:00為止,位移量漸漸增加,達到注意值0.5cm,但是降雨量甚少,我們認為該期間內之位移量應該跟降雨無關,可能是其他因素造成的。6/6之後位移量便隨著降雨量漸增,6/15 22:00時幾乎達到警戒值2.0cm,此時位移量過大,居民應盡早撤離。
• 結論
綜觀上面三種資料,我們可以看到位移量最早達到注意值,然後地下水位面達到注意值,但地下水位面馬上在兩天後達到警戒值,當地居民及人員應盡早撤離。
學習成果
• 整理與呈現資料的方法
搭配課堂所教之資料呈現要點,來回檢核是否符合「深度、極簡、好用、忠實」。
• 學習到metricsgraphic.js 套用的用法
• d3.js 基礎使用
•javascript 部分引入助教提供的 metricsgraphics.js 的資料庫繪製圖表,參考其程式碼修改部分內容
資料判讀
•24小時累積 降雨量 (mm)
我們這組將原始累積雨量改成24小時內之累積雨量,由值的大小可以看出24小時內雨量之多寡。我們由第一個圖表可知,從6/11開始累積雨量漸增,到6/12 12:00 時達到注意值200mm;幸運的是,該處之累積雨量並沒有達到警戒值500mm,且在6/15 2:00時便已低於注意指標值,因此我們認為從累積降雨量的指標來看,安全程度算是可以接受的。
• 地下水位面 (m)
若雨持續地下,一般來說地下水位便會上升,而圖中正好驗證此一現象,而且我們發現地下水位面的上升會較降雨量慢,揣測是因為降雨之後的地表積水會慢慢地滲流進入地下成為地下水需要一段時間。我們可以看到圖中從6/9 14:00開始,水位面便漸漸上升,然後到6/11 16:00時幾乎達到注意值-42m,而此時的上升趨勢(斜率)開始漸緩,到6/13 16:00時超過了警戒值-35m,所以從此時之後便開始有些危險,當地居民可能要考慮暫時撤離此區。Y軸的負號代表地下距離地表的距離,因此值漸增表示愈接近地表。
• 位移量 (cm)
位移量一般來說也與降雨量成正比,雨愈大,沖刷地面的程度愈強,該點之位移量也會愈大。比較詭異的地方是,從6/5到6/6 0:00為止,位移量漸漸增加,達到注意值0.5cm,但是降雨量甚少,我們認為該期間內之位移量應該跟降雨無關,可能是其他因素造成的。6/6之後位移量便隨著降雨量漸增,6/15 22:00時幾乎達到警戒值2.0cm,此時位移量過大,居民應盡早撤離。
• 結論
綜觀上面三種資料,我們可以看到位移量最早達到注意值,然後地下水位面達到注意值,但地下水位面馬上在兩天後達到警戒值,當地居民及人員應盡早撤離。
學習成果
• 整理與呈現資料的方法
搭配課堂所教之資料呈現要點,來回檢核是否符合「深度、極簡、好用、忠實」。
• 學習到metricsgraphic.js 套用的用法
• d3.js 基礎使用