Deliverable 3.3
The CitizenSensing Participatory Risk Management System
Tomasz Opach (NTNU)
Carlo Navarra (LiU)
Almar Joling (Deltares)
TABLE OF CONTENTS
1. Implementation 3
2. The CitizenSensing web application 5
3. The WayFinder routing tool 6
4. The CitizenSensing web portal 8
5. The CitizenSensing interfaces for visual data exploration 9
DELIVERABLE 3.3
CITIZENSENSING–URBANCLIMATERESILIENCETHROUGHPARTICIPATORYRISKMANAGEMENTSYSTEMS
An ERA4CS project funded by JPI Climate and co-funded by the European Union, FORMAS (Sweden), RCN (Norway), NWO (The Netherlands), and FCT (Portugal)
3
1. Implementation
This Deliverable report presents the four applications of the Citizen Sensing Participatory Risk Management System (PRMS) as developed in WP 3. The CitizenSensing PRMS was co-designed with stakeholders and end users (Figure 1) and built as an integrated platform to support local stakeholders, organizations, and citizens in increasing their ability to make informed decisions related to climatic risks and to increase urban resilience.
Figure 1. The CitizenSensing PRMS was co-designed with end users. During stakeholder workshops, a paper prototype was used to discuss required functionalities of the CitizenSensing data collection web app. Here, the photo from the workshop in Norrköping held on 12. March, 2018.
The system consists of three key components to collect, maintain, and visualize volunteered geographic information (VGI): a web application, a server (with a database), and a web portal, respectively (Figure 2). Moreover, the web application has been experimentally equipped with the WayFinder routing tool for pedestrians. Lastly, the system has been also supplemented with a set of visual analytics interfaces for visual exploration of collected VGI.
Figure 2. The architecture of the CitizenSensing participatory risk management system.
The web app (mobile client) was developed using the Angular open-source front-end web application framework (https://angular.io/); Google Maps API has been used for the mapping functionality. The reports voluntarily submitted through the app are sent to the CitizenSensing server and stored in a MariaDB relational database. Collected VGI comprises geographical coordinates, date and time, weather event type, impact, personal level of comfort, picture (optional), comment (optional), as well as the type of operating system and web browser that was used for the submission.
When a report is submitted, no personal information is stored except for the users’ geographical position, provided that they have granted access to this information. The CitizenSensing server-side architecture (backend) has been implemented in JavaScript using Node.js in combination with the Express.js framework. Additionally, to collect real-time weather measurements such as precipitation and air temperature, pressure, and humidity, in the project’s pilot cities, the server retrieves data from two external weather station networks (Netatmo and Porto Digital) and from a number of the project’s weather sensors established in Norrköping and Trondheim. Lastly, the CitizenSensing system has a desktop client – the web portal, that enables data vetting and low-level visual exploration. The portal has been developed using open-source JavaScript APIs such as OpenLayers for web mapping, Bootstrap for responsive layout, and jQuery for user interaction.
DELIVERABLE 3.3
CITIZENSENSING–URBANCLIMATERESILIENCETHROUGHPARTICIPATORYRISKMANAGEMENTSYSTEMS
An ERA4CS project funded by JPI Climate and co-funded by the European Union, FORMAS (Sweden), RCN (Norway), NWO (The Netherlands), and FCT (Portugal)
5
2. The CitizenSensing web application
The web application was designed for use on portable devices, yet it can be used in a device of any kind if it has a web browser. The app facilitates a high level of interactivity by engaging citizens, both as data providers and data receivers. After getting the geographic position of the event to be reported (Figure 3A), it allows users to act as sensors by submitting place-specific reports on observed weather events and their impacts as well as seasonal observations (Figure 3B) and provides them with recommendations of best-practice climate adaptation measures (Figure 3C) related to specific weather events, based on information from municipal and public authorities.
Figure 3. Selected views of the graphical user interface of the CitizenSensing web app (details in the text).
Moreover, the users can use the “blue” functionality (Figure 3D) to investigate: already submitted observations (Figure 3E), weather measurements (Figure 3F) in the four pilot cities, as well as the descriptions of the cities’ climate profiles (Figure 3G and 3H).
As encouragement mechanisms are required to motivate people to contribute, we used two solutions to involve contributors and make them aware of the importance of data quality. First, we provided users with previously submitted reports and local weather data (Figure 3E and 3F). Second, we implemented a gaming mechanism that assigned points to users for each uploaded report, image, and comment and provided collected scores in a high scores table.
3. The WayFinder routing tool
The CitizenSensing web application has been experimentally equipped with the WayFinder tool that helps urban pedestrians to find routes that minimize intersections with the areas exposed to specific environmental conditions such as urban flooding or high temperatures. WayFinder provides users with several routing options and lets them freely choose the option that fits them best. WayFinder was designed for use on portable devices with small screens and its layout is therefore minimalistic, with no extra information and with very limited auxiliary content. Therefore, WayFinder’s map display was equipped with basic interactive functions such as zooming and panning. Furthermore, the user could alter the map style between satellite image and street map only in the tool’s opening window. The opening window also allowed the user to go to the Google Street View mode to ensure that the start location of the walk was correctly registered.
The user’s geographic position is either retrieved from the device’s GPS receiver, or manually specified by the user (e.g., “Gamle bybro” in Figure 4A). The user's position is then shown on a map (the blue drop marker in Figure 4B) along with the positions of the objects serving as alternate endpoints of walks. In the prototype, the objects were intentionally limited to cafés, museums, parks, libraries, and supermarkets. Adequate map symbols were used to represent the objects’ functions (e.g., a book symbol for a library, a bag symbol for a supermarket). At this point, the user is supposed to select one of the available endpoints and in response WayFinder provides up to five alternative route suggestions (Figure 4C shows four alternative route suggestions). Among all suggestions, only one avoids exposed areas, here, “blue spots,” it means places that are likely to accumulate surface water during heavy rains. The other suggested routes may pass through blue spots, in which case, the total length of the parts that intersect blue spots is provided in the ROUTES INFO panel at the bottom left corner of the map display (Figure 4C).
DELIVERABLE 3.3
CITIZENSENSING–URBANCLIMATERESILIENCETHROUGHPARTICIPATORYRISKMANAGEMENTSYSTEMS
An ERA4CS project funded by JPI Climate and co-funded by the European Union, FORMAS (Sweden), RCN (Norway), NWO (The Netherlands), and FCT (Portugal)
7
Figure 4. A sequence of screenshots of the WayFinder tool demonstrating how pedestrians use the tool to search for route suggestions (see text for details).
Next, the user selects one of the route suggestions by clicking on a corresponding SELECT button (Figure 4C) and the user is taken back to the map, where only the selected route is displayed. At this point, the user starts walking and the position is automatically tracked by WayFinder and continuously updated on the tool’s map. Hence, the user can follow the route and compare it with the background blue spot mapping. After reaching the selected endpoint, the user clicks on the DONE button and is taken back to WayFinder’s opening window.
WayFinder was developed using the Angular open-source front-end web application framework.
Google Maps Directions API and Open Route Service have been used to retrieve route suggestions.
The route suggestions from Google Maps Directions do not avoid blue spots. This may happen unintentionally, but there are no specific rules for avoiding exposed areas included in our implementation. Instead, for each of the suggestions, the share of the parts passing through blue spots is calculated and provided to the users. We used Turf.js API to calculate the lengths of the parts that intersected blue spots. In turn, Open Route Service API is the routing service that we implemented to establish “area avoid polygons” representing modeled blue spots and to search for route suggestions that avoid such areas (Route Y in Figure 4C). Additionally, Open Route Service was used to search for one optimized route suggestion intersecting exposed areas (Route X in Figure 4C), for which the share of the parts passing through blue spots is calculated and provided to the users.
4. The CitizenSensing web portal
The portal enables the user to comprehend the spatial distribution and gain an initial understanding of VGI. Thus, it enables contribution vetting and gaining a low-level overview of VGI with respect to the data spatiotemporal characteristics as well as qualitative attributes such as weather event type and level of comfort. Since the portal enables a flexible overview of VGI to a wider audience, only basic interaction techniques and elementary data exploration methods such as manipulating the user’s viewpoint and highlighting portions of a data set is supported through simple geographic visualization (Figure 5).
Figure 5. The CitizenSensing web portal enables VGI vetting and low-level data overview.
The portal has been designed for desktop displays. Two versions of the portal are available: (1) a publicly available version, which shows reports without detailed information such as comments and pictures, and (2) a password-protected version (Figure 5), which shows comments and photos and is thus, used only as part of the research project to support vetting and analysis of the reported data.
The portal displays the reports on a map and features tailored user interaction to support the filtering and initial assessment of the data. It enables filtering the reports by time and space and displays the reports on a map using weather event type symbols providing an overview of their spatial distribution and density. Furthermore, data can be filtered by weather event type, by level of comfort reported by users, or by username. Filtered reports are differentiated by map symbols showing their corresponding
DELIVERABLE 3.3
CITIZENSENSING–URBANCLIMATERESILIENCETHROUGHPARTICIPATORYRISKMANAGEMENTSYSTEMS
An ERA4CS project funded by JPI Climate and co-funded by the European Union, FORMAS (Sweden), RCN (Norway), NWO (The Netherlands), and FCT (Portugal)
9
weather event types. A user can perform a low-level data exploration in the map display context that encompasses basic user tasks from the analytic task taxonomy, for example, value retrieval or filtering.
Apart from the map display, filtered reports are listed in a panel to the left of the map. If a report includes a picture or a textual comment related to the reported weather event, this information is displayed in the list view. A report can be selected through the list view or by clicking on an item on the map. The portal also allows filtered reports to be exported in Comma Separated Value (CSV) format for further processing.
5. The CitizenSensing interfaces for visual data exploration
A set of interactive visual interfaces have been developed to facilitate in-depth exploration of the VGI collected over the project period. The interfaces include three visual dashboards with different interface configurations (see Figure 6) for extensive spatiotemporal data exploration built using the Apache Superset software. The latter is an open source data exploration and visualization platform for business intelligence.
Figure 6. The three visual dashboards designed to experiment with various interface configurations for the in- depth exploration of the climate-related VGI collected in the CitizenSensing project.
The three dashboards combine several visualization techniques in the configurations shown in Figure 6. All visualization components in each dashboard are linked by the time attribute and weather event type and can be navigated through a filter box. Although the dashboards offer data filtering, no data exploration mechanisms through sophisticated interaction techniques are available.
To overcome the lack of interactivity from the Superset prototype approach we have also developed the CitizenSensing Visual Analysis Interface CS-VAI to enable more flexible exploration and achieve higher levels of sophistication in the visual analysis of the CitizenSensing project’s VGI. The prototype is a responsive web-based visual analysis interface with four linked views: a prism map, a scatter plot, a line graph, and an image clouds component (Figure 7). The views allow exploration in geographical, temporal and attribute data space and details-on-demand functionalities. The interface was developed using the web application framework Angular in combination with d3.js and deck.gl.
Figure 7. CS-VAI: CitizenSensing Visual Analysis Interface.
