Context

The location or origin of a connection can reveal a lot in cybersecurity. If there are connections from an unwanted source, the person connecting might be a hacker. Knowing the location and visually representing connection origins is a classic view that quickly informs analysts of potential threats.

Problem

Geolocaiton of sources can be hard to track. Some origins might always have heavy traffic. The nature of the connection might change. It should be easy to view all traffic from an origin.

Process

• Define: The level of fidelity of needs scoping. The project would develop in two phases. Phase one would count the connections from the country. Phase 2 would be more granular points of origin.
• Hypothesis Testing: Customers are most concerned with origin country and amount of data passed and not specific cities. They want a visual way to see heavy data transfers or connections.
• Pivot & Rejection: I began hoping to get more accuracy and had to switch to an even lower level of view than expected, considering the amount of masking that is possible from many countries. I also tried to convey more information about the type of connection that was made by using colors in the graphing tool. It was too busy
• Iteration: I started with how to build a heat-map that was flexible for theming and intuitive. Then tried building in a marker of the connection to make sure that both could be used together.

Proposal

I delivered a unified, predictable token system and color map built on this custom-weighted scale, featuring a foundational dark theme and an exaggerated high-contrast theme optimized for low-quality enterprise monitors and aging projectors. The architecture explicitly mapped nested panel logic and included built-in “rainbow” variable slots (like pinks and purples) to future-proof the system for upcoming maturity milestones.

Result

Starting with the most important problem which is how to show traffic in the general sense. The map needs to be themeable and also indication volume of connections. A monochromatic heat map made sense after trying different ideas. I could change the opacitiy and select a single color. The less opaque, the more connections were recorded from the country.

Heat Map Color Tests

Origin Point

Final Design

In the final design, a simplified heat map was used until the precise origin could be confirmed. Information about each country is displayed in the right slide-out panel, and traffic can be switched from bytes out to bytes in. When a country is selected, a card slides up, which reveals the breakdown of traffic and flag associated with the country.