A Web-Based Application for Smart City Data Analysis and Visualization

Abstract

Smart cities are urban areas that use contemporary technology to improve citizens’ overall quality of life. These modern digital civil hubs aim to manage environmental conditions, traffic flow, and infrastructure through interconnected and data-driven decision-making systems. Today, many applications employ intelligent sensors for real-time data acquisition, leveraging visualization to derive actionable insights. However, despite the proliferation of such platforms, challenges like high data volume, noise, and incompleteness continue to hinder practical visual analysis. As missing data is a frequent issue in visualizing those urban sensing systems, our approach prioritizes their correction as a fundamental step. We deploy a hybrid imputation strategy combining SARIMAX, k-nearest neighbors, and random forest regression to address this. Building on this foundation, we propose an interactive web-based pipeline that processes, analyzes, and presents the sensor data provided by Basel’s “Smarte Strasse”. Our platform receives and projects environmental measurements, i.e., NO₂, O₃, PM_2.5, and traffic noise, as well as mobility indicators such as vehicle speed and type, parking occupancy, and electric vehicle charging behavior. By resolving gaps in the data, we provide a solid foundation for high-fidelity and quality visual analytics. Built on the Flask web framework, the platform incorporates performance optimizations through Flask-Caching. Concerning the user’s dashboard, it supports interactive exploration via dynamic charts and spatial maps. This way, we demonstrate how future internet technologies permit the accessibility of complex urban sensor data for research, planning, and public engagement. Lastly, our open-source web-based application keeps reproducible, privacy-aware urban analytics.

1. Introduction

Urbanization is rapidly reshaping the global demographic landscape, with $58\%$ of the world’s population living in metropolitan areas; this number is projected to increase to $70\%$ by 2050 [1]. As this transition has given rise to environmental pressures, demand for efficient mobility solutions, and a growing need to improve citizens’ quality of life and health, the adoption of digital technologies in upcoming smart cities is accelerated [2]. At present, many modern civil hubs gather real-time data from various urban domains through interconnected intelligent sensors [3], aiming to achieve environmental monitoring and traffic control of public infrastructure [4]. These sensors predominantly measure air quality [5], traffic volume [6], sound pollution [7], parking occupancy [8], and electric vehicle (EV) charging behavior [9], facilitating the development of data analytics pipelines that support informed decision-making [10]. These data streams hold immense potential for enhancing operational efficiency and urban responsiveness [11]. Therefore, complexity increases with the volume of data, while various challenges arise, such as missing data [12], calibration inconsistencies [13], and privacy concerns [14], hindering accessibility and meaningful interpretation [15]. As a result, practical representation tools are introduced, which serve as a key enabler for transforming complex, raw data into actionable insights that are accessible and noteworthy to a wide range of stakeholders [16].

Towards this goal, this article presents a web-based data analysis and visualization approach tailored for smart city sensor networks. Central to the proposed application is a reliable imputation process that addresses the frequent occurrence of missing values in urban sensing data, ensuring data integrity for downstream analysis. The system combines interactive charts, heatmaps, and sensor overlays, permitting users to detect temporal trends, spatial anomalies, and cross-variable correlations. Beyond its technical contributions, our strategy embraces ethical urban sensing principles and incorporates privacy-aware design decisions. Additionally, it addresses sustainability considerations through its modular and efficient architecture. Thus, this work outlines the method’s design, implementation, and potential use cases, offering a helpful tool reflecting on the broader implications of data-centric smart city infrastructure. The main contributions are as follows:

• A web-based application for thoughtful city data analysis and interactive visualization, combining a Python Flask backend and a JavaScript frontend via Plotly (v 1.58.5) and Leaflet (v 1.7.1).
• The integration of hybrid imputation methods, i.e., SARIMAX and k-NN, and random forest regression to ensure temporal consistency and cross-variable accuracy.
• An interactive map-based visualization component that supports spatial-temporal analysis through statistical aggregation, integrating privacy-aware design aligned with ethical data practices.
• Open-source (https://github.com/PanagiotisKara/Web-Based-Data-Analysis-and-Visualization, accessed on 20 April 2025) and flexible code to facilitate use by future researchers.

The rest of this article is organized as follows. The subsequent section presents relevant smart city infrastructures and interactive data visualization approaches, while Section 3 introduces the architecture of the proposed strategy. Section 4 provides the experimental protocol, including a description of the dataset and its backend and frontend implementations. Our results are presented in Section 5. Finally, Section 6 concludes this work.

2. Related Work

Initially, smart cities were defined through telecommunications and information technologies [17]. However, most recently, newer interconnected devices and their extensive applications in urban environments have shaped the current digital city form [18]. Such modules collect different types of data (see Table 1), each associated with specific outputs [19] and urban application areas, reflecting the multifunctional part these technologies play in modern civil hubs [20]. These include air quality [5], traffic and mobility [6], noise [7], parking and EV infrastructure [8], as well as environmental conditions [9]. Overall, they encompass a diverse array of connected devices [21] from environmental sensors [22] to surveillance nodes [23] that provide insights into urban dynamics [24] and collectively establish a comprehensive data foundation supporting real-time decision-making [25], cross-domain analytics [26], and responsive urban management [27].

Preliminary research addressed the technical and architectural aspects of digital-enabled urban systems, focusing on the challenges of context-aware data acquisition [28], sensor interoperability [29], and distributed computing [30].

Table 1. Common sensor types, data outputs, and applications in smart cities.

Sensor Type	Data Output	Primary Applications
Air Quality Sensors	NO2, O3, CO, PM2.5, PM10 concentrations ($\mathsf{\mu }$ g/m3)	Pollution monitoring, emissions tracking, health risk alerts, environmental policy [5]
Traffic and Mobility Sensors	Vehicle counts, speed, occupancy, pedestrian flow	Traffic optimization, congestion management, safety enforcement, flow analysis [6]
Noise Sensors	Sound level (dB), frequency spectrum	Noise mapping, zoning compliance, quality-of-life assessment, urban planning [7]
Parking and EV Sensors	Availability status, occupancy, energy transferred (kWh)	Optimizing parking space utilization and monitoring EV charging infrastructure [8]
Weather Sensors	Temperature, humidity, wind, rainfall, UV index	Microclimate modeling, disaster preparedness, energy forecasting, agriculture support [9]
Structural and Utility Sensors	Vibration, tilt, pressure, current/voltage, flow rates	Infrastructure health monitoring, predictive maintenance, utility management [11]

Table 1. Common sensor types, data outputs, and applications in smart cities.

Sensor Type	Data Output	Primary Applications
Air Quality Sensors	NO2, O3, CO, PM2.5, PM10 concentrations ($\mathsf{\mu }$ g/m3)	Pollution monitoring, emissions tracking, health risk alerts, environmental policy [5]
Traffic and Mobility Sensors	Vehicle counts, speed, occupancy, pedestrian flow	Traffic optimization, congestion management, safety enforcement, flow analysis [6]
Noise Sensors	Sound level (dB), frequency spectrum	Noise mapping, zoning compliance, quality-of-life assessment, urban planning [7]
Parking and EV Sensors	Availability status, occupancy, energy transferred (kWh)	Optimizing parking space utilization and monitoring EV charging infrastructure [8]
Weather Sensors	Temperature, humidity, wind, rainfall, UV index	Microclimate modeling, disaster preparedness, energy forecasting, agriculture support [9]
Structural and Utility Sensors	Vibration, tilt, pressure, current/voltage, flow rates	Infrastructure health monitoring, predictive maintenance, utility management [11]

Newer studies have shifted toward developing advanced data analytics and visualization platforms, particularly emphasizing improving accessibility and usability for both expert and non-expert users [31]. These platforms commonly integrate sensor outputs into interactive dashboards [32], enabling real-time monitoring [33], visual analysis [34], and triggering automated responses through smart city control systems [10]. Such responses are supported by the evolution of internet-of-things infrastructures [35] and improved by machine learning and cross-domain integration frameworks [27].

Visualization is not merely a presentation layer but a functional core of these platforms. Web-based interfaces and built-in visualization tools [36], i.e., charts, heatmaps, and spatial layers are increasingly adopted to translate raw, multidimensional sensor streams into real-time visuals with a responsive interaction point [37]. This approach is particularly relevant in citizen-oriented strategies that promote transparency and community participation [38]. Since most computations occur on the client side, users can zoom in, hover over data points, and apply filters in real time without increasing backend processing demands [39]. Technologies like Plotly (v 1.58.5) and Leaflet (v 1.7.1) enable client-side rendering of rich, interactive visual content, reducing server load while improving responsiveness and user engagement [40].

In contrast to desktop-based software, web applications eliminate installation barriers [41], ensure cross-platform compatibility [42], and facilitate seamless updates via asynchronous data loading (AJAX) [43]. These features enable scalable, device-agnostic analytics [44] while accommodating frequent data updates without requiring a reload of the control panel [45]. These developments highlight a broader transition toward modular, open-source platforms that support data exploration [46], cross-domain integration [47], and reproducible analysis [48]. Consequently, modern urban environments increasingly rely on the seamless integration of digital technologies, such as artificial intelligence (AI) [49], and cloud computing [50], to enhance service delivery [50], streamline infrastructure [51], and support decision-making with robust data insights [52].

Regarding missing data, their imputation is a long-standing challenge. Broadly, in the context of data analysis, two main strategies try to address missing data. The first is to ignore or remove the missing values. The second is to apply imputation techniques in order to estimate them [53,54]. In [32], the authors deleted all missing entries, arguing that the dataset was sufficiently large and that imputation would incur unnecessary computational cost. Conversely, other studies have embraced imputation strategies [55], while others adopted more advanced machine learning techniques [56]. Beyond analytical accuracy, it is clear that missing or imputed values when represented visually can significantly affect the user’s perception, interpretability, and the quality of decision-making. As presented in [57,58] the visual treatment of missing data plays a decisive role in the exploration process. Therefore, imputation quality directly affects both the statistical validity of the data and the interpretability of its visual representation, making it an essential component of any platform that supports interactive, sensor-based analytics. In alignment with these developments, our platform adopts a web-based visualization-centered approach that transforms heterogeneous sensor data streams into interactive, interpretable visual outputs designed to support both expert analysis and public engagement.

3. Methodology: System Architecture and Design

This section outlines the methodological approach followed for implementing the proposed web-based application, detailing its design principles, applied technologies, and the overall architecture. Since we aim for a modular full-stack system, its architecture is designed to support efficient processing, analysis, and visualization of heterogeneous data provided by smart cities (see Figure 1). Our approach handles multiple categories of sensor input, including environmental indicators as air quality and sound levels, mobility data like vehicle counts and speeds, and infrastructure usage such as parking availability and EV charging activity. The crucial step of data preprocessing involves SARIMAX, k-NN, and random forest regression to address the issue of missing values, thereby enhancing the quality and reliability of the analysis, providing a more reliable view of the city. In the final stage, the processed insights are delivered through an intuitive, browser-based interface that features interactive charts, maps, and statistical summaries. This way, the system enables users to explore spatial and temporal patterns using the different sensor types mentioned above, offering a unified platform for understanding complex urban dynamics from historical datasets.

3.1. Data Preprocessing

Following data collection, each sensor’s information is subjected to a comprehensive preprocessing pipeline to ensure its quality, consistency, readiness for analysis, and structural integrity [59]. Subsequently, the collected files are read using flexible parsing configurations to accommodate delimiter variations and handle irregularities. Column headers are standardized by removing extraneous whitespace and harmonizing naming patterns, including converting special or locale-specific characters. Similarly, temporal fields, such as timestamps and time intervals, are converted into structured datetime formats to enable temporal alignment, grouping, and resampling. Numerical columns are validated and cast into appropriate types, and any irregular entries are marked as missing for subsequent treatment. Handling missing or inconsistent data constitutes an essential process throughout our approach. Imputation techniques can be broadly categorized into three main approaches: statistical, intelligent, and hybrid [60]. While recent studies emphasize the growing role of deep neural networks in intelligent imputation, traditional machine learning techniques and statistical methods remain widely used due to their simplicity and reliable performance [61]. In this context, missing values are temporarily replaced with null-equivalent representations compatible with web data formats, providing seamless frontend integration. On the contrary, rows lacking essential values, e.g., invalid or missing timestamps, are removed to maintain data integrity. Likewise, incomplete but non-critical entries are handled via a hybrid imputation strategy that simultaneously applies SARIMAX (Seasonal AutoRegressive Integrated Moving Average with eXogenous regressors) to capture seasonal and temporal dependencies [62], k-nearest neighbors to exploit local feature similarity [63], and multi-output random forest regression to predict multiple sensor variables at once [64]. Ensemble regressors are also employed to simultaneously predict missing entries across multiple variables [65], leveraging relationships between them to enhance accuracy. This combination preserves both temporal continuity and cross-variable relationships when estimating missing observations. It is worth noting that the imputed values are constrained within the range of observed data to avoid producing unrealistic or out-of-distribution results. To ensure data schema compliance, each dataset is cross-checked against an expected set of required fields. To enrich them, additional attributes are derived, such as calendar-based features (e.g., day of the week or time of day), lagged observations, and time-based grouping identifiers. These engineered features support identifying trends, seasonality, and behavioral patterns across the urban environment. Finally, the processed data are cached at the server level to enhance system efficiency and reduce redundant computations during repeated queries. The data are prepared for web-based delivery by transforming internal representations into standardized primitive types. Before being served to the client, this guarantees full compatibility with JSON serialization protocols and frontend visualization tools.

Figure 1. The proposed overall architecture. Various types of urban sensors generate raw data, i.e., air quality sensors, traffic counters, speed detectors, noise recorders, and sensors for electric vehicle charging stations. When a user loads the proposed dashboard, our application automatically retrieves the corresponding datasets. These undergo a comprehensive preprocessing step that cleans and organizes the data, detects incomplete observations, and employs a hybrid imputation strategy that leverages SARIMAX to handle time-dependence and seasonal effects [62], k-nearest neighbors to infer missing values from nearby points in feature space [63], and multi-output random forest models to predict multiple interrelated sensor variables jointly [64]. Thus, the final dataset is made internally consistent and readily consumable by subsequent analytical modules, preserving both temporal continuity and cross-variable relationships. Next, the processed data are subjected to statistical and correlational analyses, which extract temporal patterns, spatial anomalies, and cross-variable relationships. Finally, the resulting insights are visualized as interactive charts and maps, enabling intuitive, real-time exploration of urban conditions.

Figure 1. The proposed overall architecture. Various types of urban sensors generate raw data, i.e., air quality sensors, traffic counters, speed detectors, noise recorders, and sensors for electric vehicle charging stations. When a user loads the proposed dashboard, our application automatically retrieves the corresponding datasets. These undergo a comprehensive preprocessing step that cleans and organizes the data, detects incomplete observations, and employs a hybrid imputation strategy that leverages SARIMAX to handle time-dependence and seasonal effects [62], k-nearest neighbors to infer missing values from nearby points in feature space [63], and multi-output random forest models to predict multiple interrelated sensor variables jointly [64]. Thus, the final dataset is made internally consistent and readily consumable by subsequent analytical modules, preserving both temporal continuity and cross-variable relationships. Next, the processed data are subjected to statistical and correlational analyses, which extract temporal patterns, spatial anomalies, and cross-variable relationships. Finally, the resulting insights are visualized as interactive charts and maps, enabling intuitive, real-time exploration of urban conditions.

3.2. Data Analysis

After preprocessing, the cleaned and structured datasets are analyzed through statistical aggregation and advanced visualization techniques. The system’s analytical layer summarizes sensor data at different temporal resolutions, allowing users to explore patterns and fluctuations over time. This involves grouping the data by relevant time intervals, such as hours or days, and computing key statistical descriptors including minimum, maximum, average, median, and standard deviation. These summaries supported both exploratory data analysis and the development of time-aware visual outputs. Afterwards, moving averages are applied to highlight temporal trends and reduce noise in highly granular datasets, helping to reveal underlying behavioral patterns that short-term fluctuations might otherwise obscure. When data density is too high for efficient rendering, downsampling strategies are utilized to retain trend integrity while optimizing for readability and performance, particularly in browser-based visualization environments.

3.3. Data Visualization

The visualization layer is built by leveraging Leaflet [66] for interactive maps and Plotly [67] for dynamic, responsive charts. Time-series plots are rendered using smoothed lines and scatter formats to depict trends over time, with visual cues. Standard and stacked bar charts effectively visualize categorical variables, such as vehicle types or sensor zones, to communicate proportional distributions. Box plots are introduced to represent statistical ranges and highlight variability across sensor categories, while histograms illustrate frequency distributions. Correlation heatmaps are also generated to show the interrelationships between sensor variables, providing insights into how environmental and infrastructural parameters interact within urban zones. Every plot is customized with readable labels, intuitive legends, and responsive hover interactions to ensure accessibility and clarity for non-expert users (see Figure 2).

These visualizations are integrated into the web application’s front end, where JavaScript modules handle dynamic data fetching, real-time updates, and the interactive rendering of charts and maps, thus ensuring seamless synchronization between client-side elements and the processed datasets. This setup allows charts and interface components to refresh as new or updated data becomes available. Moreover, temporal values are transformed into browser-compatible date objects to ensure accurate rendering on time-based charts. Meanwhile, multiple visual elements are presented simultaneously on the interface, allowing users to cross-reference trends, distributions, and statistical summaries in a single, cohesive view. As a result, this multi-layered visualization approach enables intuitive, on-demand exploration of historical smart city datasets, offering valuable insights into urban dynamics without relying on real-time data streams.

4. Experimental Protocol: System Implementation

This section outlines the implementation of the proposed system. It begins with a detailed description of how the used datasets are managed. Subsequently, it presents the backend architecture, highlighting the technologies employed and the core functionalities implemented. Finally, it gives the frontend interface and user experience (UX) design, focusing on usability, accessibility, and the application’s overall visual and interactive aspects.

4.1. Dataset Management and Description

The data streams employed in this study are from publicly available open repositories maintained by the city of Basel, Switzerland (https://data.bs.ch/explore/?refine.tags=smarte+strasse, accessed on 25 August 2023). These comprise CSV-format files containing information on air quality, traffic flow, noise levels, parking occupancy, and EV charging infrastructure. For the proposed pipeline, the datasets were preferred to be stored locally for comprehensive analysis. The reasons behind this decision are related to several practical and research-driven factors. First, all involved sensors (see Figure 3), except those monitoring EV charging stations, have been taken out of active operation, making real-time data collection no longer feasible. Beyond this necessity, local data storage ensures comprehensive control over data integrity and availability, allowing consistent preprocessing and repeatable experimentation without dependence on external service uptime or network stability. Moreover, it avoids issues such as API rate limits and schema changes which may introduce inconsistencies into longitudinal studies. From a research perspective, maintaining locally stored datasets enhances reproducibility, a key principle in empirical machine learning and scientific research [35,59]. Lastly, this strategy supports a controlled and sandboxed environment ideal for testing, development, and iterative model tuning without the unpredictability of live data streams.

4.1.1. Air Quality Metrics

Air pollution is recorded via multiple parameters to evaluate its spatial and temporal behavior:

• NO₂ (Nitrogen dioxide), a major traffic-related pollutant emitted primarily by combustion engines. Tracking NO₂ permits quantifying the vehicular impact on urban air quality.
• O₃ (Ozone), a secondary pollutant formed through photochemical reactions. Monitoring ozone concentrations is vital in assessing smog formation and respiratory risk, particularly during warm seasons.
• PM_2.5 (particulate matter) comprises fine airborne particles less than 2.5 microns in diameter, often linked to adverse health effects. Their measurement helps identify pollution peaks and assess long-term exposure patterns.

4.1.2. Traffic and Vehicle Data

Transportation-related sensors enable analysis of mobility patterns and congestion:

• Vehicle counts register the number of vehicles passing through monitored zones, frequently broken down by type, e.g., cars, trucks, motorcycles.
• Speed measurements capture average and peak vehicle speeds, supporting traffic jam analysis and evaluating traffic control policies.

4.1.3. Sound Levels

Acoustic data helps characterize environmental noise pollution, a growing concern in urban planning. In the proposed system, filtering techniques are applied to the input to isolate traffic-related noise from other ambient sources such as wind, voices, or construction activity. This enhanced the sensor’s ability to detect noise patterns directly associated with road activity [69]. The filtered audio input accurately represents traffic noise intensity in the monitored zone:

• Decibel levels (dB) measure overall ambient sound intensity, typically sampled over time.
• Frequency bands advanced acoustic sensors break down noise by frequency to distinguish between sources such as traffic, construction, or natural elements.

4.1.4. Parking Data

Parking sensors monitoring of spot usage provides insight into urban space demand and utilization:

• Occupancy and turnover incoming data determine how many parking spots are occupied and how long vehicles remain parked, enabling analysis of space turnover and availability trends. The monitored parking layout is illustrated in Figure 4, where the system tracks specific spaces using fixed camera coverage.
• Utilization patterns help detect peak usage periods and inform better management of limited parking infrastructure based on demand over time.

4.1.5. Electric Vehicle Charging Stations

EV infrastructure sensors collect operational and usage metrics that support sustainability goals:

• Charging session duration tracks the time each vehicle remains connected, which helps estimate availability and user behavior.
• Energy consumption (kWh) records energy transferred during each session, informing capacity planning and infrastructure scaling.

4.2. Data Layer

Our system’s backend is developed in Python using the Flask web framework, which serves static HTML pages and dynamic API endpoints for handling data ingestion, transformation, and delivery. At the same time, its modular structure, with clear boundaries between data logic and visualization endpoints, separates data processing from content rendering, ensuring a maintainable and scalable architecture. This facilitates long-term maintenance and enables future extensions, such as including new sensor data types or integration with real-time sources. We focus on robust preprocessing, hybrid imputation, and scalable caching mechanisms to ensure a reliable data delivery pipeline for the interactive web-based frontend.

Our backend, in particular, defines individual routes for different types of sensor data. HTML templates are rendered through Flask’s built-in engine, which organizes user-facing pages and backend services. Dedicated endpoints are responsible for processing specific types of data. Missing data are imputed using the proposed hybrid strategy. Once imputation is completed, the backend aggregates the sensor data. It computes descriptive statistics, which are subsequently returned as structured JSON responses. Another endpoint generates a correlation matrix across variables from different sensor types, supporting multidimensional exploratory analysis of urban dynamics. It is worth noting that to improve responsiveness, we integrate Flask-Caching and cache computation-heavy endpoints, such as those performing imputation or correlation analysis, to prevent redundant processing and reduce latency. A custom logging utility is employed to reduce the execution time of each route, facilitating runtime diagnostics and performance tuning. Our implementation uses a suite of scientific libraries, including Pandas and NumPy, for efficient data manipulation and numerical analysis. Scikit-learn is employed for k-NN-based imputation; Statsmodels is used for time-series forecasting via SARIMAX; and Flask-Caching manages the temporary storage of processed results to improve API responsiveness.

4.3. Frontend Interface and UX Design

The system’s client side is purposefully formulated to enable users to interact with complex environmental and mobility data through a clear, intuitive, and accessible interface. The design framework prioritizes usability, consistency, and interactivity to accommodate exploratory and task-oriented user goals. At the same time, the adaptive frontend design ensures that all charts, maps, and interface components seamlessly adjust to different screen sizes. This allows users to explore, manipulate, and interpret environmental and traffic data on various devices without sacrificing clarity or functionality.

Initially, the interface features a modular and consistent layout across all views. A fixed header with persistent navigation elements allows users to switch seamlessly between different sections, i.e., air quality, vehicle counts, traffic speed, sound levels, parking availability, and electric charging, while maintaining spatial awareness within the platform. This information is presented with a clear visual hierarchy to help you interpret complex datasets. The content is arranged in a progressive manner, from high-level summaries to granular statistics, presented through charts, tables, and interactive maps. One dedicated interface page presents an interactive geographic map of Basel, featuring labeled, color-coded markers for sensor locations. Users can filter visible categories using checkboxes and receive automatic zoom adjustments based on selections. Design features such as typographic variation, spacing, and color contrast are used to distinguish between sensor types and emphasize key insights (see Figure 5). Additionally, we employ responsive layout techniques to ensure accessibility across different devices and screen sizes. The interface dynamically adjusts to preserve readability and interaction quality, whether viewed on desktop monitors, tablets, or smartphones. This aims to support inclusivity and maximize user reach across diverse usage contexts. Using specialized web-based visualization frameworks, raw datasets are transformed into interactive charts and maps, enabling detailed exploration of spatial sensor distributions. Users can refine their analysis through zooming, hover-tooltips, and filtering features, allowing for more intuitive and direct manipulation of the data representations. However, to ensure responsiveness, the interface adopts asynchronous data communication techniques. Specifically, AJAX-based data retrieval for real-time updates without page reloads, ensuring uninterrupted navigation and consistent performance. At the same time, a centralized style sheet governs the application’s visual identity. Consistent use of fonts, color schemes, and UI components fosters a professional and cohesive aesthetic. These design elements reinforce platform trustworthiness and enhance visual clarity. Finally, its interface adheres to principles of accessible structure by incorporating clear labeling, intuitive controls, and simplified interaction patterns. Layouts are intentionally uncluttered, and familiar navigation conventions are applied to ensure usability across a broad audience, including those with varying levels of digital literacy.

5. Results

This section presents the system’s results, focusing on its interactive visualization capabilities, real-world use cases, and insights derived from the underlying data. Initially, it highlights the key visualization features that enhance user interaction and facilitate the exploration of complex datasets. This is followed by a presentation of selected use cases, demonstrating the system’s practical value and the types of data-driven insights it can reveal. Finally, a discussion is provided to interpret the findings and address potential limitations.

5.1. Interactive Visualization Features

Our platform features several advanced interactive elements that support flexible data analysis and personalized user experiences. These elements are designed to help users draw insights by allowing them to toggle specific data series within charts to isolate the variables or sensor stations they are most interested in (see Figure 6 and Figure 7). This functionality reduces visual clutter and simplifies comparing selected metrics (see Figure 8). Moreover, this kind of user-driven filtering improves visual clarity and interpretability. Similarly, several dashboards allow users to reorganize, resize, or minimize data panels based on their preferences. This personalization enables more efficient workflows by allowing users to prioritize content that aligns with their interests, such as temporal trends, spatial distributions, or statistical summaries. In Figure 9, time-series plots from various sensor locations visualize pollutant levels over time, with embedded median lines offering a clear baseline for detecting deviations. A correlation heatmap is also provided to reveal interrelationships among pollutants and sensors (see Figure 10). These visuals demonstrate how the interface supports interactive exploration of complex environmental data in an accessible and comparative format.

5.2. Use Cases and Data-Driven Insights

The system’s outputs support data-driven use cases relevant to urban management, mobility planning, and environmental monitoring. These applications are directly derived from aggregated statistics, time-series visualizations (see Figure 11), and the integration of spatial data. In the context of air quality, daily pollutant concentrations enable analysts to monitor localized pollution levels, detect peak periods, and compare sensor behavior across the city. Correlation analysis further helps identify consistent trends or anomalies between locations, while traffic and noise data provide insight into urban mobility and its environmental impacts (see Figure 12). By examining patterns in vehicle counts and decibel levels over time, officials identify congestion hotspots and areas exposed to noise (see Figure 13). Parking and EV charging logs reveal fluctuations in demand over time and space (see Figure 14), which helps optimize infrastructure, apply dynamic pricing, and plan expansions in response to the growing electric mobility. Likewise, the visual outputs also facilitate public engagement and transparency. The system encourages citizen awareness and informed participation in sustainability efforts by exposing pollution trends, parking usage, and environmental conditions through charts and maps.

5.3. Evaluation

The evaluation of the system is twofold: one aspect focuses on the accuracy of the imputation process, while the other addresses performance in terms of execution time and memory usage.

To assess the accuracy of the imputation methods, we employed two widely used error metrics: root mean squared error (RMSE) and mean absolute error (MAE) per sensor data.

$$\mathrm{RMSE}=\sqrt{{\displaystyle \frac{1}{N}}\sum _{t=1}^N{(Y_t-{\widehat{Y}}_t)}^2}$$

$$\mathrm{MAE}={\displaystyle \frac{1}{N}}\sum _{t=1}^N|Y_t-{\widehat{Y}}_t|$$

where N represents the sample size, $Y_i$ is the original data value, and ${\widehat{Y}}_i$ is the corresponding imputed value. Low RMSE and MAE values suggest high fidelity between imputed and original observations.

Table 2. Imputation accuracy per sensor and pollutant (air quality).

Sensor–Pollutant	MAE	RMSE
A2Hard NO2	5.374	8.049
Feld NO2	4.794	6.746
G125 O3	4.922	6.083
G107 O3	4.699	5.865
StJohanns O3	4.515	5.707
A2Hard O3	4.301	5.653
G131 O3	4.534	5.598
Feld O3	3.807	4.945
StJohanns NO2	3.403	4.832
G131 NO2	3.178	4.689
G125 NO2	2.652	3.926
G107 NO2	2.508	3.783
G131 PM2.5	1.827	2.895
G125 PM2.5	1.781	2.580
Feld PM2.5	1.757	2.428
G107 PM2.5	1.729	2.372
A2Hard PM2.5	1.704	2.327
StJohanns PM2.5	1.667	2.302

summarizes the per-sensor error metrics for NO₂, O₃, and PM_2.5. The results show consistent imputation performance across sensor locations, with RMSE values ranging from approximately 2.30 to 8.05, depending on the pollutant and sensor variability. PM_2.5 exhibited the lowest average error, whereas NO₂ showed higher error variance across sites, likely due to greater fluctuation and sensor-specific noise. Although the overall performance of the imputation model is satisfactory, some error values, particularly in NO₂ estimates, are relatively higher. This can be attributed to several factors. First, the imputation process was applied directly to the continuous data without categorizing values into ranges, viz., low, medium, and high pollution levels, which may have limited the model’s ability to adapt to different data regimes. Second, no outlier removal was performed before imputation, which could have introduced noise, especially in sensors exposed to irregular patterns or anomalies. Additionally, pollutants such as NO₂ often exhibit high temporal variability and sensitivity to localized conditions (e.g., traffic bursts, wind), making accurate estimation more difficult. Sensor-level noise, hardware inconsistencies, and unmeasured external influences, such as weather and topography, may also contribute to the observed discrepancies. Despite these challenges, the method demonstrated consistent accuracy across most sensors and pollutants, particularly for PM_2.5, validating its robustness in real-world environmental data scenarios.

To evaluate system responsiveness and resource usage, we measured the execution time and memory consumption of key endpoints under typical usage. As shown in

Table 3. Performance evaluation of selected API endpoints.

Endpoint	Execution Time (s)	Memory Start (MB)	Memory Increase (MB)
get_spso_data	0.01	165.12	–
get_echarging_data	0.13	183.73	62.21
get_corr_matrix	0.46	165.10	84.09
get_road_data	0.66	165.04	135.11
get_vehicle_data	2.69	165.11	419.95
get_soundHz_data	8.67	180.53	419.28
get_parking_data	0.51	388.28	2.43

, the response times range from 0.01 s (e.g., static metadata) to 8.67 s (e.g., high-resolution audio frequency data). The corresponding memory usage ranged from as low as 2.4 MB to over 400 MB, depending on data complexity and processing requirements. These results indicate that caching and data downsampling contribute significantly to maintaining low latency and acceptable memory footprint across diverse data sources. Moreover, while no formal usability testing was performed, internal evaluations confirmed consistent functionality and responsiveness across various devices, reflecting the system’s design focus on accessibility and multi-stakeholder usability.

5.4. Discussion

As innovative city systems increasingly rely on sensor networks and data-driven applications, it is vital to acknowledge the limitations and responsibilities of this technological evolution. While the presented application demonstrates the analytical and practical value of visualizing urban sensor data, several underlying challenges warrant further attention, including data quality, and ethical safeguards, as well as sustainable implementation.

One of the most pressing concerns is data inconsistency. Real-world sensor deployments are subject to calibration errors, environmental interference, and device degradation over time. In our datasets, discrepancies have been documented, e.g., speed sensors are found to overestimate vehicle velocities by an average of 11.8 km/h due to poor calibration [68]. Similar discrepancies are observed in counting sensors, which recorded approximately 15% fewer vehicles than validated traffic counting stations, often misclassifying passenger vehicles as vans. These issues highlight well-documented challenges in real-world sensor deployments, including device drift, environmental interference, and variation between low-cost and reference-grade instruments. Such inconsistencies underscore the importance of regular calibration, cross-validation with certified instruments, and transparent reporting of sensor limitations in smart city infrastructures. Likewise, uneven sensor distribution may cause specific neighborhoods or conditions to be overrepresented in policy decisions, while others remain under-monitored. Moreover, data gaps due to power interruptions or connectivity issues require imputation, which can never fully substitute for original observations. Under environmental conditions, such as humidity or temperature fluctuations, sensor accuracy can be further distorted. Lastly, ethical considerations are equally vital [70]. While the data used in this system are primarily aggregated and anonymized, the increasing deployment of high-resolution sensors, such as surveillance cameras or license plate readers, raises significant concerns around privacy and potential misuse [71]. In this article, privacy was a central design priority, as the parking monitoring system relied on a deliberately low-resolution camera incapable of capturing personally identifiable features, i.e., faces or license plates. This aligns with the European Data Protection Board guidance [72], which emphasizes data minimization and purpose limitation in the context of urban surveillance. As illustrated in Figure 15, the output retains enough detail to detect parking occupancy while effectively protecting the privacy of pedestrians and vehicle owners. Despite the limited resolution, the system could still accurately detect parking spot occupancy, demonstrating that privacy-preserving sensing can coexist with effective urban monitoring. Securing that no personally identifiable information is collected or inferred is a foundational principle. Additionally, transparency in data governance remains crucial: stakeholders must communicate what data are being collected, for what purpose, and who can access it. Particularly when sensor data influences urban planning or regulatory outcomes.

6. Conclusions and Future Work

This article proposes a modular, web-based platform for analyzing and visualizing urban sensor input streams, developed using datasets provided by the Basel Smarte Strasse project. Our application unifies diverse data streams, including air quality, traffic noise, vehicle counts, parking occupancy, and EV charging, to provide a comprehensive view of environmental and infrastructural conditions in urban areas. Based on SARIMAX, k-NN imputation, and random forest regressors, the platform’s backend processes heterogeneous data effectively, addressing missing values and improving data reliability. On the contrary, its frontend combines interactive maps, time-series plots, and correlation heatmaps. Visualization is an efficient and intuitive tool for representing urban data and enabling users to explore trends and relationships across space and time, enhancing decision-making. In addition, for experts, these visual tools offer actionable insights into infrastructure optimization and environmental interventions. At the same time, our web-based platform emphasizes usability and adaptability through a responsive interface, while integrated caching strategies ensure smooth performance during repeated and data-intensive exploration tasks.

Future plans include extending the pipeline to support real-time sensor data, enabling live dashboards, and triggering alerts for environmental and traffic monitoring purposes. Integrating more advanced predictive models could also support the casting of pollutant concentrations, noise levels, or traffic flows, thereby assisting in proactive urban planning. Furthermore, linking the platform with public transport APIs, weather data, or health records could enable cross-domain insights, e.g., analyzing the relationship between pollution spikes and respiratory health indicators.