PROCESSOR AeVOL.
No.
Oktober 2025 Laman web jurnal: https://ejournal.
id/index.
php/processor Jurnal Processor
P-ISSN: 1907-6738 | E-ISSN: 2528-0082
Interactive Client-Side Network Simulation with Dynamic Bandwidth Management and Real-Time 3D Visualization Bhanu Sri Nugraha1.
Lukman2* Teknologi Informasi.
Universitas Amikom Yogyakarta.
Sleman.
Daerah Istimewa Yogyakarta 55281.
Indonesia.
Manajemen Informatika.
Universitas Amikom Yogyakarta.
Sleman.
Daerah Istimewa Yogyakarta 55281.
Indonesia.
*Penulis Korespondensi.
Email: masman@amikom.
AbstrakOeManajemen jaringan modern yang efektif menghadapi tantangan meningkatnya kompleksitas dan lalu lintas dinamis, sehingga membutuhkan perangkat yang andal untuk analisis waktu nyata .
eal-tim.
Penelitian ini membahas masalah pengelolaan fluktuasi bandwidth yang signifikan dalam jaringan berskala besar, yang disimulasikan untuk institusi pendidikan dengan 25 titik koneksi pengguna.
Permintaan jaringan berpotensi melebihi kapasitas gabungan 180 Mbps dari tiga Penyedia Layanan Internet (ISP) yang berbedaAidengan kecepatan 30 Mbps, 50 Mbps, dan 100 MbpsAisehingga menimbulkan risiko kemacetan yang tinggi.
Untuk mengatasi hal ini, kami mengembangkan simulasi jaringan sisi klien yang interaktif menggunakan Three.
js untuk visualisasi 3D.
Metodologi penelitian ini melibatkan pembuatan topologi 25-node secara prosedural, model lalu lintas stokastik untuk permintaan yang berfluktuasi, dan router cerdas yang mengimplementasikan logika spillover hierarkis serta algoritma pelambatan proporsional untuk manajemen kemacetan.
Hasilnya adalah simulasi fungsional yang memodelkan perilaku jaringan yang kompleks, termasuk alokasi bandwidth dinamis dan spillover lalu lintas, sepenuhnya di sisi klien.
Validasi melalui pengujian black box mengonfirmasi efikasi sistem.
Secara numerik, simulasi berhasil membatasi total bandwidth pada batas 180 Mbps selama permintaan puncak dan memulai spillover ke ISP kedua dengan tepat hanya setelah permintaan melebihi kapasitas 30 Mbps ISP pertama.
Publikasi ini berfungsi sebagai bukti konsep yang kuat untuk digital twin jaringan tingkat lanjut, dengan potensi di masa mendatang untuk mengintegrasikan model dan protokol lalu lintas yang lebih canggih.
Kata Kunci: Manajemen Bandwidth.
Rendering Sisi Klien.
Visualisasi Data.
Simulasi Jaringan.
Three.
AbstractOeEffective management of modern networks is challenged by increasing complexity and dynamic traffic, necessitating robust tools for real-time analysis.
This paper addresses the problem of managing significant bandwidth fluctuations in a large-scale network, simulated for an educational institution with 25 user connection points.
The network's demand can potentially exceed the 180 Mbps combined capacity of three distinct Internet Service Providers (ISP.
Airated at 30 Mbps, 50 Mbps, and 100 MbpsAicreating a high risk of congestion.
To tackle this, we developed an interactive, client-side network simulation using Three.
js for 3D visualization.
Our methodology involves the procedural generation of the 25-node topology, a stochastic traffic model for fluctuating demand, and an intelligent router implementing hierarchical spillover logic and a proportional throttling algorithm for congestion management.
The result is a functional simulation that models complex network behaviors, including dynamic bandwidth allocation and traffic spillover, entirely on the client-side.
Validation through black-box testing confirmed the system's efficacy.
Numerically, the simulation successfully capped total bandwidth at the 180 Mbps limit during peak demand and correctly initiated spillover to the second ISP only after demand exceeded the first ISP's 30 Mbps capacity.
This work serves as a strong proof-of-concept for advanced network digital twins, with future potential for integrating more sophisticated traffic models and protocols.
Keywords: Bandwidth Management.
Client-side Rendering.
Data Visualization.
Network Simulation.
Three.
INTRODUCTION
The increasing complexity and dynamic nature of modern computer networks present significant challenges for effective management, monitoring, and troubleshooting.
Traditional network monitoring tools often rely on static data representations or abstract metrics, which can obscure the intricate, real-time interactions between network components and traffic flows .
This limitation hinders both educational understanding and the operational capacity of administrators to respond proactively.
The need for intuitive, high-fidelity visualization tools that can dynamically represent network behavior in an accessible manner is therefore paramount .
This research specifically addresses the problem of managing a network in a large institutional environment with 25 user connection points, where aggregate demand can unexpectedly surge beyond the 180 Mbps of total available bandwidth, leading to congestion and a degraded user experience.
https://doi.
org/10.
33998/processor.
Submitted: 06 Agustus 2025.
Reviewed Round-1: 18 Agustus 2025.
Reviewed Round-2: 11 September 2025 Accepted: 27 September 2025.
Published: 31 Oktober 2025 Existing literature on network visualization often focuses on static topology mapping or post-mortem analysis of log data, which lacks the interactive, real-time simulation capabilities necessary to explore "what-if" scenarios.
Furthermore, complex simulations often require significant server-side computational resources, limiting their accessibility and scalability for educational or rapid prototyping purposes .
, .
This research gap highlights the need for more dynamic and accessible tools, leading to our central research question: Why is an Interactive ClientSide Network Simulation needed? The answer lies in creating a tool that allows for direct, real-time experimentation without the barrier of server-side dependencies.
To address these gaps, this study employs two key mechanisms: a stochastic traffic model to generate unpredictable yet lifelike bandwidth fluctuations around a target value, and a hierarchical spillover mechanism to intelligently manage traffic across three commercial Internet Service Providers (ISP.
Aireferred to as ISP X .
Mbp.
ISP Y .
Mbp.
, and ISP Z .
Mbp.
The spillover logic ensures cost-effective resource use by only activating higher-capacity links when demand exceeds the primary link's capacity.
Therefore, this research will detail the development and validation of a novel, browser-based 3D network simulation.
The system operates entirely on the client-side, allowing users to directly manipulate network parameters and immediately observe the system's adaptive responses .
This provides an accessible tool for understanding complex network behaviors and serves as a proof-of-concept for developing more advanced, real-data-driven digital twins for network operations centers .
Network Simulation and Visualization.
Network simulation is a crucial tool for understanding, analyzing, and designing complex network systems without the need for expensive physical infrastructure.
Simulations allow researchers and engineers to test various scenarios, evaluate protocol performance, and identify potential problems in a controlled environment .
They provide a safe and cost-effective means to experiment with network configurations, assess the impact of new technologies, and predict network behavior under different load By abstracting the complexities of physical hardware, network simulators enable focused analysis on logical network operations and data flow.
Beyond mere simulation, network visualization transforms abstract network data into intuitive graphical representations, facilitating deeper insights and quicker decision-making.
Effective visualization techniques can highlight critical network states, such as congestion, bottlenecks, or security threats, which might otherwise remain hidden within raw data.
This visual clarity is particularly beneficial for educational purposes, allowing students to observe and comprehend complex network phenomena in a tangible way.
The integration of simulation with visualization creates powerful tools for both research and practical network management .
Bandwidth Management and Congestion Control.
Bandwidth management is a fundamental component in ensuring quality of service (QoS) and network efficiency.
It involves the strategic allocation and control of network resources to guarantee desired performance levels for different types of traffic or users .
This is crucial in environments with diverse applications, where some traffic .
, voice or vide.
is highly sensitive to latency and packet loss, while others .
, file transfer.
are more tolerant.
Effective bandwidth management aims to prevent network underutilization while simultaneously avoiding oversubscription that could lead to performance degradation .
Congestion control, on the other hand, focuses on preventing or mitigating conditions where traffic demand exceeds network capacity, which can lead to significant performance degradation, including increased latency, packet loss, and reduced throughput.
Mechanisms such as proportional throttling, where each user's bandwidth is proportionally reduced to match total demand with available capacity, are common strategies to maintain network stability under peak loads .
, .
Furthermore, the concept of spillover or load balancing among multiple Internet Service Providers (ISP.
is critical for optimizing the use of external resources, enhancing network resilience, and ensuring business continuity by distributing traffic across available links and activating highercapacity links only when necessary .
, .
Stochastic Traffic Modeling.
Accurate modeling of network traffic is essential for realistic simulations.
Network traffic often exhibits random and fluctuating characteristics, making stochastic modeling highly relevant.
Unlike deterministic models that assume predictable patterns, stochastic models use probability to represent unpredictable traffic behavior, such as packet arrivals, session durations, and user activity, which better reflect real-world network dynamics.
This approach allows simulations to generate bandwidth usage patterns that vary realistically around a target value, mimicking natural fluctuations in user demand rather than static, predefined loads .
, .
The implementation of stochastic traffic models typically involves statistical distributions .
Poisson.
Gaussian, or more complex self-similar processes for long-range dependenc.
and random number generators to introduce This variability is crucial for testing the robustness of network management algorithms under realistic, dynamic conditions.
By incorporating a stochastic component, simulations can reveal how a network responds to sudden spikes in demand or sustained periods of high utilization, providing insights into potential bottlenecks and the effectiveness of congestion control mechanisms .
, .
, .
https://doi.
org/10.
33998/processor.
Submitted: 06 Agustus 2025.
Reviewed Round-1: 18 Agustus 2025.
Reviewed Round-2: 11 September 2025 Accepted: 27 September 2025.
Published: 31 Oktober 2025 Interactive 3D Environment.
Interactive 3D environments provide a powerful paradigm for visualizing complex systems, offering a more intuitive and immersive experience compared to traditional 2D representations.
By rendering data and system components in three dimensions, users can gain a better spatial understanding of relationships and flows within the simulated environment.
This is particularly advantageous for visualizing network topologies, where the physical or logical layout of devices and connections can be complex and multilayered.
The ability to navigate, rotate, and zoom within a 3D space allows users to explore the network from various perspectives, uncovering details that might be obscured in a flat diagram .
The interactivity inherent in such environments empowers users to directly manipulate parameters and observe immediate feedback, fostering a deeper understanding of cause-and-effect relationships.
For web-based applications, libraries like Three.
js provide a high-level abstraction over WebGL, simplifying the creation of sophisticated 3D graphics directly within the browser.
This client-side approach enables rich, dynamic visualizations without requiring server-side rendering, making the applications highly accessible and responsive.
Interactive 3D environments serve as effective educational tools, allowing learners to experiment with system variables and visualize their impact in real-time, thereby bridging the gap between theoretical concepts and practical application .
, .
RESEARCH METHODOLOGY
This research employs a design science research approach, focusing on the creation and validation of an innovative artifactAian interactive network simulation systemAito address the challenges of understanding and managing dynamic network behaviors.
The methodology is grounded in established principles of system design, simulation modeling, and human-computer interaction, aiming to produce a functional and insightful tool.
The systematic development and rigorous validation steps ensure the artifact's utility and correctness, drawing upon best practices in software engineering and experimental design.
1 System Architecture and Technology Stack The system is built upon a client-side rendering architecture, ensuring high interactivity and eliminating serverside computational load for the visualization logic.
The core technologies utilized include HTML5.
CSS3, and JavaScript (ECMAScript 2015 ).
The 3D environment is implemented using the Three.
js library, which provides a high-level abstraction over WebGL for direct graphics rendering within the web browser .
, .
The system adheres to a component-based design, encapsulating network entities such as nodes, routers, and ISPs as distinct objects with their own properties and methods, thereby promoting modularity and scalability.
2 Network Topology Generation The network topology is not static but is procedurally generated at runtime.
This allows for flexible modification of network scale and layout in future iterations.
The simulation models a dynamic network environment for a large educational institution, encompassing 25 end-user connection points.
These nodes are spatially arranged in a 5x5 grid formation using algorithmic calculations, where each node's position .
, .
is determined by its index within the grid.
Core infrastructure components, including a central router and adjacent servers ("Storage" and "Web/DB"), are placed at fixed coordinates to serve as architectural anchors.
Inter-node connections are represented as geometric lines programmatically drawn between the end-nodes and the central router, constructing a star-of-stars topology.
3 Dynamic Traffic Simulation Model To simulate realistic network behavior, a stochastic process model was developed for bandwidth utilization.
User interaction, via UI sliders, sets a target bandwidth for each node, ranging from 0 to 30 Mbps.
The actual bandwidth usage is then dynamically calculated in each animation frame as a function of this target, incorporating a random fluctuation component.
This dynamic calculation is initiated only if a node's target bandwidth is greater than zero.
The usage for each frame is calculated by combining a convergence factor, which gently pulls the current usage toward the user-defined target, and a random noise component, which simulates unpredictable, moment-tomoment volatility of real network traffic.
This creates an organic and constantly fluctuating traffic pattern around the desired average.
Figure 1 explains the network topology for old network with 5 end user, and new network for 25 end-user connection points.
https://doi.
org/10.
33998/processor.
Submitted: 06 Agustus 2025.
Reviewed Round-1: 18 Agustus 2025.
Reviewed Round-2: 11 September 2025 Accepted: 27 September 2025.
Published: 31 Oktober 2025 Figure 1.
Network topology for 5 .
and 25 .
end-user connection points.
4 Bandwidth Management and Router Logic The central router operates as the primary traffic management system, governed by a sophisticated set of rules to ensure network stability and efficient resource allocation.
Its fundamental rule is to differentiate between internal traffic .
estined for local "Storage" and "Web/DB" server.
and external internet requests.
Internal traffic is always permitted and routed directly between the end-node and the server, operating independently of main internet bandwidth calculations.
For external internet requests, the router aggregates the total bandwidth demanded by all The router implements a dynamic spillover logic across three Internet Service Providers (ISP.
with capacities of 30 Mbps, 50 Mbps, and 100 Mbps, respectively.
It prioritizes active, lower-capacity ISPs first.
ISP 2
is engaged only when total demand exceeds ISP 1's capacity, and ISP 3 is activated if demand surpasses the combined capacity of ISPs 1 and 2.
This hierarchical rule ensures efficient resource utilization.
A crucial feature is the hard cap on total bandwidth: if aggregated demand exceeds the total available capacity of active ISPs, the router enforces a fair-use throttling policy.
It calculates a scaling factor (S = Capacity / Deman.
and proportionally reduces the bandwidth allocated to every single node, ensuring total usage never exceeds the available supply.
Figure 2 is a detailed explanation of network diagrams for dynamic spillover logic.
Figure 2.
Network diagrams for dynamic spillover logic.
5 Real-Time Data Visualization Techniques https://doi.
org/10.
33998/processor.
Submitted: 06 Agustus 2025.
Reviewed Round-1: 18 Agustus 2025.
Reviewed Round-2: 11 September 2025 Accepted: 27 September 2025.
Published: 31 Oktober 2025 Information is conveyed to the user through a set of carefully chosen visual encoding techniques.
Network entities are represented by 3D geometric primitives .
ubes for nodes, servers, and ISP.
to provide a tangible sense of presence and location.
The operational state of nodes is encoded using color: a node exceeding its individual bandwidth limit of 30 Mbps is rendered in red, serving as an immediate visual alert.
Traffic flow is animated using small spherical objects .
ata packet.
moving along connection lines.
The color of packets signifies traffic type .
, blue for general internet, green for local server acces.
, and their velocity and density correlate with link bandwidth usage.
Additionally, a 2D line graph rendered on an HTML5 Canvas element, overlaid on the 3D scene, displays a time-series visualization of total aggregated network bandwidth, with data points sampled at five-second 6 Human-Computer Interaction (HCI) Model The system's interaction model is based on the principle of direct manipulation.
A dedicated UI panel provides users with sliders to control the target bandwidth for each of the 25 nodes and toggle switches to control the operational status .
n/of.
of the three ISPs.
This immediate and responsive control scheme allows users to conduct experiments, simulate various scenarios .
ISP failure, demand surge.
, and observe the network's response in real-time.
This fosters an exploratory and educational user experience, enabling direct engagement with the simulated environment and its dynamic behaviors.
7 System Implementation Aspects The system's logic is orchestrated within the main animation loop, a standard pattern in Three.
js applications, invoked by the browser's requestAnimationFrame method.
Within this loop, several key functions are executed sequentially to update the simulation state and render the scene.
The updateDynamicBandwidths() function is central to the simulation's logic.
it calculates raw demand, total available ISP capacity, and the scaling factor for the proportional throttling algorithm, applying this cap and updating node object states.
The visual output is primarily managed by the updatePackets() function, which instantiates and animates data packet objects, and by direct manipulation of material properties .
, color, emissivenes.
on 3D objects to reflect state changes.
Infrequent server access is simulated using a straightforward probabilistic method within updatePackets(), where a small chance (Math.
random() < 0.
triggers the generation of a green data packet to a designated server.
8 System Validation A two-tiered validation approach was employed, consisting of logical code validation and functional black-box Code and logic validation involved conceptual unit tests, such as verifying the proportional throttling logic by providing fixed node demands exceeding known capacity and asserting correct scaling factor calculation and final aggregated bandwidth.
Integration testing focused on verifying data flow between HCI controls and the simulation state, by programmatically altering slider values and asserting corresponding node property updates.
Functional black-box testing treated the system as an opaque box, focusing on end-user experience and visual output correctness.
Scenarios included incrementally increasing bandwidth demand to test ISP spillover (ISP 2 active after ISP 1 capacity reache.
, setting total demand higher than maximum combined ISP capacity (UI correctly capped total bandwidth displa.
, and individual node overload .
ode turning red as specifie.
All test scenarios performed as expected, confirming the system's functional validity.
RESULTS AND DISCUSSION
This section details the key implementation aspects of the network simulation system and presents the findings from its validation, demonstrating the system's functional capabilities and the realism of its simulated behaviors.
The results confirm the effectiveness of the proposed methodology in creating a dynamic and interactive network analysis tool.
1 Results The system's operational logic is primarily orchestrated within the main animation loop, a standard and efficient pattern in Three.
js applications invoked by the browser's requestAnimationFrame method.
Within this loop, several critical functions are executed sequentially to update the simulation state and render the 3D scene.
Central to the simulation's core logic is the updateDynamicBandwidths() function, which calculates the raw bandwidth demand for each node, determines the total available ISP capacity, and applies the proportional throttling https://doi.
org/10.
33998/processor.
Submitted: 06 Agustus 2025.
Reviewed Round-1: 18 Agustus 2025.
Reviewed Round-2: 11 September 2025 Accepted: 27 September 2025.
Published: 31 Oktober 2025 algorithm.
The visual output is predominantly managed by the updatePackets() function, which instantiates and animates data packet objects, and through the direct manipulation of material properties .
, colo.
on the 3D objects to reflect state changes.
The updatePackets() function is responsible for instantiating and animating small spherical data packet objects along the connection lines between network entities.
These packets, whose colors signify traffic type .
, blue for general internet, green for local server acces.
and whose velocity and density correlate with the link's bandwidth usage, provide an intuitive visual representation of data flow.
Furthermore, the material properties .
uch as color and emissivenes.
of the 3D objects representing nodes and ISPs are dynamically altered to reflect state For instance, a node exceeding its individual bandwidth limit turns red, providing an immediate visual alert of congestion, while ISPs activate and change emissive properties based on spillover logic.
2 Dynamic Bandwidth Fluctuation and Stochastic Model The simulation achieves realistic, dynamic bandwidth usage through a simple yet effective stochastic model, executed continuously within the main animation loop.
The core of this logic resides within the updateDynamicBandwidths() function.
For each classroom or Wi-Fi node, two key variables are maintained:
targetBandwidth, which is the value set by the user via the UI slider .
s described in Section 3.
, and bandwidthUsage, which represents the actual calculated usage for the current frame.
The simulation only initiates this dynamic calculation if a node's targetBandwidth is greater than zero.
otherwise, bandwidthUsage is immediately set to zero, accurately reflecting inactive nodes.
To simulate realistic traffic, a custom stochastic model was implemented rather than relying on standard distributions like Poisson or Gaussian.
This approach allows for fine-tuned control over the traffic's behavior, directly reflecting the user's input while adding a layer of unpredictability.
The bandwidth usage for each node is calculated in every frame using the following formula:
Usage t = Usage t-1 (Target Ae Usage t-.
(Random(-1, .
* FluctuationFacto.
This formula balances a convergence component () that smoothly pulls the current usage toward the user-defined target with a random noise component (FluctuationFacto.
that introduces small, moment-to-moment volatility.
The model's implementation was validated visually by observing the smooth, continuous, and unpredictable fluctuations around the user-set target on the real-time graph, which confirmed its ability to mimic the natural ebb and flow of real-world user activity.
3 Infrequent Server Access Simulation The simulation of relatively rare access to the local "Storage" and "Web/DB" servers is achieved using a straightforward probabilistic method implemented within the updatePackets() function.
Instead of creating a complex, scheduled access pattern, the code leverages probability to create an emergent pattern of infrequent use that mirrors real-world sporadic access to internal resources.
Figure 3 visualizes the main workflow in the simulation web.
https://doi.
org/10.
33998/processor.
Submitted: 06 Agustus 2025.
Reviewed Round-1: 18 Agustus 2025.
Reviewed Round-2: 11 September 2025 Accepted: 27 September 2025.
Published: 31 Oktober 2025 Figure 3.
Main workflow in the simulation web During each frame of the animation, the code iterates through every end-user node.
For each node, a probabilistic check is performed using Math.
random().
Specifically, the condition (Math.
random() < 0.
dictates a 0.
chance for a server access event to occur for any given node in any single frame.
When this condition is met, a single data packet .
isualized in green to distinguish it from external internet traffi.
is generated and sent from the node to the designated server.
While the probability in a single frame is very low, this check is performed for all 25 nodes approximately sixty times per second .
epending on the requestAnimationFrame rat.
The cumulative effect is a visually sparse and irregular flow of packets to the servers, effectively simulating occasional access to local resources without needing to define complex user behavior patterns or a detailed internal network traffic model.
This approach provides a balance between realism and computational efficiency.
4 System Validation A two-tiered validation approach was employed to rigorously assess the system's functionality and correctness, consisting of logical code validation .
nit and integration testin.
and functional black-box testing.
Code and Logic Validation: The core algorithms, particularly the proportional throttling logic, were conceptually validated through unit tests.
For instance, the throttling mechanism was tested by providing a fixed set of node demands that deliberately exceeded a known available capacity.
The output was then verified to ensure that the calculated scalingFactor was correct and that the final aggregated bandwidth precisely matched the capacity limit, demonstrating the algorithm's accuracy in managing congestion.
Integration testing focused on verifying the seamless data flow between the Human-Computer Interaction (HCI) controls and the simulation Test cases involved programmatically altering a UI slider's value and asserting that the corresponding node's targetBandwidth property was correctly updated within the simulation's internal state object, confirming the responsiveness and accuracy of user inputs.
To generate test results, a controlled scenario was created where the total available capacity was programmatically set to 30 Mbps .
nly ISP X activ.
against a simulated total demand of 45 Mbps.
The algorithm correctly calculated a scaling factor of approximately 0.
, proportionally reducing each node's allocation and capping the final aggregated bandwidth at precisely 30 Mbps.
This confirmed the algorithm's mathematical accuracy in preventing network overload.
Functional Black-Box Testing: This phase treated the system as an opaque box, focusing on the end-user experience and the correctness of the visual output.
One tester executed a series of predefined scenarios to validate key functionalities.
A primary test focused on the ISP spillover mechanism.
By incrementally increasing the total network demand using the UI sliders, testers observed that as the demand was pushed from 28 Mbps to 35 Mbps, https://doi.
org/10.
33998/processor.
Submitted: 06 Agustus 2025.
Reviewed Round-1: 18 Agustus 2025.
Reviewed Round-2: 11 September 2025 Accepted: 27 September 2025.
Published: 31 Oktober 2025 the visualization correctly showed ISP Y becoming active to handle the 5 Mbps overflow only after the 30 Mbps threshold of ISP X was exceeded.
This confirmed the hierarchical logic was functioning as designed.
Critical scenario tested congestion and throttling.
The total demand was intentionally set to 200 Mbps, far exceeding the maximum combined capacity of 180 Mbps.
The system responded correctly by capping the "Total Bandwidth" display in the UI at 180 Mbps.
Simultaneously, the animated data packets' flow rate visually corresponded to this capped limit, not the higher raw demand, confirming the effectiveness of the hard-cap throttling policy.
Finally, individual node overload was tested.
A single node's target bandwidth was set to 35 Mbps, which is above its individual limit of 30 Mbps.
The system provided immediate visual feedback as the node's 3D cube instantly turned red, as specified by the visual encoding rules, successfully demonstrating the alert mechanism for localized congestion.
All defined test scenarios performed as expected, confirming the system's functional validity with a 100% success rate on the tested functionalities.
This test was validated by observing that the "Total Bandwidth" display in the UI was correctly capped at the maximum available capacity and did not reflect the higher raw demand, confirming the effectiveness of the hardcap throttling policy.
Finally, individual node overload was tested by setting a single node's target to its maximum.
This was confirmed by the node's 3D cube turning red, as specified by the visual encoding rules, providing immediate visual feedback on localized congestion.
All defined test scenarios performed as expected, confirming the system's functional validity and its ability to accurately simulate complex network behaviors.
The critical test of total demand significantly higher than the maximum combined ISP capacity .
Mbp.
simulated on figure 4.
Figure 4.
Network 3D Visualization.
5 Discussion The validation results affirm the successful implementation of a client-side, interactive network simulation capable of demonstrating complex network behaviors in real-time, which is a critical aspect in analyzing and optimizing network protocols such as AODV in dynamic environments .
The system's ability to accurately reflect dynamic bandwidth fluctuations, manage ISP spillover, and enforce total bandwidth caps through proportional throttling aligns with the theoretical foundations of bandwidth management and congestion control .
, .
The visual encoding techniques, including color-coded node states and animated data packets, proved highly effective in conveying critical network information, such as congestion and traffic flow, mirroring the importance of intuitive visualization in network analysis .
The stochastic traffic model, a central objective of this research, successfully generates realistic and unpredictable network activity around user-defined targets.
This approach, consistent with recent advancements in stochastic traffic modeling, provides a more accurate representation of real-world network dynamics compared to static load profiles.
The interactive nature of the simulation, driven by the Human-Computer Interaction (HCI) model, allows users to directly manipulate parameters and observe immediate responses.
This direct engagement fosters an exploratory learning environment, a significant advantage over traditional, less interactive simulation tools, as highlighted by recent literature reviews on visual network simulation application development.
The use of a client-side architecture and Three.
js for 3D rendering further https://doi.
org/10.
33998/processor.
Submitted: 06 Agustus 2025.
Reviewed Round-1: 18 Agustus 2025.
Reviewed Round-2: 11 September 2025 Accepted: 27 September 2025.
Published: 31 Oktober 2025 enhances accessibility and responsiveness, aligning with the growing trend of web-based interactive visualizations.
While our system focuses on a specific network topology and management rules, its modular design and procedural generation capabilities offer a flexible framework for adaptation and expansion, demonstrating the power of web technologies to create specialized, accessible applications for various scenarios .
, .
, .
, .
6 Future Work Building upon the successful development and validation of this interactive network simulation, several avenues for future research and development can be explored.
Firstly, the current stochastic traffic model could be enhanced by incorporating more sophisticated real-world traffic patterns, such as self-similar traffic or burstiness, to further increase the fidelity of the simulation.
This could involve integrating machine learning models trained on real network traces to predict and generate more complex traffic behaviors.
Secondly, the network topology could be made more dynamic, allowing users to add, remove, or reconfigure nodes and connections in real-time, moving beyond the current procedural generation of a fixed grid.
This would enable the simulation of network growth, failures, and reconfigurations.
Furthermore, integrating additional network protocols and services, beyond basic bandwidth management, could significantly expand the simulation's utility.
This might include simulating routing protocols .
OSPF,
BGP), quality of service (QoS) mechanisms beyond simple throttling, or security events like DDoS attacks.
From a visualization perspective, exploring advanced immersive visualization techniques, potentially incorporating virtual or augmented reality, could offer even more profound insights into large-scale network dynamics.
Finally, extending the system to support multi-user interaction or collaborative scenario testing would transform it into a powerful platform for team-based network design and troubleshooting exercises.
CONCLUSION
This research successfully developed and validated an interactive, client-side network simulation, with testing yielding a 100% success rate for all core functionalities.
The numerical results from the analysis demonstrate the system's precision: it accurately enforces a network-wide bandwidth cap, proven by its ability to limit total traffic to 180 Mbps even when raw demand was 200 Mbps.
Furthermore, the hierarchical spillover mechanism was validated to trigger precisely, activating the second ISP only after demand surpassed the first ISP's 30 Mbps These results directly answer the research question, "Why is an Interactive Client-Side Network Simulation needed?" The simulation is necessary because it effectively fills a critical gap by providing an accessible, realtime, and highly interactive tool for network analysis.
Unlike traditional static or server-dependent systems, this simulation allows for direct experimentation, enabling a deeper understanding of complex behaviors like congestion and resource management.
The artifact serves as an effective educational tool and a robust proof-ofconcept for developing more advanced, real-data-driven digital twins for network operations centers.
REFERENCES