1.

INTRODUCTION

In the modern era, multiple adverse effects are observed worldwide, ranging from climate change to biodiversity loss and several natural disasters, which directly impact human well-being. Effects on both people and nature are first experienced in cities, where approximately half of the human population on a global scale can be found. Climate change, urbanization, and the accompanying increases in the size and number of cities are placing a variety of interrelated pressures on ecosystems¹. These problematic situations need to be addressed decisively, by adopting a holistic approach that considers sustainability’s both social and environmental dimensions.

An emerging and promising strategy is based on the implementation of Nature-Based Solutions (NBS), which value nature’s ability to help overcome these challenges². NBS have emerged within the last decade³, as international organizations and private companies are exploring ways to mitigate climate change effects, ensuring a sustainable equilibrium between nature, biodiversity, and conventional engineering solutions, recognizing NBS as a framework for their strategy to offset their greenhouse gas emissions and achieve the Paris agreement climate goals⁴. Furthermore, NBS can play a significant role in contributing to the United Nations Sustainable Development Goals (SDGs)⁵, especially in the 11^th SDG whose main target is to make cities and human settlements inclusive, safe, resilient, and sustainable⁶.

Over the past years, NBS have been widely used in European cities⁷ as feasible solutions to tackle environmental and societal challenges occurring in urban areas, such as climate change, urban deterioration, and aging infrastructures⁸ indicatively by using Blue Green Solutions (BG)⁹, creating green jobs, improving in place attractiveness, and upgrading health and quality of life¹⁰. Scientific literature¹¹, as well as governmental and non-governmental programs¹² increasingly refer to the NBS approach, as an easily-constructed and logical-to-interpret concept. Aiming to achieve an advanced understanding of NBS, the European Commission funded and encouraged research in this area through the Horizon 2020 Research and Innovation program¹³. There are many related projects¹³, such as UnaLab¹⁴,CORDIS/CONEXUS¹⁵, and GREEN4GREY¹⁶, which through the implementation of NBS, contribute to the creation of cities that are smarter, more inclusive, more resilient, and increasingly sustainable.

Thematic and interactive maps, provide a thorough understanding of the environmental problem and are simple to comprehend for people outside the scientific field¹⁷. Since the 1980s, the management of digital geospatial data has advanced significantly, simultaneously changing the environment in which it is projected¹⁸. For the majority of users, how maps are utilized changed significantly, allowing for database queries to be constructed, and menus or legends, providing access to some fundamental analytical capabilities. These software programs that enabled searches and analysis of geospatial data began to be known as “geographic information systems”, widely known by the acronym “GIS”. As their functionality developed all fields working with geospatial data incorporated them, allowing GIS to introduce the consumption and integration of geospatial data from different kinds of sources. In the age of digitalization, the continuous demand for information associated with a geographic location to be communicated using visualization tools¹⁹ emerged.

The euPOLIS research project focuses on the regeneration and rehabilitation of urban ecosystems by creating proper urban planning matrices and inclusive and accessible urban spaces. The critical challenges that the demonstration sites face will be outlined during the project’s lifetime, by providing integrated solutions, and measuring their impact on the quality of the citizens’ lives, in terms of their overall well-being (WB), physical health (PH), mental, as well as emotional health²⁰. In this paper the development of a visualization platform is described, aiming at the coordinated customization and integration of existing simulation and planning technologies for NBS-based implementation in the assigned demo sites.

Finding the right visual metaphor to maximize the display’s intelligibility and engagement is a crucial issue in this situation. The implementation of this platform, within the framework of EuPOLIS GA 869448²⁰, enables users to explore, understand, and analyze spatiotemporally the optimized euPOLIS solutions, by providing comprehensive 2D and 3D views of the city environment enriched with temporal data provided by the relevant system (e.g., modeling and sensors information). The fact that time is taken into account in the aforementioned platform can be assumed as a significant component. The platform is responsible for managing the geospatial data required to depict the digital mock-up of the environment by combining existing datasets.

2.

EUPOLIS INTERVENTION AREAS

The outcomes of the euPOLIS project’s methodologies will be tested in four Front-Runner (FR) cities and disseminated in four Follower Cities (FC), as it is illustrated in the map, in Figure 1. The FC include the city of Trebinje, the city of Bogota, the city of Limassol, and the city of Palermo. The intervention areas of the four Front-Runner cities are described as follows:

Figure 1.

Demonstration sites of the euPOLIS project

The city of Belgrade (Serbia) is located in the north-central region of the nation at the meeting point of the Danube and Sava waterways. Belgrade has a population of 1,374,000 people, however, only 25% of the population has access to water, greenery, and public spaces. EuPOLIS’ interventions will be applied to “Linear park” and “Usce”, with the latest representing the biggest urban park located in New Belgrade. Currently, the lack of necessary infrastructures results in air/water/soil pollution, and noise, degrading the citizens’ WB and PH. Unemployment and aggressive behavior, related to stress, are also reported²⁰.

The city of Lodz (Poland), is a historical city center, inhabited by 152,292 people, where there are many buildings in poor technical condition, and a few green and attractive public spaces. In Lodz, two multipurpose parks with green areas, one air pollution abatement/mitigating greenery made up of shrubs and vertical green curtains, and environmentally friendly corridors will be considered to establish quality access to the historic city center²⁰.

The city of Piraeus (Greece), where the largest port in Greece is located. EuPOLIS will intervene in three mutually interlinked neighboring sites at the main harbor area (Mikrolimano). These sites are the Seaside Promenade Mikrolimano area, the riverine inland area in Akti Dilaveri, and the Ralleion Complex Pilot School (RCPS)²⁰.

The last city is the Municipality of Gladsaxe (Denmark), located in the northwestern suburb of Copenhagen. Scientific analyses showed that Gladsaxe Municipality is a city district with low social development. The main attention is focused on the housing development, called “Pilenparken”, which hosts a total of approximately 1,700 inhabitants²⁰.

3.

EUPOLIS DATA FOR CONSUMPTION

For the creation of this highly detailed environment for visualization, various data sources incorporated within the euPOLIS project were adjusted and visualized, as it is depicted in Figure 2. There are multiple data channels either explicitly or implicitly induced, as secondary but beneficial data sources. First, the primary data sources or providers are “EuPOLIS by Bioassist, “myFeel” platform by Sentio and FR cities through NTUA’s data provision and analysis tools and some already installed permanent sensors. Secondly, the middleware service includes a DMS, which is a tested proprietary solution that is parameterized appropriately and is suitable for storing and presenting all related data flow for the project²¹. All this data are consumed by the visualization toolbox, the eVP platform, which provides a dynamic interface adjustable to the user’s needs and capable of illustrating various information, stored in the DMS, including 3D models, advanced analytics, figures, and time-series data. These technologies are not producing measurements but rather consuming data and information in general.

Figure 2.

Illustration of the data gathering and communication workflow among the several data sources

4.

BUILDING THE EVP PLATFORM

To develop the proposed visualization environment, several/different technologies and programming languages were used. Building these kinds of visualization platforms can be considered as a fundamental step to study and adjust the processing techniques based on the pre-existing requirements established at the beginning of the project to depict the results of all tools embedded into the system in this single visualization application, the DMS will ensure that the visualization component can communicate with them all. Overall, the proposed visualization platform is consuming data and information, rather than creating new measurements.

4.3

eVP development

In recent years, tools like web-based applications, centralized computing systems, or visualization platforms follow the concept of the client-server approach²⁸. The client-server system is comprised of two independent entities identified as server and client, which can be subsequently separated into physical (e.g., servers, client devices) and logical components (e.g., web pages, data, programming scripts, protocols). This system provides an upgraded way to evenly distribute the workload. The client process continuously launches a connection to the server, while the server process still expects requests from any client. In Figure 3, the system client-system is illustrated including in each separate entity the technologies and programming languages used to develop the eVP platform.

Figure 3.

Schematic representation of the programming languages, libraries, and technologies used in the system client-server to develop the eVP platform

Figure 4.

The architecture of the eVP platform.

The core of the eVP is deployed using the Nginx Web Server²⁹. Nginx is one of the most widely used Web Servers which can also be used as a reverse proxy and load balancer, distributed as open source under the terms of the 2-clause BSD license. The eVP’s back-end is written in the high-level general-purpose programming language Python³⁰, in combination with the micro web framework Flask³¹. Python is one of the most popular backend programming languages offering high scalability, an extensive standard library, and a wide variety of third-party libraries and frameworks. Flask is a lightweight WSGI (Web Service Gateway Interface) web application framework with little to no dependencies on external libraries (micro-framework), supporting the creation of both small and bigger commercial websites, implemented on Werkzeug and Jinja2, along with a built-in development server and a fast debugger provided, used for developing web applications using python. The back end undertakes the following tasks, serving the front end to the client’s browser, communicating with API to receive data, communicating with OpenWeatherMap API²²to receive data about pollution in a specific area, maintaining some of the above information in the local memory, to limit the number of requests to the APIs, and conveniently, preparing the above data for the front end to visualize.

The eVP’s front end makes use of the core languages of the Web, combining additional libraries/technologies to provide the user with enhanced web page navigation. More specifically, the front end is written based on the high-level programming language JavaScript (JS)³², the Hypertext Markup Language (HTML)³³, and the Cascading Style Sheets (CSS)³⁴. A combination of cutting-edge technologies is mandatory to achieve the optimized result. Leaflet³⁵ is an open-source library for mobile-friendly interactive maps written in JavaScript, supporting various functionalities related to map data, used to embed the map together with interactive functionalities. Bootstrap³⁶ is a powerful, extensible, and feature-packed frontend toolkit, built and customized with Sass, which utilized a prebuilt grid system and components, and powerful JavaScript plugins.

JavaScript libraries such as Three.js³⁷ and Chart.js³⁸ provided useful features improving their interaction capabilities with the UI. Three.js is a cross-browser JavaScript library and application programming interface used to create and display animated 3D computer graphics in a web browser using WebGL.Chart.js another JavaScript library that enables the visualization of data through creating flexible charts online. In the context of eVP, chart.js is being used to provide weather and air pollution plots.

React JS is the best option for incorporating all the aforementioned technologies and tools, as one of the most widely known open-source JavaScript frameworks, providing several benefits regarding development, maintenance, and update. It enables the development of applications by producing reusable parts that can be viewed as independent blocks. These components are individual pieces of a final interface, which, when assembled form the application’s entire UI. React framework combines the speed and efficiency of JavaScript with a more effective way of manipulating the DOM to render web pages more quickly and create highly dynamic and responsive web applications by breaking complex user interfaces into reusable components. In more detail, when data change in a traditional JavaScript application, manual DOM manipulation is required for these changes to be incorporated. On the other hand, React utilizes a virtual DOM, which is a copy of the actual DOM, offering immediate reload to reflect any change in the data state and then is compared to the actual DOM to detect what exactly has changed.

5.

THE EVP USER INTERFACE (UI)

Visualization modules, in general, provide users with the opportunity to translate complex data into a visual context, allowing an easier understanding of the correlation between results and operations, and finding hidden patterns, even when one is outside the specific scientific field. Those computational tools make it possible to link georeferenced databases to digital maps and improve the visualization of the case’s study geographical characteristics. The visualization modules frequently incorporate extra features by utilizing data from various sources³⁹.

The designed interface was created in a way that makes user interaction quick and effective at achieving user objectives. The demonstration starts with the display of a base map, in combination with all the side features comprising this UI, designed based on the euPOLIS colors in accordance with the main website of this project⁴⁰. On the top part of the eVP platform the Main NavigationBar is displayed, allowing the user to interchange between the intervention areas, either FR or FC cities. Additionally, the option for access to people with disabilities is available, similar to the euPOLIS site. Moving to the left, the main navigation tools were built to facilitate users’ capabilities and selection among the offered functionalities.

Through these tools, the user can get informed regarding the sensors, the wearable information, the weather and pollution plots, the 3D models, and the Metabolism-based NBS planning and simulation methodology. Each one of the aforementioned data sources (see section 3), corresponds to a particular button in the navigation tools, offering an integrated amount of information for the NBSs. To enchase end-users’ interactivity with the map component, on the right side of the platform, the universal navigation tools can be found, such as zoom in, zoom out, and zoom to the full extent to view the map at different scales, allowing users to navigate smoothly and use the layer switcher consisting of various base maps, entailing a better understanding of visualized information. The aforementioned attached tools are all demonstrated in Figure 5.

Figure 5.

Screenshot of the UI of the eVP platform displaying the base map, the Main NavigationBar, the Navigation Tools, and the Map tools.

As previously mentioned, euPOLIS’ interventions will be applied to “Linear park”, located on the old side of Belgrade, and “Usce Park” in New Belgrade, to “Ralleion”, “Microlimano” and “Akti Dilaveri” located in the City of Piraeus, to “Posaz Anny Rynkowskiej” situated in the City of Lodz and to “Pileparken 6” in Gladsaxe Municipality. In Figure 6, the intervention areas are depicted represented by their polygons (blue highlighted areas). These visualization patterns can provide the user with a more holistic understanding of the overall focus of the project.

Figure 6.

Screenshots of the intervention areas of the FR cities. On the left-upper image are the “Linear park” and the “Usce Park” situated in Belgrade, while on the left-down image is “Posaz Anny Rynkowskiej” located in Lodz. On the right-upper image are the “Ralleion”, “Microlimano” and “Akti Dilaveri” found in Piraeus, while on the right-down image is “Pileparken 6” located in Gladsaxe Municipality.

The second visualization tool provides aggregated data of the emotions and other measurements (e.g., physical activity) recorded by the wearables, in collaboration with BioAssist’s and Sentio’s applications (Figure 7). These data comprise a valuable component of the eVP. Having collected these data, each user can be informed either through diagrams or pie charts for the aggregated measured data regarding the intervention area of their interest.

Figure 7.

Visualization of the second tool. Aggregated data of the emotions recorded by the wearables.

The third visualization tool provides weather data recorded by the installed sensors. Several sophisticated information systems with sensor networks are placed in the intervention areas for the gathering of various environmental data types, such as temperature, humidity, barometer, and gas resistance. These sensors serve as the main means of spotting even the smallest changes, enabling an IoT device to record pertinent information for processing in real time or later. These statistics come from the DMS and are updated every day. The platform’s illustration of weather plots, as shown in Figure 8, includes data from the DMS as well, giving the user the ability to keep track of weather parameters in the intervention regions.

Figure 8.

Visualization of the third tool. Weather data recorded by the installed sensors.

The fourth visualization tool provides pollution data collected by OpenWeatherMap (Figure 9). Besides the basic Air Quality Index, the API returns data about polluting gases, such as Carbon monoxide (CO), Nitrogen monoxide (NO), Nitrogen dioxide (NO₂), Ozone (O₃), Sulphur dioxide (SO₂), Ammonia (NH₃), and particulates (PM_2.5 and PM₁₀), as detailed explained in Table 1.

Figure 9.

Visualization of the fourth tool. Pollution data collected from the open-source data of the OpenWeatherMap.

Table 1.

Description of the Air Quality Index levels.

The fifth visualization tool provides photo-textured 3D models (in FBX format). Such digital developments require many tools and on-site visits from engineers to gather the necessary information (images, drone views, recordings, etc.)⁴¹ combined with a cutting-edge structure of motion algorithms. Three-dimensional visualization (digital twin) is turning into a necessity since it is easier not only for humans to identify patterns and relationships between objects but also enables planners to make decisions in accordance with those patterns. The 3D visualization additionally offers a shared, interactive, and navigable world, which fosters co-creativity between planners and non-planners. Using 3D virtualization models, interventions can be evaluated in advance without affecting daily activities or post-intervention environmental conditions⁴¹. These 3D models represent the before and after interventions in each of the demonstration sites. In Figure 10, the “before-situation” of Piraeus is illustrated, indicatively.

Figure 10.

Visualization of the fifth tool. 3D models representing the before and after-situation of the interventions.

The sixth visualization tool presents key information and simulation outputs for different examined NBS scenarios analyzed within the euPOLIS NBS Urban Water Metabolism Toolbox (Figure 11). This type of information can facilitate the effective communication of quantitative comparative analyses and relevant decisions on the choice of the most appropriate technical solutions²⁷.

Figure 11.

Visualization of the sixth tool. A separate selection containing the methodology of the metabolism-based NBS planning and simulation.

The last Navigation tool is the Project Information button explaining the euPOLIS project, followed by the send feedback option, by which the user can provide valuable information regarding the platform and help with its improvement. A user manual is available through a download link, redirecting the user to a browser tab providing a step-by-step explanation and navigation throughout the eVP as demonstrated in Figure 12.

Figure 12.

Visualization of the seventh tool. Information regarding the project and a user manual to facilitate user experience.

6.

DISCUSSION

The traditional approach to urban and revitalization planning is mostly driven by financial criteria and regular processes, frequently lacking cutting-edge integrated approaches and concepts that place a strong emphasis on societal, cultural, economic, and environmental factors. As a result, the demands of local communities are either ignored, or underappreciated, and as a result, cities make expensive investments that local populations do not support and are consequently not sustainable. To address these challenges, urban planning approaches built on the euPOLIS NBS services and enhanced with cultural and societal considerations provide the combination of a people-centered approach with the major environmental and economic benefits of BG Solutions. A significant benefit of NBS is the multiple benefits that are offered across different sectors, such as the environment, economy, and society.

One of the most crucial features of any project or any business intelligence solution is data visualization. Visualization modules allow users to translate complex data into a visual context, allowing an easier understanding of the correlation between results and operations, and at the same time the identification of possible hidden patterns, even when one is outside the specific scientific field. Significantly better business decisions can be achieved by giving a more comprehensive picture of each operation.

Taking into consideration that euPOLIS is an ongoing project (2020-2024) and the implementation of the designed interventions has not yet been completed in all study areas, it is expected that additions will need to be implemented to the euPOLIS visualization module. These additions include indicatively establishing new connections through APIs with the euPOLIS DMS to visualize data coming from the newly installed in-situ sensors (weather and air pollution stations) or incorporating some new 3D models of the designed interventions. The design, implementation, and functionalities of the eVM have been thoroughly presented in this publication and future additions will not alter the core of its implementation.

7.

CONCLUSIONS

The aim of the euPOLIS Visualisation Module can be summarized in two main elements; the first is providing the end users with a powerful ICT tool for visualizing the designed and implemented urban planning interventions and the second is monitoring the environmental and societal impact. The first objective is fulfilled through the support of visualizing 3D models, while the second objective is achieved through the following features: environmental monitoring by creating weather and air pollution plots and societal monitoring by visualizing aggregated emotions. The fact that time is taken into account in the aforementioned is a crucial component. In more detail, the user can define the period for which he/she wishes to receive this information (e.g., weather plots for a specific demonstration site) enabling this way a comparison of pre-and post-intervention situations.

In conclusion, the euPOLIS visualization platform is a valuable tool that can facilitate the implementation of NBS in urban areas and promote sustainable development. The most significant advantage is the visualization of spatial environmental data, which translates valuable information comprehensible to citizens and policymakers interested in promoting sustainable urban development. Its ability to provide real-time data and visualization of NBS implementation is particularly useful, along with the highlighting of the resulting patterns between the different data sources.