農業視覺化

作品分類

漸進式網路應用程式響應式網頁設計資料視覺化API 整合

製作日期

2018

技術

React.jsD3.jsPythonAPI

農業視覺化為網頁應用程式的開發,為快速了解台灣農產品歷年價格及即時查詢當日批發價格,結合了政府開放資料,串接資料開放平台所提供的 API,透過 API 將能使我們的網站與政府的資料庫做資料傳送的連結,並將回傳的資料以視覺化及互動式查詢的方式呈現。

直覺性的頁面使用,並搭配現代網站必須配備的響應式設計,讓各年齡層及不同裝置的使用者,電腦、平板及手機都能有很棒的使用者體驗。

[object Object]
[object Object]

網站設計上提供了不同方法查詢當日批發價格,可以依照農作物品項、批發市場、農作物代碼及關鍵字的輸入查詢。 在大螢幕的裝置上,設計成按鈕的方式,而在手機上則以下拉選單的方式查詢。

回傳的資料以表格呈現,使用不同顏色區隔不同筆資料。在行動裝置上,大型表格設計成可以往右滑動的呈現,在有限的螢幕大小裡,無須捨去重要資訊。

[object Object]
[object Object]

農作物的歷年月平均價格查詢方式,依照農作物類型、品項做分類。查詢資料年份的設計上,只呈現有歷史資料的年份,避免查詢該年份卻無歷史資料的情況。

以折線圖作為視覺化的選擇,縱軸價格的標示,以該農產品歷史價格的最高價為縱軸最高數值,在視覺上有較直覺性的對比。

響應式的網頁設計,不是只有在版面上的改變,視覺化的圖表也隨著裝置的螢幕大小有適應性的改變。

[object Object]
[object Object][object Object]
查看所有專案

探索更多專案