# DyEgoVis: Visual Exploration of Dynamic Ego-Network Evolution
## 4 Visual Design and Implementation
### User Interface
#### 4.2.4 Dynamic Ego-Network View  
This view (Figure 3d) is designed to visualize and compare the selected dynamic ego-networks (T6-T11). As a typical dynamic network visualization method, small multiples can be used to visualize a dynamic ego-network as shown in Figure 4a. Based on the force-directed layout algorithm [41], each snapshot is drawn as a node-link diagram where the ego is marked by a colored dot at its top. Although this method can describe the structure of each snapshot well, the position of the same node in all snapshots is almost always different, making it difficult for users to track changes in ego-alter relationships. To address these issues, we propose a layout method suitable for analyzing the evolutions of ego-alter relationships, as shown in Figure 4b. In our layout, the ego is located in the center of a grid. The ego's one-level alters are placed on the left diagonal of the grid while its one-level alters are placed on the right diagonal. Based on the task T9, we visualize only two-level alters that previously were one-level alters or subsequently became one-level alters, such as alter D in Figure 4b. The same nodes in all grids are connected by lines to allow users to track, compare and analyze the evolution of each alter. For example, in Figure 4b, alter B maintains a stable relationship with ego A; alter E has the shortest lifespan; and alter C disappears at timestep t3 and then reappears at timestep t4. The resulting layout should minimize line crossings and node overlapping to reduce visual clutter. In addition, long-life alters should be as close to the ego as possible. In our layout, the lifespan of an alter depends on its first and last appearances, regardless of whether it disappears during the period. Inspired by [2,48], our layout algorithm is shown in Algorithm 1. We input one-level alters and calculate their coordinates. When an alter changes from one-level to two-level, its current position should be horizontally aligned with the previous position as much as possible.  
To reduce visual clutter, we hide the edges between nodes. However, when the user hovers over a node, all edges connected to it are displayed. If the user clicks an alter, its connection lines are highlighted in red. The user can right-click on a node to inspect its details such as lifespan, occurrence number and attributes. As shown in Figure 3(d1), if adjacent dynamic ego-networks have common nodes at a timestep, the common nodes are connected by curves to support task T11. The system allows the user to switch between our layout and small multiples layout by clicking on the icon \(\delta\) in the upper right corner in Figure 3b. The user can click the icon \(\delta\) to decide whether to display two-level alters. To support task T5, we designed a feature evolution panel as shown in Figure 3(d2). This panel can be opened by clicking the icon \(\left|\right|\). It adopts a stacked area chart to visualize the evolution of the specified feature of each selected dynamic ego-network. Note that when the user drags the timeline, both the snapshot embedding view and the dynamic ego-network view will move along with the timeline.