Focus+Context Metro Maps

Transcription

1 Focus+Context Metro Maps 1 Yu-Shuen Wang 2 Ming-Te Chi National Chiao Tung University 1 National Chengchi University 2 Abstract We introduce a focus+context method to visualize a complicated metro map of a modern city on a small displaying area. The context of our work is with regard the popularity of mobile devices. The best route to the destination, which can be obtained from the arrival time of trains, is highlighted. The stations on the route enjoy larger spaces, whereas the other stations are rendered smaller and closer to fit the whole map into a screen. To simplify the navigation and route planning for visitors, we formulate various map characteristics such as octilinear transportation lines and regular station distances into energy terms. We then solve for the optimal layout in a least squares sense. In addition, we label the names of stations that are on the route of a passenger according to human preferences, occlusions, and consistencies of label positions using the graph cuts method. Our system achieves real-time performance by being able to report instant information because of the carefully designed energy terms. We apply our method to layout a number of metro maps and show the results and timing statistics to demonstrate the feasibility of our technique. 1 INTRODUCTION An increasing number of visitors navigate the transportation routes using their smart phones whenever they arrive in an unfamiliar city. By entering the destination, a smart phone also can point out the best route according to the arrival time of trains that are obtained from the Internet. A smart phone usually has a limited screen size to achieve mobility. However, displaying a public transportation network of a modern city requires a large displaying area to be able to clearly show hundreds of stations with labels. Thus, visualizing the whole map on a mobile device is challenging. Drawing is a preferable way to communicate ideas because of its intuitiveness. Although describing routes using text seems reasonable, the interface is not user friendly. Moreover, text cannot show the geographic concepts of stations, which are very useful to visitors. Hence, showing a graphical layout on a smart phone is still popular and preferable. Because zooming out a map to fit the screen size would make its layout and labels too small, current softwares show only a part of the map at a time and passengers have to rebuild the global geographic concepts by themselves. To solve this problem, we introduce a focus+context metro map that highlights the route of a passenger while preventing the remaining parts of the map from being discarded. We introduce a deformation technique to compute focus+context metro maps, where stations are relocated while the connecting edges are untouched. Given the start and destination stations, our system determines the best route using a shortest path algorithm. The edges on the route are magnified to attract human attention while the remainders are shortened to fit into the limited displaying area. Our map layout is designed based on Beck s idea [4], in which the goal is to emphasize topological connectivities of transportation networks. Namely, we require our focus+context layout to consist of four characteristics in order to simplify the route planning and navigation for visitors. These characteristics are (1) straight lines, (2) regularly spaced stations, (3) maximal angles of incident edges, and (4) octilinear edge directions (i.e., vertical, horizontal, or 45-degree diagonal). We call our technique deformation because our computed layout is of high readability. Compared to previous focus+context visualization methods, which are based on distortions [3, 9 11, 22, 25, 26] or magnifying lenses [13,24], our method does not distort edges or labels when high- Yu-Shuen Wang is with National Chiao Tung University, yushuen@cs.nctu.edu.tw. Ming-Te Chi is with National Chengchi University, mtchi@cs.nccu.edu.tw. Manuscript received 31 March 2011; accepted 1 August 2011; posted online 23 October 2011; mailed on 14 October For information on obtaining reprints of this article, please send to: tvcg@computer.org. lighting the route. In addition, it magnifies the whole route instead of only a small region specified by the user, so that frequently moving the magnifying lens is not needed. We show the comparison of the original metro map and the focus+context results using the fisheye method [22] and our technique in Figure 1. We also label the name of each focal station to help visitors navigate the transportation route. Specifically, we (1) constrain labels to lie in octilinear and readable directions, (2) encourage neighboring labels to have coherent positions, and (3) prevent labels and focal edges from occlusions. Given that station and label positions are correlated, previous methods [20, 23] have been developed to solve the layout and the labeling problems together. However, because of the continuous (i.e., station position) and the discrete (i.e., label position) natures, these methods may take hours to compute a map with only hundreds of stations. Apparently, this strategy is not sufficient to show the best route to visitors because the route may change as time goes by. Therefore, we decouple the layout and the labeling problems into separate passes to achieve real-time performance, where stations and label positions are determined by solving continuous and discrete optimization problems, respectively. Figures 1, 2, 7, 9, and 10, as well as the accompanying video, show that our results are still competitive to those of previous methods even though we trade quality for speed. In addition to the focus+context results, our deformation technique also can layout a general metro map by constraining edges to have equal lengths. Compared to the most recent state-of-the-art method [20], our approach achieves high quality with no expensive waiting time (Figure 10). Although our layout may not fit all the requirements in practice because of various purposes and aesthetic tastes, we believe this simplified layout can help cartographers design their desired maps since route complexity has been reduced. 2 RELATED WORKS Focus+context visualization: Focus+context visualization techniques long have been used in interactive exploration of large data sets because of limited displaying areas. The approaches magnify the focal regions while maintaining visibility of the contextual regions. Generally, the methods are either based on optical theory or distortion approaches. The method presented by Wang et al. [24] changes the light directions according to the shapes and positions of the magnifying lens to rasterize images. Lamar et al. [13] deformed 2D images and 3D volumes by warping the texture coordinates that are projected in a homogeneous space to reduce the distortions. They also applied the graphics processing unit to accelerate the rendering speed. Carpendale et al. [3] introduced several distortion patterns, such as stretch orthogonal and nonlinear radial, to magnify the space of focal regions to achieve focus+context visualization. Keahey et al. [9 11] deformed texts or images based on magnification fields and evenly distributed the distortions outward to smooth the visual artifacts. Wang et al. [25, 26] considered material homogeneity in deforming 3D meshes and volumes;

2 Fig. 1. (left) The official metro map of Atlanta city [18]. (middle and right) The focus+context metro maps obtained using the fisheye [22] and our method, respectively. The official map would become too small if it is displayed on a small area. In highlighting the route of a passenger, the fisheye method [22] distorts the map while our technique introduces no visual artifacts. they floated the distortions using homogeneous regions to minimize visual artifacts. However, all the aforementioned methods are presented to handle general contents without considering global structures and characteristics. Applying their methods to compute a focus+context metro map would inevitably result in distortions in which line directions are no longer octilinear and station names are unreadable. Schematic metro map design: Henry Beck created the first schematic metro map of London Underground in Instead of preserving geographic positions of stations, this map emphasizes topological connectivity of the transportation network. Specifically, the transportation lines are straightened, the edges lie only in octilinear directions, and the stations are evenly spaced. Clark [8] argued that travel time through a network is more important than travel distance. He built a road map consisting of freeways and major streets, in which regions are relocated and region distances represent travel times. However, because of the overlapping lines, route planning based on his map is challenging. Strip format maps highlight paths to destinations, which long have been used from recorded history. That is, feature roads are usually drawn at the center and geographic details are linearly omitted outward. Please see [14, 15] for more details and evaluations of strip format maps. Automatic layout of a metro map has become important in recent years because manually drawing an elegant map requires professional skills and is time consuming. To achieve this aim, Hong et al. [6] presented a set of aesthetic criteria for metro map layout and applied the spring algorithm to determine station positions. In their results, however, the stations are not evenly spaced and the geographic information is completely lost. Merrick and Gudmundsson [19] simplified polygonal paths, which represent real world railway networks to construct schematic metro maps. The simplification removes unnecessary complexities and restricts paths lying in a set of directions. However, the method fails to retain the topology, which may lead to misunderstanding. Stott et al. [23] introduced a set of energy terms defining the good line layout and the unambiguity of a label. The hill climbing optimizer then is applied to find effective placement of stations that can minimize the weighted sum of energies. Nöllenburg and Wolff [20] solved station and label positions together using mixed-integer programming, which can compute very high quality results. Their method optimizes the weighted sum specifying the niceness of a layout while fulfilling all the hard constraints such as octilinear lines and minimal edge lengths. However, because the layout and the labeling problems are of different natures, their method is too slow to satisfy the demand of focus+context visualization. 3 METRO MAP DEFORMATION We take the map with geographic station positions as a reference and apply the deformation technique to relocate each station. For simplicity, we call the edges on the route of a passenger focal edges and the others contextual edges. To achieve focus+context visualization, the focal edges are magnified while the contextual edges are shortened to retain the whole map persisting in the bounding space. In addition to highlighting the focal edges, we also constrain the deformed layout to satisfy the characteristics of a metro map. Formally, we denote the map by a graph G = {V,E}, where V = {v 0,v 1,...,v n }, n is the number of stations, v i = (v i,x,v i,y ) R 2 is the node denoting the geographic station position and E is the set of connecting edges. To deform the map, we formulate the constraints, such as regular edge lengths and maximal angles of incident edges, into energy terms. Our goal is to find the unknown station positions that minimize the objective function while the edges are untouched. Our metro map computation consists of two steps. We first compute a set of node positions V where the angles between edges are smooth. We then rotate the edges to octilinear directions and solve for the regularized node positions Ṽ. We deform the layout using this strategy because the octilinear direction is a discrete property and integrating the constraint into a continuous objective function would increase the nonlinearity of the search space, which would make the global optimization more challenging. We describe the energy terms with respect to the presented constraints in Sections 3.1 and 3.2, and show the optimization details in Sections 3.3 and Smooth deformation We introduce several constraints to deform metro maps. Since the constraints such as the edge magnification and the boundary condition may conflict with each other, we solve for the unknown node positions in a least squares sense. Regular edge lengths. To achieve high regularity, we enforce the lengths of focal and contextual edges to be D α and D β (D α > D β ), respectively. By doing this step, the geographic distance between each pair of neighboring stations would apparently disappear. However, we believe the actual distance does not mean too much to passengers because travel time of neighboring stations is usually short in an urban city. To implement this idea, we minimize Ω l = {i, j} E v i V, s i j = (v i v j ) s i jr i j (v i v j ) 2, D v i v j, R i j = where [ cosθi j sinθ i j sinθ i j cosθ i j ], (1)

3 (a) (b) (c) (d) Fig. 2. The flowchart of our system. Given the geographic metro map of Bucharest (a), we first compute a smooth layout where the focal edges are magnified while the contextual edges are shortened to fit the whole map into the screen. We then turn the edges to octilinear directions (c) and compute the label position of each focal station to generate the focus+context metro map (d). Fig. 3. (left) The full angle is evenly divided by each pair of neighboring incident edges to distinguish transportation lines. (right) Because the edges sharing v i are enforced to have identical lengths, for the isosceles triangle {i, j, k}, we can preserve its shape by constraining the relative positions of v i,v j and v k. θ i j is the unknown rotation angle and D = {D α,d β } depends on whether or not the edges should be magnified. Clearly, the scaling factor s i j is applied to constrain the edge lengths. The rotation R i j allows each edge to rotate because we expect the map to have straight transportation lines. Maximal angles of incident edges. In order to distinguish different lines at a station v i, the included angles of incident edges should be maximized. To implement this idea, we set each included angle of neighboring edges {i, j} and {i,k} to θ = 2π/ f (see Figure 3), where f is the number of edges sharing v i. Since the edges are assumed to have an identical length and the included angle θ is known, we achieve this aim by preserving the relative positions of v i, v j and v k. Specifically, denote by N(i) the neighboring edges sharing v i, we introduce the energy term Ω m = v i (v j + u jk + tan( π θ 2 v i V {{i, j},{i,k}} N(i) )u jk ) 2, where u jk = 1 2 (v k v j ). (2) This constraint also can preserve the straightness of each transportation line because θ = π when there are only two incident edges. In this scenario, tan( π θ 2 ) = 0 and Eq. 2 becomes Ω m = v i (v j + v k ), (3) v i V {i, j},{i,k} E such that we can enforce v i, v j and v k to be collinear. Positional constraints. Since Ω m and Ω l represent only the relative node positions, we need at least one positional constraint to determine where the map should be placed. Therefore, we slightly enforce each node close to its original position because our goal is to generate a smooth metro map. This constraint provides the basic geographic guidance to the objective function, such that our system will not place the north station at the south during the deformation. Therefore, we give the energy term Ω g = v i V v i v i 2. (4) In addition to Ω m, Ω l, and Ω g, the optimization of a metro map should retain the deformed nodes inside the bounding space and prevent the edges with no sharing nodes from intersection. To achieve the boundary condition, we expect the x and y coordinates of each node to be within the specified range. To avoid the edge intersections, we prevent the distance of a node v i and an edge { j,k} from being too close. That is, we minimize Ω = Ω m + w l Ω l + w g Ω g x min < v i,x < x max, subject to y min < v i,y < y max, and v i p jk ε, v i V,{ j,k} E, (5) to compute the deformed map, where w l and w g are the weighting factors used to compromise the importance of different criteria; p jk = rv j + (1 r)v k is the closest point to v i ; 0 r 1 is the combination ratio that can be obtained from the point line theory; and (x min,y min ) and (x max,y max ) are the top left and bottom right corners of the bounding space, respectively. We describe the details of solving this constrained optimization in Section Route octilinearity We discretize the edge directions to be vertical, horizontal or 45- degree diagonal based on the deformed smooth metro map. Namely, we rotate each deformed edge v i v j to lie in the nearest octilinear direction and solve the optimization again. We give the energy term Ω o = (ṽ i ṽ j ) f (v i v j ) 2, where ṽ i,ṽ j Ṽ, (6) {i, j} E and f is the function that rotates the edge to the closest octilinear direction. We denote by w o the weighting factor of Ω o and minimize Ω g + w o Ω o subject to the boundary conditions and the edge intersection constraints, which are similar to those in Eq. 5, to obtain the octilinear metro map. Note that Ω m and Ω l are not included in this step because f (v i v j ) already implies regular lengths and the right directions.

4 (a) (b) (c) (d) Fig. 4. We apply a coarse-to-fine strategy to prevent the solution from falling into a local minimum. To compute the focus+context metro map of Taipei (a), we first simplify the geographic map to a coarse graph (b) and compute the coarse-level result (c) by minimizing Eq. 5. We then determine the fine-level result (d) by adding nodes back to the graph and continuing the minimization of Eq. 5 until the system converges. 3.3 Non-linear optimization with constraints In this section, we explain how we minimize the objective function Ω to solve for the deformed node positions V. Similarly, the octilinearized node positions Ṽ can be obtained using this approach. We transform Ω m, Ω l, and Ω g into a linear system AV = b(v ) and solve for the deformed node positions in a matrix form. Because the constraints are more than the unknowns, the coefficient matrix A is overdetermined. Thus, we compute the node positions V = (A T A) 1 A T b in a least squares sense. Note that the rotation matrix R i j in Eq. 1 is unknown, and the boundary conditions and the edge intersection constraints are inequalities. We solve this non-linear optimization using the Gaussian Newton method [16,17], in which the node positions V and the edge rotations R i j are updated iteratively. That is, we consider R i j as additional unknown variables and solve V and R i j alternatingly. The system starts the optimization by setting R i j as an identity matrix and solves for V by computing the linear system. It then updates R i j by computing the rotation angle θ i j that rotates the edge v i v j to v i v j. The integrated energy decreases as V and R i j are updated. We repeat this procedure until the solution converges. To ensure the nodes moving within the bounding space, we also check whether or not the coordinates of v i V are among (x min,y min ) and (x max,y max ) in each iteration. If v i violates the boundary condition, we add an additional energy term Ω b (v i ) = v i,x 2 if v i,x < 0 v i,x x max 2 if v i,x > x max v i,y 2 if v i,y < 0 v i,y y max 2 if v i,y > y max to enforce the node sliding along the respective boundary lines. On the other hand, to avoid edge intersections, we set the edge-node distance to ε if the edge { j,k} and the node v i are too close. Since p jk is linear in v j and v k (see Eq. 5), we can obtain its combination ratio r in the previous step and minimize Ω c (v i jk ) = (v i p jk ) δ i jk(v i p jk ) 2, ε where p jk = r v j + (1 r) v k, δ i jk = v i p jk, (8) to retain the minimal distance ε between v i and p jk. Because { j,k} and v i are only preserved to have at least ε length, two edges may still (7) cross each other if the distances of four endpoints are large. Nevertheless, we can assume that edge intersections do not exist in the original map and check if this error occurs when updating the node positions V. Let us denote the movements of graph nodes in each iteration by V, we scale down V by dividing the vector by 2 until the updated graph satisfies the edge intersection constraints. 3.4 Implementation details We apply the Conjugate gradient method [5] to minimize the objective function, where the solution is iteratively moved to the position with a lower energy. The convergence speed of this method mainly depends on the initial guess. Given that direct solvers such as LU or Cholesky methods require expensive factorizations whenever the system matrix changes, this iterative solver achieves higher performance since the inequality constraints may be frequently violated. As parallel processing is becoming popular in latest mobile devices, we also can parallelize our work to gain more speed because matrix-vector multiplication is the core of this iterative method. We solve the objective function in a least squares sense, which means the constraints are not fully satisfied but only approximated. To fit the important constraints better, we set larger weighting factors to them so that the deviations from these constraints would increase the integrated energies rapidly. We set w g = 0.05, w l = 5, and w o = 10 to all of our experimental results. Clearly, w g controls the positional constraint of each station. Since our goal is only to roughly preserve the geographic information, we set w g to a small value to prevent graph nodes from unmovable. On the other hand, w l and w o preserve the edge lengths and orientations, respectively. They are set to larger values than w g to achieve high regularity of metro maps. The minimization of Eq. 5 may fall into a local minimum due to the discontinuity problem of inequality constraints. Consequently, the obtained results will not be as expected. We introduce a coarse-to-fine approach to solve this problem. Let us denote the simplified version of graph G by G c. Our goal is to solve a rough result by deforming G c to G c, followed by computing the initial state of G based on G c (Figure 4). Specifically, we iteratively remove the node from G while retaining the graph topology to compute G c. At each step, we only consider the node v i that has two neighbors v j and v k and remove v i if the distance from v i to v j v k is minimal. The new edge connecting v j and v k is inserted into the graph immediately to prevent the graph from splitting into multiple components. We repeat the simplification until the shortest distance of v i to v j v k is longer than a threshold. To determine the initial position of V, we add back the removed nodes of G and linearly interpolate their positions based on the vertices of G c. According to the experimental results, this coarse-to-fine strategy

5 Fig. 5. The labels are limited to lie in octilinear directions (left). We assign smaller values to preferential positions because they are expected to be chosen (right). works well in most scenarios although the obtained solution is not guaranteed to be globally optimal. 4 LABELING We label the names of focal stations after the focus+context layout is obtained. To simplify the map complexity, we require the labels to lie in octilinear directions, denoted by L ={east, west, north, south, north-east, south-east, south-west, north-west}. Our goal is to prevent the label occlusions while encouraging neighboring labels to be placed coherently. To implement this idea, we introduce energy terms to measure the niceness of each label according to preference, visibility, and consistency. We then solve for the optimal label positions H = {h 0,h 1,...,h m }, where m is the number of focal stations, by minimizing the following energy terms. Preferential position. Although a label can be placed at any position in L, people tend to prefer some positions to others [7]. To satisfy this preference, we assign smaller energies to preferential positions such that they have higher priorities to be chosen. Figure 5 shows the label position h i H with the corresponding energies Ψ p (h i ) used in our system. Label occlusions. Occlusions would dramatically decrease label readability. Thus, we represent each label h i as a quad q i and apply the quad to detect if h i intersects the other labels or if it is cropped by the screen. Specifically, we set the energy of the label-to-label intersection { 1 if qi intersects q Ψ q (h i,h j ) = j, (9) 0 else where i, j denote arbitrary node indices. Similarly, we set the label-toboundary energy Ψ b (h i ) = 1 if q i intersects any one of the boundary lines. Otherwise, we set Ψ b (h i ) = 0. Spaciousness. To avoid occlusions and to achieve aesthetics, visual masses are encouraged to be of equal weights [21]. We thus label station names at spacious regions. In addition to detecting intersections between nodes, edges, and labels, we expect additional spaces between them. When creating focus+context layouts, this constraint is only applied to the focal edges because the contextual edges do not contain crucial information. To define how spacious the label position is, for each label h i, we magnify its represented quad q i two times larger along the octilinear direction, and denote it as qq i. We then detect where qq i intersects nodes or edges and introduce the energy term Ψ e (h i ) = 1 if t < (t 0.5) if t > if t > 1, where t = c i ṽ i qq i,d, (10) c i is the closest intersection point to the node ṽ i and qq i,d is the diagonal length of qq i. Coherence. We expect the labels to appear at coherent positions to improve readability. In this scenario, people can read the labels Fig. 6. When the two labels h i and h j are placed at the same position, our system preserves them from occlusion by using the spaciousness constraint Ψ e because there must be nodes or edges between them. sequentially without switching their attention. The coherence makes our focus+context map more intuitive. Thus, we add the energy term { 0 if hi = h Ψ s (h i,h j ) = j, where {i, j} E, (11) 1 else to enforce neighboring labels to be placed at the same position. To satisfy all the aforementioned criteria, we integrate the energy terms and search for the set H of label positions that minimizes Ψ = (w p Ψ p (h i ) + w b Ψ b (h i ) + w e Ψ e (h i ))+ h i H h i,h j H w q Ψ q (h i,h j ) + {i, j} E w s Ψ s (h i,h j ). (12) The weighting factors are specified to indicate the importance of each term. We set w p = w s = 1, w e = w q = 10, and w b = 20 to all of our experimental results. Given that the screen of a mobile device is small, the labels shown in our focus+context map should be large in contrast to the layout, which is very different to a general metro map. This requirement, however, makes the occlusion preservation more challenging, especially when there are many focal edges in a complicated map. We set w b to the largest value because labels must appear in the screen. In contrast, the nodes, edges, and labels are potentially occluded if long station names are displayed in a complicated map. Due to the discrete nature, we solve this optimization problem using the graph cuts method [2], where Ψ p, Ψ b, and Ψ e are data terms, whereas Ψ q and Ψ s are smoothness terms. The data terms consider each label position individually such as preference, occlusions to nodes, edges, and cropping by the bounding space. On the other hand, the smoothness terms preserve the label relationships, including the coherent label positions and label-to-label occlusions. As pointed out by Boykov et al. [1, 2, 12], solving the objective function using graph cuts requires the smoothness terms to satisfy Ψ(a,a) + Ψ(b,b) Ψ(a,b) + Ψ(b,a), where a,b L. However, the label-to-label occlusion term Ψ q may violate this constraint because Ψ q (a,a) or Ψ q (b,b) is large if the labels occlude each other. Therefore, in our implementation, we set zero energies to the smoothness term if the two labels are placed at the same position, that is, Ψ q (a,a) = Ψ q (b,b) = 0. Although in this scenario the smoothness term cannot prevent the two labels from occlusion if they have the same position, we found this kind of occlusion infrequently happens because there must be nodes or edges between them and the spaciousness constraint Ψ e would contribute (Figure 6). 5 RESULTS AND DISCUSSIONS We implemented the aforementioned algorithm and ran the program on a desktop PC with Core i7 2.66GHz CPU. Most of the geographic metro maps are obtained from Stott et al. [23]. Our system relocates the stations based on the deformation technique. It also computes the label positions according to the station names and the user-specified font size. To highlight the route of a visitor, we magnify the focal edges while shrinking the contextual edges to display the whole map

6 # coarse # coarse deform labeling city # nodes # edges nodes ndges (sec.) (sec.) Atlanta San Francisco Bucharest Taipei Stockholm Mexico City Sydney Table 1. Metro map information with the average timing statistics. on a screen. We also render the contextual edges with lighter and less saturated colors to enhance visual difference. We show the user oriented results in Figures 1, 2, 7, and 9. By limiting all edges to have identical length, we also can compute general metro maps that are commonly used in public transportation systems. Figure 10 shows the comparison of Sydney railway maps determined using [20] and our system. Note that the method of [20] takes hours to obtain the result, whereas our system takes only a second. We show the manipulation of our focus+context metro maps in the accompany video. By selecting the start and destination stations, our system deforms the map to highlight the travel route efficiently. The animated transitions show how the map is iteratively updated. Although the transitions are not perfectly smooth because of the octilinear edge constraints, the results are still visually pleasing. Basically, the deformation time depends on the complexity of a metro map, and the difference between the geographic and the final layouts. On the other hand, the labeling time relies on the number of labels. Thanks to the well-defined energy terms, our system achieves real-time performance when computing focus+context metro maps, which is able to show instant messages to visitors. We show the map information with the average timing statistics in Table 1. Map aspect ratios. Given a geographic map, we normalize the map into the bounding space B. In addition, each node is constrained to be within B during the deformation of a focus+context layout. We then uniformly scale up the obtained metro map to fit the target screen resolution. Since the nodes and edges are represented in a vector format, the upsampling does not introduce blurring artifacts. We allow the width and height of B to be adjusted because of the various aspect ratios of mobile devices. It means the edges may have different orientations when the bounding space is changed to prevent the stretching artifacts. Figure 7 shows the layouts with different aspect ratios. Focal and contextual edge lengths. We set the focal edges two times longer than the contextual edges. Because the displaying area is limited, the more focal edges would complicate the visualization more. In the worst case, all the edges are magnified and the geographic information of a layout is given up to satisfy the edge length requirements 1. Therefore, we strive to solve this problem by retaining the sum of edge lengths when computing a metro map. Namely, in Eq. 1, we set D α = 2D β and solve N α D α + N β D β = v i v j (13) {i, j} E to determine D α and D β, where N α and N β are the number of focal and contextual edges, respectively. Naturally, users can determine the values of D α and D β by input parameters to control the results, although we found this simple setting works well in most scenarios. The deformed edge lengths may deviate from D α or D β even though we minimize Ω l (see Eq. 1) to achieve map regularity. This problem is due to conflicts between the edge lengths and the graph topology. As a result, the edges can only extend or contract because the graph connectivities are untouched. Limitations. Apparently, focus+context methods inevitably introduce distortions or occlusions. We do not claim that our focus+context layouts are fully accurate, but rather we show that it can minimize the 1 This situation may not happen if only source and target stations are chosen to determine the best route. Fig. 7. The focus+context metro maps of San Francisco. They are determined based on different aspect ratios. Fig. 8. The focal transportation line is not straight because of limited width of the displaying area. inconvenience of distortions to visitors. To utilize the limited displaying area more effectively, our approach does not maintain global cardinal directionality of transportation lines. It also regularizes the space of neighboring stations such that the geographic or time distance of the route cannot be obtained from the map. These distortions are not problematic because passengers do not rely on cardinal directionality when taking trains or switching transportation lines. We admit that our technique is not sufficient to handle general maps, but geographic information is not the main concern in metro map visualization. What visitors do care about is network navigation and our focus+context layout provides sufficient information. Moreover, since our system achieves real-time performance, passengers can go back and forth to observe the absolute geographies and the highlighted routes easily. Our focus+context metro map may not be visually pleasing when there are too many focal edges lying in the same direction. Figure 8 shows an example in which the focal edges mainly lie in horizontal direction. Because the width of the displaying area is limited, the magnified transportation line bends several times to retain the long length even though we do preserve the line straightness using Eq. 3. In addition, we compute the layout and the labeling problems separately. The demanded space from the deformation step may not be enough to those stations with long labels. As a result, the occlusion may occur regardless of the position the label is placed. Under real-time constraints, it would be good if the station and the label positions could be solved together such that all constraints can be considered simultaneously. We leave this issue to future work.

7 Fig. 9. From top to bottom are the metro maps of Stockholm, Mexico City and Sydney. (left) The geographic layouts. (middle and right) The focus+context results are automatically determined using our system. 6 C ONCLUSIONS AND FUTURE WORKS We have introduced the concept of focus+context layout for metro map visualization. This technique is particularly useful when visualizing a complicated map on a mobile device because unnecessary transportation lines are abstracted. By entering the start and destination stations, our system determines the user-oriented layout fully automatically. The best route to the destination of a visitor is magnified. The names of focal stations are labeled. In addition to highlighting the focal route, the contextual parts of the map are retained to persist within the screen to show the basic geographic information. Our method preserves the metro map criteria when relocating stations such that the visual artifacts are minimized. The experimental results verify our focus+context visualization technique. We have successfully tested our program on a desktop PC. Given that the algorithm is designed for displaying maps on a small area, we thus plan to implement our method on a mobile device and raise the technique to a product-level system.

8 Fig. 10. We show the general metro maps of Sydney determined using [20] (left) and our method (right). Note that the blue line from Bondi Junction (the rightmost station) to Town Hall inevitably intersects other lines because of the non-planar map structure. The stations on the line are projected on the 2D space and they are relocated as other stations. ACKNOWLEDGMENTS We thank reviewers for their insightful and valuable comments. We also thank Chih-hung Liu, Ming-Yen Kuo and Ssu-Hsin Huang for running the experiments. This work was supported in part by the National Science Council (Contracts NSC E and NSC E ). REFERENCES [1] Y. Boykov and V. Kolmogorov. An experimental comparison of mincut/max-flow algorithms for energy minimization in vision. IEEE Trans. Pattern Anal. Mach. Intell., 26: , [2] Y. Boykov, O. Veksler, and R. Zabih. Fast approximate energy minimization via graph cuts. IEEE Trans. Pattern Anal. Mach. Intell., 23: , [3] M. S. T. Carpendale, D. J. Cowperthwaite, and F. D. Fracchia. Extending distortion viewing from 2d to 3d. IEEE Comput. Graph. Appl., 17:42 51, [4] K. Garland. Mr. Beck s underground map. Capital Transport, [5] M. R. Hestenes and E. Stiefel. Methods of conjugate gradients for solving linear systems. Journal of Research of the National Bureau of Standards, 49. [6] S.-H. Hong, D. Merrick, and H. A. D. do Nascimento. Automatic visualisation of metro maps. J. Vis. Lang. Comput., 17: , [7] E. Imhof. Positioning names on maps. The American Cartographer, 2: [8] J. C. James. Time-distance transformations of transportation networks. Geographical Analysis, 9: , [9] T. A. Keahey. The generalized detail in-context problem. In Proceedings of IEEE Information Visualization Symposium, pages 44 51, [10] T. A. Keahey and E. L. Robertson. Techniques for non-linear magnification transformations. In Proceedings of IEEE Information Visualization Symposium, pages 38 45, [11] T. A. Keahey and E. L. Robertson. Nonlinear magnification fields. In Proceedings of IEEE Information Visualization Symposium, pages 51 58, [12] V. Kolmogorov and R. Zabih. What energy functions can be minimized via graph cuts? In Proceedings of the 7th European Conference on Computer Vision-Part III, ECCV 02, pages 65 81, [13] E. LaMar, B. Hamann, and K. I. Joy. A magnification lens for interactive volume visualization. In Proceedings of Pacific Graphics, pages , [14] A. M. MacEachren. A linear view of the world: Strip maps as a unique form of cartographic representation. American Cartographer, 13(1):7 25, [15] A. M. MacEachren and G. B. Johnson. The evolution, application and implications of strip format travel maps. The Cartographic Journal, 24: , [16] K. Madsen, H. B. Nielsen, and O. Tingleff. Methods for Non-Linear Least Squares Problems. Informatics and Mathematical Modelling, Technical University of Denmark, second edition, [17] K. Madsen, H. B. Nielsen, and O. Tingleff. Optimization with Constraints. Informatics and Mathematical Modelling, Technical University of Denmark, second edition, [18] MARTA. Atlanta rail map. Available online at [19] D. Merrick and J. Gudmundsson. Path simplification for metro map layout. In Proceedings of the 14th international conference on Graph drawing, GD 06, pages , [20] M. Nöllenburg and A. Wolff. Drawing and labeling high-quality metro maps by mixed-integer programming. IEEE Transactions on Visualization and Computer Graphics, 17: , [21] D. H. Parker. The principles of aesthetics. Nabu Press, [22] M. Sarkar and M. H. Brown. Graphical fisheye views. Commun. ACM, 37:73 83, [23] J. Stott, P. Rodgers, J. C. Martinez-Ovando, and S. G. Walker. Automatic metro map layout using multicriteria optimization. IEEE Transactions on Visualization and Computer Graphics, 17: , [24] L. Wang, Y. Zhao, K. Mueller, and A. E. Kaufman. The magic volume lens: An interactive focus+context technique for volume rendering. In Proceedings of IEEE Visualization Conference, pages , [25] Y.-S. Wang, T.-Y. Lee, and C.-L. Tai. Focus+context visualization with distortion minimization. IEEE Transactions on Visualization and Computer Graphics, 14(6): , [26] Y.-S. Wang, C. Wang, T.-Y. Lee, and K.-L. Ma. Feature-preserving volume data reduction and focus+context visualization. IEEE Transactions on Visualization and Computer Graphics, 17: , 2011.