Insightful Eyes · Traceability — Smart Campus Network Traffic Monitoring and Security Situation Awareness

Original Competition Problem and Background

The China University Students Service Outsourcing Innovation and Entrepreneurship Competition (SOIEC), jointly hosted by the Ministry of Education and the Ministry of Commerce, is one of the most influential academic competitions in the domestic service outsourcing field. The competition task for this year required participating teams to develop a complete system integrating traffic collection, real-time analysis, and visual presentation around the theme of"Smart Campus Network Traffic Monitoring and Security Situation Awareness."The task explicitly identified three core challenges faced by campus network administrators:

"Unclear Visibility"Existing monitoring methods suffer from coarse granularity and a single dimension, making it difficult to grasp real-time changes in network throughput at the second level, the scale of active IPs, and the composition of application protocols across the entire network, thus failing to identify sudden large traffic flows and changes in service structure.：

identification of no fewer than 10 campus network applications/protocols; detection of at least four typical network threats (DDoS, port scanning, worms, phishing); and the ability to support a complete analysis and decision-making loop from a macro-level panoramic dashboard down tothe micro-level details of a single IP.The "Insight · Trace" system adopts a deeply integrated architecture ofhigh-performance data collection, stream computing, and multi-dimensional visualization technologies,

System Architecture and Technical Approach

structured into four layers: the data collection layer, the computing engine layer, the core algorithm layer, and the visualization presentation layer.High-Performance Data Collection, Stream Computing, and Multidimensional VisualizationA deeply integrated architecture of technologies,

Data Acquisition Layer: PF_RING Zero-Copy + eBPF XDP

The system utilizes PF_RING technologyin the data acquisition layer to establish a shared memory ring buffer between user space and kernel space, enabling "zero-copy" packet capture and avoiding the performance bottlenecks caused by frequent memory copies in traditional libpcap. At the same time, it integrates eBPF XDP technologyto perform packet preprocessing, filtering, and aggregate statistics directly at the NIC driver layer, ensuring line-rate processing under high-load environments of 10 Gbps, with a single-core processing capacity exceeding 2 million pps。

Computing Engine Layer: Apache Flink Stream Processing

Based on Apache Flink Apache Flink, a stream processing engine is built to support sliding window aggregation, enabling real-time computation of multi-dimensional metrics such as overall network throughput, packet forwarding rate, active IPs, and connection counts. The results are pushed to a large-screen display via WebSocket for dual-dimensional visualization.

Core Algorithm Layer: Three-Layer Progressive Application Identification + Composite Threat Detection

The application identification strategyadopts a three-layer progressive model:

• The first layerperforms rapid identification based on port mapping (e.g., HTTP/80, HTTPS/443).
• The second layeranalyzes behavioral characteristics such as packet length distribution and connection patterns for traffic on non-standard ports.
• The third layerperforms fingerprint identification for encrypted traffic by parsing the cipher suite and extension list in the ClientHello message during the TLS handshake phase, achieving an overall identification accuracy of over 93%.

Security DetectionFour types of detection algorithms are integrated: DDoS (traffic symmetry ratio + Z-score anomaly detection), port scanning (discrete degree of destination ports for a single IP across different short time windows), worm propagation (lateral movement behavior patterns), and phishing attacks (domain entropy + threat intelligence database). The system adopts a"Rule + Statistics + Baseline"composite detection model, which effectively reduces the false positive rate and achieves high-recall identification of covert threats.

Visualization Layer: Three-level drill-down from "Macro Overview — Regional Perspective — Micro Details"

The front-end dashboard is designed with athree-level drill-down interaction model: The macro-level situational dashboard displays real-time network-wide throughput, active IPs, protocol distribution, and sudden traffic surges; the regional perspective layer presents traffic differences across dimensions such as dormitory areas, teaching areas, and administrative zones, identifying "traffic hotspots"; the micro-level detail layer supports direct penetration from "regional hotspots" to "single IP communication peer trends," enabling geographic traceability and visual evidence collection of network behavior.

The most distinctive innovation is the introduction of3D campus scene interaction: Abstract traffic data is mapped into intuitive spatial heatmaps, supporting building-level traffic coloring and dynamic marker pulses, allowing operations and maintenance personnel to "see at a glance" which device in which building is exhibiting anomalies.

Frontend Development and 3D Campus Modeling

As the front-end development lead of the team, the core challenge I faced was not simple page construction, buthow to transform a flat campus satellite image into an interactive digital twin scene suitable for 3D traffic heatmap mapping. This problem spanned three domains: geographic information processing, computer graphics, and front-end engineering, with no ready-made commercial or open-source tools available to directly address it.

Methodology: Vibe Coding + Manual Annotation + Web Modeling Fine-Tuning

To tackle this cross-disciplinary challenge, I adopted alayered and progressive methodology：

Technical Implementation of the 3D Scene

The 3D campus scene was entirely generated procedurally using Three.js, without the use of any external model files (GLTF/OBJ/FBX). All buildings, roads, greenery, sports fields, and landmarks were dynamically constructed through code:

• Building System: Supports differentiated rendering of over 50 buildings, including dormitories (D1–D32), teaching buildings (No. 6–12 Teaching and Research Buildings), cafeterias (Plum Blossom Restaurant, First Cafeteria, etc.), the library, gymnasium, science museum, and administrative building.
• Road Network: 49 on-campus and off-campus roads, including details such as lane dashed lines, centerlines, streetlights, and intersection coverage.
• Greenery and Sports Fields: 34 green areas (lawns, rivers, ponds) and 13 sports fields (track and field courts, basketball courts, tennis courts, and the Asian Games Gymnasium).
• Landmark Buildings: Distinctive landmarks such as the "Three Provinces Ask Heaven" sculpture and the single-span campus gate.
• Day/Night Mode: Supports visual switching between daytime and nighttime, with dynamic effects such as glowing building windows, streetlights, and stadium lighting at night.
• Interactive FunctionsBuilding labels, regional hotspot pulse markers, mouse hover highlighting, and automatic camera cruise

All core data of the scene are derived from the following detailed introduction of thecampus map manual structured annotation tool。

Campus map coordinate structuring — a data bridge from satellite imagery to 3D scenes

The soul of a 3D campus scene lies not in rendering techniques, but in theprecision and completeness of the underlying dataThe raw material I obtained was merely a 1185×1210 pixel satellite image of the campus—sufficiently intuitive for the human eye, yet for computer graphics programs, it is merely a collection of RGB pixels devoid of semantic information. How could structured data such as "this is a dormitory," "that is a road," or "this area is a sports field" be extracted from it?

No off-the-shelf tool exists to accomplish this task. GIS software is too heavy, online annotation platforms do not support exporting coordinate formats compatible with Three.js, and manually hardcoding coordinates in code is both inefficient and error-prone. I concluded that themost pragmatic solution was to develop my own annotation tool。

Tool design: Python + Tkinter + PIL

I independently developed a campus map manual structured annotation tool based on Python’s standard libraries (Tkinter + PIL), with approximately 1,000 lines of core code. The design objectives of the tool are:to enable non-specialist GIS users to complete precise annotation of an entire campus within 2–3 hours。

Core functionality and interaction design

The core capabilities of the tool include:

• Polygon and rectangle annotation: supports point-by-point polygon drawing (for irregular buildings) and drag-based rectangle drawing (for regular buildings)
• Real-time semi-transparent overlay: annotation shapes are overlaid on the base map at 45% opacity, ensuring both reference visibility and clarity
• Zoom and pan: Ctrl + scroll wheel zoom (0.2×–6×), facilitating quick switching between global layout and local details
• Classification System: Streets (on-campus/off-campus), Buildings (dormitories/teaching buildings/cafeterias), Greenery (lawns/rivers/ponds), Sports Facilities (track and field/basketball courts/tennis courts/Asian Games Gymnasium), Landmarks
• Building Attributes: Each building can be annotated with metadata such as number of floors, height, and name
• Undo/Redo/Delete: Complete editing history management
• Project Saving and Export: Save as a JSON project file; export as a tagged preview PNG

Category Schema Definition (CATEGORY_SCHEMA)

CATEGORY_SCHEMA = {

Annotation Results: 148 precise annotation points

Using this tool, I conducted a complete annotation of the Xiasha Campus of Hangzhou Dianzi University, ultimately producing a structured dataset containing 148 annotated objects :

JSON Export Data Structure

Each annotated object is exported as a structured record containing ID, name, category, geometry type, coordinate point sequence, and building metadata:

{

Methodological Reflection: Problem-Solving Paradigms in the Age of AI

The development and application of this annotation tool reflect my core methodology when confrontingcross-domain, non-standardized tasks:

First, I do not blindly pursue "pure AI generation".

Second, when faced with the dilemma of "no existing tools available," I prioritize building a Minimum Viable Tool (MVT).

Third, data is the foundation of visualization.

Interactive 3D Campus Model Display

The following is a Three.js 3D digital twin scene of the campus, driven by the 148 annotated data points mentioned above.

Achievements and Demonstration Video

The "Insight·Traceability" system won theProvincial (Eastern Division) Third Prizein the China University Students Service Outsourcing Innovation and Entrepreneurship Competition.