Agriculture Visualisation
CATEGORIES
Progressive Web App, Responsive Web Design, Data Visualisation, API IntegrationDATE
2018TECHNOLOGIES
React.js, D3.js, Python, APILINK
Food PriceAgricultural visualisation is a progressive web application for quickly understanding historical prices of Taiwanese agricultural products and real-time querying of current wholesale prices. This integration leverages government open data by interfacing with the open data platform's provided API. Through this API, our website establishes a connection with the government's database for data transmission and presents the returned data in a visual and interactive format.
The user interface is designed for intuitiveness and includes responsive design to accommodate users of different age groups and devices, such as computers, tablets, and mobile phones, ensuring an excellent user experience.
![[object Object]](/_next/image?url=%2Fimages%2Fprojects%2Fagriculture-visualisation%2F1-agriculture_project_window_two_for_desktop_small_1x_mdpi.png&w=3840&q=75)
![[object Object]](/_next/image?url=%2Fimages%2Fprojects%2Fagriculture-visualisation%2F2-agriculture_project_mb_large_3x_xxhdpi.png&w=3840&q=75)
The website design offers various methods to query daily wholesale prices. Users can query by crop type, wholesale market, crop code, or keywords. On larger screens, the design features buttons for querying, while on mobile devices, it uses dropdown menus for ease of use.
The returned data is presented in tables, with different colours differentiating between various data entries. On mobile devices, the large tables are designed to be scrollable to the right, ensuring that essential information is not sacrificed within the constraints of limited screen size.
![[object Object]](/_next/image?url=%2Fimages%2Fprojects%2Fagriculture-visualisation%2F3-agriculture_project_ipad_vs_iphone_for_desktop_medium_2x_xhdpi.png&w=3840&q=75)
![[object Object]](/_next/image?url=%2Fimages%2Fprojects%2Fagriculture-visualisation%2F4-agriculture_project_window_one_medium_2x_xhdpi.png&w=3840&q=75)
The method for querying the historical monthly average prices of crops is categorised based on crop types and items. In the design for querying data by year, only the years with historical data are presented to avoid situations where a query for a specific year yields no historical data.
Using a line chart as a visualisation, the vertical axis is labeled with price values, and the highest price in the historical data of that agricultural product serves as the maximum value on the vertical axis, providing an intuitive visual contrast.
Responsive web design goes beyond layout changes; the visualised charts adapt responsively to the screen size of the device.
![[object Object]](/_next/image?url=%2Fimages%2Fprojects%2Fagriculture-visualisation%2F5-agriculture_project_macbook_vs_ipad_vs_iphone_hdpi.png&w=3840&q=75)
![[object Object]](/_next/image?url=%2Fimages%2Fprojects%2Fagriculture-visualisation%2F6-agriculture_project_ipad_hdpi.png&w=3840&q=75)
![[object Object]](/_next/image?url=%2Fimages%2Fprojects%2Fagriculture-visualisation%2F7-agriculture_project_iphone_for_dektop_medium_2x_xhdpi.png&w=3840&q=75)
