Web-based system for visualisation of water quality index

Abstract

Data visualisation is an essential tool for effective communication and interpretation of information. Visualisation of information using images is easier compared to numerical values. Google Earth provides a platform for a practical monitoring site visualisation system. A real-time web-based water quality monitoring system was deployed on Google Earth based on National Water Quality Index of Malaysia (NWQI). The system used graphical representation through vary shape and colour for easy interpretation of water quality status. NWQI index uses; pH, dissolved oxygen, chemical oxygen demand, biochemical oxygen demand, total suspended solids and ammonical nitrogen. The use of different colour, shades of a hue and shapes for the system can motivate public to participate in environmental conservation. The colour used to represent WQI value on the map is derived from a single hue scheme of different quantities which produce varying brightness and shades. Web-based WQI index can be used to identify pollution sources based on the graphical representation of water quality trend. The system is assessed by evaluating spatial variations water quality of a river in Peninsular Malaysia known as Langat River for 2005, 2010 and 2015. The water quality index status through visualisation can be accessed at the following URL – http://www.umlivinglabsystem.com/SiteViewer/SiteViewerAvgSL.

KEYWORDS:

• Water quality index
• web-based system
• visualisation
• river
• water quality
• environmental science

Introduction

Water quality index (WQI) is an indicator of the quality of water. WQI relates a set of water quality parameters to a standard scale and combines them into a single number (Leščešen et al. 2015). WQI is one of the best tools for evaluating the quality of water resources such as the groundwater, lakes, and rivers (Anyachebelu et al. 2015). WQI is also a useful water quality monitoring tool to policymakers and environmentalists (Yogendra and Puttaiah 2008).

(Said et al. 2004, Sarkar and Abbasi 2006, Boyacioglu 2007, Avvannavar and Shrihari 2008, Gandaseca et al. 2011) have pointed out the existence of several versions of water quality indices in literature. This is mainly due to the use of different number or combination of water quality parameters for developing the indices. (Meher et al. 2015) developed a water quality index for evaluating Gange's river water quality based on fourteen parameters (pH, electrical conductivity, dissolved oxygen, total dissolved solids, turbidity, salinity, major cations, major anions and alkalinity). (Al-Shujairi 2013) developed a water quality index for monitoring the water quality of Tigris and Euphrates rivers based only on seven paramters (total dissolved solids, total hardness, pH, dissolved oxygen, biological oxygen demand, nitrate and phosphate).

The Department of Environment of Malaysia (DOE) developed the National Water Quality Index (NWQI) for assessing water quality of Malaysian rivers. According to DOE, 36.6% of rivers in Malaysia were classified as slightly polluted, and 5.2% were classified as polluted in 2013. NWQI standard has been adopted in studies by (Aweng et al. 2011, Isidore et al. 2013, Hossain et al. 2013, Suratman et al. 2015) to monitor the water quality of several rivers in Malaysia. The NWQI index uses the following parameters: pH, dissolved oxygen (DO), chemical oxygen demand (COD), biochemical oxygen demand (BOD), total dissolved solids (TSS), and ammonical nitrogen (NH₃-N). The NWQI value ranges from 0 to 100 and is calculated based on sub-index values assigned to each parameter (DOE 2014). A monitored river can be classified into one of the five classes: I, II, III, IV, and V (in descending order of water quality, where Class I being the ‘best’ and Class V being the ‘worst’ water quality).

(Bakar et al. 2013) proposed a water quality monitoring and assessment tool called the Eco-Heart Index. The Eco-Heart Index was developed to visualise water quality by drawing a ‘heart’ shape using the NWQI parameters. A full heart stands for clean while a broken heart indicates polluted water. A full heart shape is formed if all the parameters are classified as clean and a broken heart will appear if any of the parameters are classified as polluted. However, it is difficult to decipher water quality based on heart shape alone due to its limited resolution. The use of parameters to construct that do not fit neatly into a particular water class may also produce a heart-shape that is difficult to interprete.

According to (McGranaghan 1993), graphic visualisation is essential in setting communication objectives beacuse different data users will have different data quality visualisation needs. Map users rely on graphic quality to assess map accuracy and data quality. Colours are essential aesthetically and usually represent quantitative differences with three separable dimensions: hue, value (brightness), and saturation. Thus, colour is one of the important aspects of graphic visualisation to convey information, as the human visual system is sensitive to it.

The deficiency of heart shape to represent water quality status can be alleviated by the use of certain colour dimension. By adding colour dimensions, water quality maps visualisation can be enhanced. The variation the lightness, darkness and the intensity in colour representing the data values and characteristics are based on the WQI parameters (Brewer 1994).

Recently WQI computerised system has been used by various organisations to provide information on water quality. This enables users to retrieve information regarding the suitability of the monitored sites for swimming, fishing and other activities. (Gharehchahi et al. 2013) developed a computerised system using Iranian Water Quality Index for assessing Iranian waters. (Ali et al. 2016) developed a real-time water quality decision support system was developed on a web-based platform for the Tigris River, and the results are presented in GIS maps.

Other online web-based systems developed for water quality assessment are IDAH2O, a web application system for storing, arranging, and publishing data collected on habitat, biological, physical, chemical and standing water (Idaho 2013). Rideau Valley Conservation Authority (RVCA) is a web-based water quality system, which produces individual reports on the Rideau watershed’s catchments and able to help in understanding watershed trends for water resource management (Ahmed 2010, Authority 2010).

The main drawback of the previous systems is that it requires expert interpretation of data and measurement produced in the technical reports. There is also a lack of graphical representation of water quality status preventing the interpretation and usability by water quality managers, policymakers, environmentalists and community for water quality monitoring of rivers. Google Earth since recently provides a platform for a which supports a visualisation system that can be used to monitor aquatic data on-sites. According to (Silberbauer and Geldenhuys 2009), Google Earth interface allows rapid changes of scale from global to local and back and it is user friendly. Furthermore, Google’s massive centralised spatial database keeps updates for users. Such data and information updates include, among others, dam construction sites, pumps, and sewage works. Most importantly, the rivers and drainage regions are displayed clearly which are handy for hydrologist to navigate through their study areas. The ability of Google Earth to create KML files is useful for scientist without any GIS training.

Data visualisation is an essential tool for effective communication and interpretation of information. Visualisation of information in terms of image is easier as compared to numerical values. Furthermore vast availability of data requires effective and efficient ways to access and communicate information (De Vries 2011). Visualisation is essential for data analysis and data representation (Xu et al. 2010). The aim of the present study is to implement a real-time web-based water quality monitoring deployed on Google earth based on NWQI using graphical representation that combines varying shape and colour for a straightforward interpretation of water quality status without knowing the technical aspects. Graphical representation of the water quality status in this study is implemented by using varying shape as proposed by (Bakar et al. 2013). This study experimented the usage of different hues of colour together with shape. The simplicity of this approach intended to motivate the public towards environmental conservation. The developed web-based WQI index, named as UMH2O, should be able to identify pollution sources based on the graphical representation of the trends of the water quality. Part of the present study is to evaluate the spatial variations in the river water quality for various time frame of 2005, 2010 and 2015 taken from the Langat River which is in Peninsular Malaysia.

Materials and methods

Study site and sampling data

The Langat River has a total catchment area of approximately 1,815 km². It lies within latitudes 2^°40 M 152 N to 3^°16 M 15 and longitudes 101^°19 M 20 E to 102^°1 M 10 E. The catchment is illustrated in Figure 1. The Langat River Basin comprises of 15 sub-basins as follows; Pangsoon, Hulu Lui, Hulu Langat, Cheras, Kajang, Putrajaya, Hulu Semenyih, Semenyih, Batang Benar, Batang Labu, Beranang, Bangi Lama, Rinching, Teluk Datok, and Teluk Panglima Garang. The main river course length is about 141 km, and situated around 40 km east of Kuala Lumpur. The water quality data in this study were obtained from seven stations along the main Langat River, as shown in Figure 1. The water quality monitoring stations are determined by the Department of Environment (DOE), Ministry of Natural Resource and Environment of Malaysia. The selected stations (sampling points) are illustrated in Table 1. All the stations were identified based on the availability of recorded data from 2005 to 2015.

A total of 712 samples were used for the data analysis in this study. The six selected water quality parameters were DO, BOD, COD, AN, pH, and SS to measure the data set of 10-year as summarised in Table 2.

System development water quality representation

The WQI used in this system is based on NWQI parameter value by (DOE), and employed the concept of graphical representation proposed by (Bakar et al. 2013). Figure 2 represents the heart-based water quality index concept. The heart shape was developed to visualise water quality by drawing a ‘heart’ shape using the six parameters value based on NWQI, which are monitored and marked their levels in accordance with a classification data as shown in Table 3. The six marks are connected by a curve line in order, and water quality is evaluated based on the result drawn figure. If all the parameters are classified as clean (i.e. level I), a full heart shape appears. In contrast, if water is polluted and some of the parameters are not classified as clean (i.e. level II, III, IV or V), a broken heart shape would appear.

WQI calculations

The six selected water quality index variables used in this study are suspended solids (SS), biochemical oxygen demand (BOD), ammoniacal nitrogen (AN), chemical oxygen demand (COD), dissolved Oxygen (DO) and pH accordance to WQI value calculation of DOE (2014). These variables were selected by a panel of experts because they reported that when calculated and use collectively will give some indication on the water quality level or water quality index of a river (DOE 1997). According to the best-fit relationship for each six parameters, the new variables of the 6 sub-indices (SI) were determined and the overall trend for Langat River was obtained using the formula given below: $\begin{array}{rl}\mathbf{\text{WQI}}& =0.22\mathbf{\text{SIDO}}+0.19\mathbf{\text{SIBOD}}+0.16\mathbf{\text{SISS}}\\ & +0.15\mathbf{\text{SIAN}}+0.12\mathbf{\text{SIpH}}\end{array}$Where, WQI = Water quality index; SIDO = Sub-index of Dissolved Oxygen; SIBOD = Sub-index of Biological Oxygen Demand; SICOD = Sub-index of Chemical Oxygen Demand; SIAN = Subindex of Ammonical Nitrogen; SISS = Sub-index of Suspended Solids; SIpH = Sub-index of pH value.

Generally, WQI yield a unit-less number varies between 0 and 100. Measurements of each of these parameters are taken and compared to a classification table according to Table 3, where the water is identified as excellent, good, fair, poor or very poor (DOE 1999). The WQI of water quality parameters were calculated for each water sample by using the best-fit WQI equation (DOE 1999).

Each class of water is represented on the web-based system with varying colour of red based on the WQI to indicate the status of the water quality as depicted in Figure 3. This colour would then fill out the heart shape drawn earlier on the web-based system. The colour is used to represent quantitative data on maps by employing a single hue scheme which enables the user to assets water quality status with the hue and the different quantities or magnitudes with the lightness or darkness of the hue (Harrower and Brewer 2003). Lighter hues represent lower quantities (lower WQI value and polluted water) while darker hues are for higher quantities (higher WQI value and clean water).

Development of the web-based WQI

The web-based water quality system was developed using C# programming language. The main advantage of C# is the ease to integrate with components written in other languages and many of Microsoft's proprietary technologies and can be run on other platforms such as Google Earth. C# have access to the. NET Framework class libraries, which is essential in developing graphical representation of the system (Microsoft. n.d.).

Google Maps API V3.27 have been deployed in this study to view the graphical representation of WQI real-time on Google Earth platform. The water quality data in this study have been archived using MySQL. My SQL is a free, open-source database management system that is suitable for web sites because of its high-performance query engine, tremendously fast data insert capability, and strong support for specialised web functions like quick full-text searches.

To generate graphical visualisation of water quality index on the web, the selected site unique ID stored in the system will be retrieved together with starting and ending date of the data that needs to be displayed. The associated parameters for the selected data and sampling site extracted and averaged if the time frame differences were more than one day. The second step is designed to retrieve the longitude and latitude of the selected site. This important step is used to indicate the position on Google Earth where the heart that represents the WQI would be drawn. Based on the classes of the water quality parameter the heart shape would be drawn. The WQI index would then be calculated automatically and based on the WQI value, colour would be assigned as shown in Figure 4.

The parameters to visualise the water quality index are Total Suspended Solid (TSS), Chemical Oxygen Demand (COD), pH, Dissolved Oxygen (DO), Ammonical Nitrogen (NH³N), Biological Oxygen Demand (BOD). These parameters are then categorised in classes which are shown in the tables below by using the ‘if-else’ statement.

The obtained values are subsequently classified into 5 different classes based on the National Water Quality Standards for Malaysia. The following steps is to plot the coordinates according to value based on each parameter. These values are calculated and converted into percentage according to the formula and the data obtained comprises an array of numbers which indicate the location of the point on the plane, based on the coordinate system. The data obtained is defined in both hozizontal and vertical coordinate systems from the calculation previously to be able to identify the position on the plane.

WQI is calculated to identify the colour using the ‘if-else’ statement to classify the water quality based on its ranking according to Figure 4. According to Microsoft.NET, to complete the shape by connecting the points and display the colour on the plane using the C# function ‘FillClosedCurve(Brush, PointF[])’ to fill the interior of a closed cardinal spline curve defined by an array of the PointF structures which represents an ordered pair of floating-point x- and y- coordinates that defines a point in a two-dimensional plane to display the shape. The ‘Brush’ determines the characteristics of the fill and for the points ‘PointF’ is the array of x- and y- coordinates structures that define the spline. The points are connected and display the google map on the page, by repeating the array of makers and place each one on the map, fitting all markers by identify the coordinates on the map and display on the map (ESRI. n.d.).

Results and discussion

The web-based WQI graphical visualisation system is as depicted as in Figure 5. The system has been tested on data from Langat River for the year 2005, 2010 and 2015. A pop box that contain an associated water quality parameters will appear when there is a shape on the Google Earth map is clicked. The summary WQI report can be downloaded in excel format for the user perusal. Figures 6 and 7 depict WQI generated automatically by the system for Langat River for the year 2005, 2010 and 2015. The detail of WQI value for each figure is extracted and presented in Table 5 for the year 2005, Table 6 for 2010 and Table 7 for the year 2015.

As can be seen from the Supplementary Figure 6 below, the WQI for Sungai Langat from 2nd September 2010 to 2nd September 2019 at the sampling point 1L07 is 71.073 under Class III, which is consider as Satisfactory. The shape generated shows a proper heart shape, which indicate the water from 1L07 sampling point is consider clean and not polluted.

In contrast, the WQI obtained from the sampling point 1L14 is 44.651 with the Class IV, under the category of polluted. The map shows an irregular heart shape, which indicated that the water at the sampling point is polluted as shown in Supplementary Figure 7.

By using the UMH2O system, users can easily visualise the water bodies, hydrological and ecological data with interactive user interface. The interactive Google Map enable users to visualise the WQI indicated by the Eco-Heart and able to decide easily whether the river is polluted or not. From Figures 5–7, we can notice that the upstream of the Sungai Langat is not contaminated as the downstream.

The visualisation of water quality index can be accessed at the following URL – http://www.umlivinglabsystem.com/SiteViewer/SiteViewerAvgSL. A heart shape representing water quality status (WQI) will appear on Google earth map based on users selection of location and date. Users are also able to download more details related to the heart representing water quality status for the selected location and date.

Graphical analysis is important to determine the pattern, trends and other features which are not easily apparent using numerical summaries. Data visualisation is important as it enables communication of information clearly and effectively through graphical means. It is useful for analysing data that are important for water quality monitoring and decision making.

The goal of visualisation in this study is to combine the strengths of human vision, creativity, and general knowledge with the storage capacity and the computational power of modern computers to explore extensive hydrological data. This is implemented in this study by presenting graphical representations of the data to the user, which allows him/her to interact with the data to gain insight and to draw conclusions quickly (Keim et al. 2005). It is also important to be able to visualise relationship and pattern discovered from complex ecological data.

Effective visual data mining tools are required to display multivariate and spatial–temporal ecological data to easily perceive patterns and relationships. Conventional visualisation techniques for multivariate data are geometric, glyph or icon-based pixel oriented and hierarchical (Schroeder 2005).

This study proposes the usage of symbol and various colour to demonstrate WQI value deployed on Google Earth platform. The Google Earth interface as it is easy to use and allows rapid changes of scale from global to local and back. Sampling points can be located easily and the spatial database of the Google Earth keeps the background information of such as rivers and roads data up-to-date. Lighter hues represent lower qualities (lower WQI value and polluted water) while darker hues are for higher quantities (higher WQI value and clean water). The shape has been said to be inappropriate for encoding quantitative data because shape does not form a natural (Cleveland and McGill 1984). However, we believed that shape might be a useful code for conveying quantitative data if a continuum of shapes could be established in the legend and detail explanation of the heart shape is illustrated in the pop-up window on the web-based system. The web-based WQI monitoring has been tested on data from Langat River.

The heart shape and colour for all the sampling site in this study has shown improvement in water quality from the year 2005–2015 except for sampling point 1L05 and 1L15. Both of the sampling stations is represented as distorted heart shape with a lighter colour of red that indicates a lower WQI value. The water at this sampling point represents class IV that is polluted water. Station 1L05 and 1L15 are both located at the Hulu Langat catchment area of the Langat catchment. The Langat catchment area consists of agriculture, forest, water bodies and commercial and residential area.

Rapid urbanisation from agriculture land of the Langat River has been identified since the year 1981 (Amini et al. 2009, Jaafar et al. 2009). Station 1L05 and 1L15 are located along Langat River which is used for drinking water, recreation, industry, fishery and agriculture. The river flows from Gunung Nuang across Langat Basin to Kuala Langat and land use activities along the river banks contribute to deterioration of river water quality (Charlie 2010).

Langat River deteriorating water quality is caused by the point of source pollution and non-point sources. Point of source pollution at the Langat River is from industrial and agro-based industry discharge and domestic sewage from treatment plants and animal farms. The non-point of source pollution in Langat River is contributed from rainfall, irrigation and overland surfaces into the drainage system (Juahir et al. 2011).

The web-based water quality system is not limited to be used by water quality managers but everyone can become involved in monitoring the health of a river, dam, estuary or wetland closest to them. This is because the system provides easy interpretation of the WQI which does not require expert knowledge. The community receiving information regarding the status of the watershed nearby can play a significant role in protecting the catchments by reducing the sources of pollution to the river.

Conclusion

UMH2O, which is a web-based water quality system that operates based on WQI value, is using Google Earth to visualise water quality status. The usage of colour and shape is useful as it provides easy interpretation of water quality status and it allows everyone even the community member to get involved in monitoring and management of river. The water quality monitoring is a part of a bigger system that is developed for University of Malaya that aims to manage hydrological and ecological data in the university and for the community as well. The system aims in future for water quality monitoring allowing the community to be engaged for water quality monitoring of rivers in Malaysia. Below are the link to the University Malaya Living Lab System http://umlivinglabsystem.com/

Data availability statement

The data that support the findings of this study are available from the corresponding author, S M & C H, upon reasonable request. The referred data used for this study are courtesy of Department of Environment Malaysia.

Disclosure statement

No potential conflict of interest was reported by the author(s).

Additional information

Funding

This study was funded by UMRG grant of University of Malaya Living Lab LL023-16SUS.