Focus+Context Metro Maps1Yu-Shuen Wang 2Ming-Te Chi

National Chiao Tung University1 National Chengchi University2

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 obtainedfrom the arrival time of trains, is highlighted. The stations on the route enjoy larger spaces, whereas the other stations are renderedsmaller and closer to fit the whole map into a screen. To simplify the navigation and route planning for visitors, we formulate variousmap characteristics such as octilinear transportation lines and regular station distances into energy terms. We then solve for theoptimal layout in a least squares sense. In addition, we label the names of stations that are on the route of a passenger accordingto human preferences, occlusions, and consistencies of label positions using the graph cuts method. Our system achieves real-timeperformance by being able to report instant information because of the carefully designed energy terms. We apply our method tolayout 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 routesusing their smart phones whenever they arrive in an unfamiliar city.By entering the destination, a smart phone also can point out the bestroute according to the arrival time of trains that are obtained from theInternet. A smart phone usually has a limited screen size to achievemobility. However, displaying a public transportation network of amodern city requires a large displaying area to be able to clearly showhundreds of stations with labels. Thus, visualizing the whole map ona mobile device is challenging.

Drawing is a preferable way to communicate ideas because of itsintuitiveness. Although describing routes using text seems reasonable,the interface is not user friendly. Moreover, text cannot show the geo-graphic concepts of stations, which are very useful to visitors. Hence,showing a graphical layout on a smart phone is still popular and prefer-able. Because zooming out a map to fit the screen size would make itslayout and labels too small, current softwares show only a part of themap at a time and passengers have to rebuild the global geographicconcepts by themselves. To solve this problem, we introduce a fo-cus+context metro map that highlights the route of a passenger whilepreventing the remaining parts of the map from being discarded.

We introduce a deformation technique to compute focus+contextmetro maps, where stations are relocated while the connecting edgesare untouched. Given the start and destination stations, our systemdetermines the best route using a shortest path algorithm. The edgeson the route are magnified to attract human attention while the re-mainders are shortened to fit into the limited displaying area. Ourmap layout is designed based on Beck’s idea [4], in which the goalis to emphasize topological connectivities of transportation networks.Namely, we require our focus+context layout to consist of four charac-teristics in order to simplify the route planning and navigation for vis-itors. These characteristics are (1) straight lines, (2) regularly spacedstations, (3) maximal angles of incident edges, and (4) octilinear edgedirections (i.e., vertical, horizontal, or 45-degree diagonal). We callour technique deformation because our computed layout is of highreadability. Compared to previous focus+context visualization meth-ods, which are based on distortions [3, 9–11, 22, 25, 26] or magnifyinglenses [13,24], our method does not distort edges or labels when high-

• Yu-Shuen Wang is with National Chiao Tung University, E-mail:yushuen@cs.nctu.edu.tw.

• Ming-Te Chi is with National Chengchi University, E-mail:mtchi@cs.nccu.edu.tw.

Manuscript received 31 March 2011; accepted 1 August 2011; posted online23 October 2011; mailed on 14 October 2011.For information on obtaining reprints of this article, please sendemail to: tvcg@computer.org.

lighting the route. In addition, it magnifies the whole route insteadof only a small region specified by the user, so that frequently mov-ing the magnifying lens is not needed. We show the comparison ofthe original metro map and the focus+context results using the fisheyemethod [22] and our technique in Figure 1.

We also label the name of each focal station to help visitors navi-gate the transportation route. Specifically, we (1) constrain labels tolie in octilinear and readable directions, (2) encourage neighboring la-bels to have coherent positions, and (3) prevent labels and focal edgesfrom occlusions. Given that station and label positions are correlated,previous methods [20, 23] have been developed to solve the layoutand the labeling problems together. However, because of the continu-ous (i.e., station position) and the discrete (i.e., label position) natures,these methods may take hours to compute a map with only hundredsof stations. Apparently, this strategy is not sufficient to show the bestroute to visitors because the route may change as time goes by. There-fore, we decouple the layout and the labeling problems into separatepasses to achieve real-time performance, where stations and label po-sitions are determined by solving continuous and discrete optimizationproblems, respectively. Figures 1, 2, 7, 9, and 10, as well as the ac-companying video, show that our results are still competitive to thoseof previous methods even though we trade quality for speed.

In addition to the focus+context results, our deformation techniquealso can layout a general metro map by constraining edges to haveequal lengths. Compared to the most recent state-of-the-art method[20], our approach achieves high quality with no expensive waitingtime (Figure 10). Although our layout may not fit all the requirementsin practice because of various purposes and aesthetic tastes, we believethis simplified layout can help cartographers design their desired mapssince route complexity has been reduced.

2 RELATED WORKS

Focus+context visualization: Focus+context visualization tech-niques long have been used in interactive exploration of large data setsbecause of limited displaying areas. The approaches magnify the focalregions while maintaining visibility of the contextual regions. Gener-ally, the methods are either based on optical theory or distortion ap-proaches. The method presented by Wang et al. [24] changes the lightdirections according to the shapes and positions of the magnifying lensto rasterize images. Lamar et al. [13] deformed 2D images and 3D vol-umes by warping the texture coordinates that are projected in a homo-geneous space to reduce the distortions. They also applied the graph-ics processing unit to accelerate the rendering speed. Carpendale etal. [3] introduced several distortion patterns, such as stretch orthogonaland nonlinear radial, to magnify the space of focal regions to achievefocus+context visualization. Keahey et al. [9–11] deformed texts orimages based on magnification fields and evenly distributed the distor-tions outward to smooth the visual artifacts. Wang et al. [25, 26] con-sidered material homogeneity in deforming 3D meshes and volumes;

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 ourmethod, respectively. The official map would become too small if it is displayed on a small area. In highlighting the route of a passenger, the fisheyemethod [22] distorts the map while our technique introduces no visual artifacts.

they floated the distortions using homogeneous regions to minimize vi-sual artifacts. However, all the aforementioned methods are presentedto handle general contents without considering global structures andcharacteristics. Applying their methods to compute a focus+contextmetro map would inevitably result in distortions in which line direc-tions are no longer octilinear and station names are unreadable.

Schematic metro map design: Henry Beck created the firstschematic metro map of London Underground in 1933. Instead of pre-serving geographic positions of stations, this map emphasizes topolog-ical connectivity of the transportation network. Specifically, the trans-portation lines are straightened, the edges lie only in octilinear direc-tions, and the stations are evenly spaced. Clark [8] argued that traveltime through a network is more important than travel distance. He builta road map consisting of freeways and major streets, in which regionsare relocated and region distances represent travel times. However,because of the overlapping lines, route planning based on his map ischallenging. Strip format maps highlight paths to destinations, whichlong have been used from recorded history. That is, feature roads areusually drawn at the center and geographic details are linearly omittedoutward. Please see [14, 15] for more details and evaluations of stripformat maps.

Automatic layout of a metro map has become important in recentyears because manually drawing an elegant map requires professionalskills and is time consuming. To achieve this aim, Hong et al. [6]presented a set of aesthetic criteria for metro map layout and appliedthe spring algorithm to determine station positions. In their results,however, the stations are not evenly spaced and the geographic infor-mation is completely lost. Merrick and Gudmundsson [19] simplifiedpolygonal paths, which represent real world railway networks to con-struct schematic metro maps. The simplification removes unnecessarycomplexities and restricts paths lying in a set of directions. However,the method fails to retain the topology, which may lead to misunder-standing. Stott et al. [23] introduced a set of energy terms defining thegood line layout and the unambiguity of a label. The hill climbing op-timizer then is applied to find effective placement of stations that canminimize the weighted sum of energies. Nollenburg and Wolff [20]solved station and label positions together using mixed-integer pro-gramming, which can compute very high quality results. Their methodoptimizes the weighted sum specifying the niceness of a layout whilefulfilling all the hard constraints such as octilinear lines and minimaledge lengths. However, because the layout and the labeling problemsare of different natures, their method is too slow to satisfy the demandof focus+context visualization.

3 METRO MAP DEFORMATION

We take the map with geographic station positions as a reference andapply the deformation technique to relocate each station. For simplic-ity, we call the edges on the route of a passenger focal edges and theothers contextual edges. To achieve focus+context visualization, thefocal edges are magnified while the contextual edges are shortenedto retain the whole map persisting in the bounding space. In addi-tion to highlighting the focal edges, we also constrain the deformedlayout to satisfy the characteristics of a metro map. Formally, we de-note the map by a graph G = V,E, where V = v0,v1, ...,vn, n isthe number of stations, vi = (vi,x,vi,y) ∈ ℜ2 is the node denoting thegeographic station position and E is the set of connecting edges. Todeform the map, we formulate the constraints, such as regular edgelengths and maximal angles of incident edges, into energy terms. Ourgoal is to find the unknown station positions that minimize the objec-tive function while the edges are untouched.

Our metro map computation consists of two steps. We first computea set of node positions V′ where the angles between edges are smooth.We then rotate the edges to octilinear directions and solve for the reg-ularized node positions V. We deform the layout using this strategybecause the octilinear direction is a discrete property and integratingthe constraint into a continuous objective function would increase thenonlinearity of the search space, which would make the global opti-mization more challenging. We describe the energy terms with respectto the presented constraints in Sections 3.1 and 3.2, and show the op-timization details in Sections 3.3 and 3.4.

3.1 Smooth deformationWe introduce several constraints to deform metro maps. Since theconstraints such as the edge magnification and the boundary conditionmay conflict with each other, we solve for the unknown node positionsin a least squares sense.

Regular edge lengths. To achieve high regularity, we enforce thelengths of focal and contextual edges to be Dα and Dβ (Dα > Dβ ),respectively. By doing this step, the geographic distance between eachpair of neighboring stations would apparently disappear. However,we believe the actual distance does not mean too much to passengersbecause travel time of neighboring stations is usually short in an urbancity. To implement this idea, we minimize

Ω` = ∑i, j∈E

∣∣(v′i−v′j)− si jRi j(vi−v j)∣∣2 , where

v′i ∈ V′, si j =D

|vi−v j|, Ri j =

[cosθi j −sinθi jsinθi j cosθi j

], (1)

(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 edgesare magnified while the contextual edges are shortened to fit the whole map into the screen. We then turn the edges to octilinear directions (c) andcompute 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 neighboringincident edges to distinguish transportation lines. (right) Because theedges sharing vi are enforced to have identical lengths, for the isoscelestriangle i, j,k, we can preserve its shape by constraining the relativepositions of vi,v j and vk.

θi j is the unknown rotation angle and D = Dα ,Dβ depends onwhether or not the edges should be magnified. Clearly, the scalingfactor si j is applied to constrain the edge lengths. The rotation Ri jallows each edge to rotate because we expect the map to have straighttransportation lines.

Maximal angles of incident edges. In order to distinguish differ-ent lines at a station vi, the included angles of incident edges shouldbe maximized. To implement this idea, we set each included angle ofneighboring edges i, j and i,k to θ = 2π/ f (see Figure 3), wheref is the number of edges sharing vi. Since the edges are assumed tohave an identical length and the included angle θ is known, we achievethis aim by preserving the relative positions of vi, v j and vk. Specif-ically, denote by N(i) the neighboring edges sharing vi, we introducethe energy term

Ωm = ∑v′i∈V′

∑i, j,i,k∈N(i)

∣∣∣∣v′i− (v′j +u′jk + tan(π−θ

2)u′jk)

∣∣∣∣2 ,where u′jk =

12(v′k−v′j). (2)

This constraint also can preserve the straightness of each transporta-tion line because θ = π when there are only two incident edges. Inthis scenario, tan( π−θ

2 ) = 0 and Eq. 2 becomes

Ωm = ∑v′i∈V′

∑i, j,i,k∈E

∣∣∣∣v′i− 12(v′j +v′k)

∣∣∣∣2 , (3)

such that we can enforce v′i, v′j and v′k to be collinear.

Positional constraints. Since Ωm and Ω` represent only the rela-tive node positions, we need at least one positional constraint to deter-mine where the map should be placed. Therefore, we slightly enforceeach node close to its original position because our goal is to generatea smooth metro map. This constraint provides the basic geographicguidance to the objective function, such that our system will not placethe north station at the south during the deformation. Therefore, wegive the energy term

Ωg = ∑v′i∈V′|v′i−vi|2. (4)

In addition to Ωm, Ω`, and Ωg, the optimization of a metro mapshould retain the deformed nodes inside the bounding space and pre-vent the edges with no sharing nodes from intersection. To achieve theboundary condition, we expect the x and y coordinates of each nodeto be within the specified range. To avoid the edge intersections, weprevent the distance of a node v′i and an edge j,k from being tooclose. That is, we minimize

Ω = Ωm +w`Ω`+wgΩg subject to

xmin < v′i,x < xmax, ymin < v′i,y < ymax,

and v′i−p′jk ≥ ε, v′i ∈ V′, j,k ∈ E, (5)

to compute the deformed map, where w` and wg are the weight-ing 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 com-bination ratio that can be obtained from the point line theory; and(xmin,ymin) and (xmax,ymax) are the top left and bottom right cornersof the bounding space, respectively. We describe the details of solvingthis constrained optimization in Section 3.3.

3.2 Route octilinearityWe 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 octilineardirection and solve the optimization again. We give the energy term

Ωo = ∑i, j∈E

|(vi− v j)− f (v′i−v′j)|2, where vi, v j ∈ V, (6)

and f is the function that rotates the edge to the closest octilinear di-rection. We denote by wo the weighting factor of Ωo and minimizeΩg +woΩo subject to the boundary conditions and the edge intersec-tion constraints, which are similar to those in Eq. 5, to obtain theoctilinear metro map. Note that Ωm and Ω` are not included in thisstep because f (v′i− v′j) already implies regular lengths and the rightdirections.

(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 mapof 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 thendetermine 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 constraintsIn this section, we explain how we minimize the objective functionΩ to solve for the deformed node positions V′. Similarly, the octi-linearized node positions V can be obtained using this approach. Wetransform Ωm, Ω`, and Ωg into a linear system AV′ = b(V′) and solvefor the deformed node positions in a matrix form. Because the con-straints are more than the unknowns, the coefficient matrix A is over-determined. Thus, we compute the node positions V′=(AT A)−1AT b′in a least squares sense.

Note that the rotation matrix Ri j in Eq. 1 is unknown, and theboundary conditions and the edge intersection constraints are inequali-ties. We solve this non-linear optimization using the Gaussian Newtonmethod [16,17], in which the node positions V′ and the edge rotationsRi j are updated iteratively. That is, we consider Ri j as additional un-known variables and solve V′ and Ri j alternatingly. The system startsthe optimization by setting Ri j as an identity matrix and solves for V′by computing the linear system. It then updates Ri j by computing therotation angle θi j that rotates the edge vi−v j to v′i−v′j . The integratedenergy decreases as V′ and Ri j are updated. We repeat this procedureuntil the solution converges.

To ensure the nodes moving within the bounding space, we alsocheck whether or not the coordinates of v′i ∈V′ are among (xmin,ymin)and (xmax,ymax) in each iteration. If vi violates the boundary condi-tion, we add an additional energy term

Ωb(v′i) =

|v′i,x|2 if v′i,x < 0|v′i,x− xmax|2 if v′i,x > xmax

|v′i,y|2 if v′i,y < 0|v′i,y− ymax|2 if v′i,y > ymax

(7)

to enforce the node sliding along the respective boundary lines. On theother hand, to avoid edge intersections, we set the edge-node distanceto ε if the edge j,k and the node v′i are too close. Since p′jk is linearin v′j and v′k (see Eq. 5), we can obtain its combination ratio r in theprevious step and minimize

Ωc(v′i→ jk) =∣∣(v′i−p′jk)−δi→ jk(vi−p jk)

∣∣2,where p jk = r ·v j +(1− r) ·vk, δi→ jk =

ε

|vi−p jk|, (8)

to retain the minimal distance ε between v′i and p′jk. Because j,kand v′i are only preserved to have at least ε length, two edges may still

cross each other if the distances of four endpoints are large. Neverthe-less, we can assume that edge intersections do not exist in the originalmap and check if this error occurs when updating the node positionsV′. 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 updatedgraph satisfies the edge intersection constraints.

3.4 Implementation detailsWe apply the Conjugate gradient method [5] to minimize the objectivefunction, where the solution is iteratively moved to the position with alower energy. The convergence speed of this method mainly dependson the initial guess. Given that direct solvers such as LU or Choleskymethods require expensive factorizations whenever the system matrixchanges, this iterative solver achieves higher performance since the in-equality constraints may be frequently violated. As parallel processingis becoming popular in latest mobile devices, we also can parallelizeour work to gain more speed because matrix-vector multiplication isthe core of this iterative method.

We solve the objective function in a least squares sense, whichmeans the constraints are not fully satisfied but only approximated. Tofit the important constraints better, we set larger weighting factors tothem so that the deviations from these constraints would increase theintegrated energies rapidly. We set wg = 0.05, w` = 5, and wo = 10 toall of our experimental results. Clearly, wg controls the positional con-straint of each station. Since our goal is only to roughly preserve thegeographic information, we set wg to a small value to prevent graphnodes from unmovable. On the other hand, w` and wo preserve theedge lengths and orientations, respectively. They are set to larger val-ues than wg to achieve high regularity of metro maps.

The minimization of Eq. 5 may fall into a local minimum due tothe discontinuity problem of inequality constraints. Consequently, theobtained results will not be as expected. We introduce a coarse-to-fineapproach to solve this problem. Let us denote the simplified versionof graph G by Gc. Our goal is to solve a rough result by deformingGc 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 whileretaining the graph topology to compute Gc. At each step, we onlyconsider the node vi that has two neighbors v j and vk and remove viif the distance from vi to v jvk is minimal. The new edge connectingv j and vk is inserted into the graph immediately to prevent the graphfrom splitting into multiple components. We repeat the simplificationuntil the shortest distance of vi to v jvk is longer than a threshold. Todetermine the initial position of V′, we add back the removed nodesof G and linearly interpolate their positions based on the vertices ofG′c. According to the experimental results, this coarse-to-fine strategy

Fig. 5. The labels are limited to lie in octilinear directions (left). We as-sign smaller values to preferential positions because they are expectedto be chosen (right).

works well in most scenarios although the obtained solution is notguaranteed to be globally optimal.

4 LABELING

We label the names of focal stations after the focus+context layout isobtained. To simplify the map complexity, we require the labels tolie in octilinear directions, denoted by L =east, west, north, south,north-east, south-east, south-west, north-west. Our goal is to pre-vent the label occlusions while encouraging neighboring labels to beplaced coherently. To implement this idea, we introduce energy termsto measure the niceness of each label according to preference, visi-bility, and consistency. We then solve for the optimal label positionsH = h0,h1, ...,hm, where m is the number of focal stations, by min-imizing the following energy terms.

Preferential position. Although a label can be placed at any posi-tion in L, people tend to prefer some positions to others [7]. To satisfythis preference, we assign smaller energies to preferential positionssuch that they have higher priorities to be chosen. Figure 5 shows thelabel position hi ∈ H with the corresponding energies Ψp(hi) used inour system.

Label occlusions. Occlusions would dramatically decrease labelreadability. Thus, we represent each label hi as a quad qi and apply thequad to detect if hi intersects the other labels or if it is cropped by thescreen. Specifically, we set the energy of the label-to-label intersection

Ψq(hi,h j) =

1 if qi intersects q j0 else , (9)

where i, j denote arbitrary node indices. Similarly, we set the label-to-boundary energy Ψb(hi) = 1 if qi intersects any one of the boundarylines. Otherwise, we set Ψb(hi) = 0.

Spaciousness. To avoid occlusions and to achieve aesthetics, vi-sual masses are encouraged to be of equal weights [21]. We thus labelstation names at spacious regions. In addition to detecting intersec-tions between nodes, edges, and labels, we expect additional spacesbetween them. When creating focus+context layouts, this constraintis only applied to the focal edges because the contextual edges do notcontain crucial information. To define how spacious the label positionis, for each label hi, we magnify its represented quad qi two timeslarger along the octilinear direction, and denote it as qqi. We thendetect where qqi intersects nodes or edges and introduce the energyterm

Ψe(hi) =

1 if t < 0.51−2(t−0.5) if t > 0.50 if t > 1

, where t =|ci− vi|

qqi,d, (10)

ci is the closest intersection point to the node vi and qqi,d is the diag-onal length of qqi.

Coherence. We expect the labels to appear at coherent positionsto improve readability. In this scenario, people can read the labels

Fig. 6. When the two labels hi and h j are placed at the same position,our system preserves them from occlusion by using the spaciousnessconstraint Ψe because there must be nodes or edges between them.

sequentially without switching their attention. The coherence makesour focus+context map more intuitive. Thus, we add the energy term

Ψs(hi,h j) =

0 if hi = h j1 else , where i, j ∈ E, (11)

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

Ψ = ∑hi∈H

(wpΨp(hi)+wbΨb(hi)+weΨe(hi))+

∑hi,h j∈H

wqΨq(hi,h j)+ ∑i, j∈E

wsΨs(hi,h j). (12)

The weighting factors are specified to indicate the importance of eachterm. We set wp = ws = 1, we = wq = 10, and wb = 20 to all of ourexperimental results. Given that the screen of a mobile device is small,the labels shown in our focus+context map should be large in contrastto the layout, which is very different to a general metro map. Thisrequirement, however, makes the occlusion preservation more chal-lenging, especially when there are many focal edges in a complicatedmap. We set wb to the largest value because labels must appear inthe screen. In contrast, the nodes, edges, and labels are potentiallyoccluded if long station names are displayed in a complicated map.

Due to the discrete nature, we solve this optimization problemusing the graph cuts method [2], where Ψp, Ψb, and Ψe are dataterms, whereas Ψq and Ψs are smoothness terms. The data termsconsider each label position individually such as preference, occlu-sions to nodes, edges, and cropping by the bounding space. Onthe other hand, the smoothness terms preserve the label relation-ships, including the coherent label positions and label-to-label occlu-sions. As pointed out by Boykov et al. [1, 2, 12], solving the objec-tive function using graph cuts requires the smoothness terms to sat-isfy Ψ(a,a)+Ψ(b,b) ≤Ψ(a,b)+Ψ(b,a), where a,b ∈ L. However,the label-to-label occlusion term Ψq may violate this constraint be-cause Ψ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 smooth-ness 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 smoothnessterm cannot prevent the two labels from occlusion if they have thesame position, we found this kind of occlusion infrequently happensbecause there must be nodes or edges between them and the spacious-ness constraint Ψe would contribute (Figure 6).

5 RESULTS AND DISCUSSIONS

We implemented the aforementioned algorithm and ran the programon a desktop PC with Core i7 2.66GHz CPU. Most of the geographicmetro maps are obtained from Stott et al. [23]. Our system relocatesthe stations based on the deformation technique. It also computes thelabel positions according to the station names and the user-specifiedfont size. To highlight the route of a visitor, we magnify the focaledges while shrinking the contextual edges to display the whole map

# coarse # coarse deform labelingcity # nodes # edges nodes ndges (sec.) (sec.)

Atlanta 38 37 19 18 0.058 0.074San Francisco 43 44 24 25 0.090 0.050

Bucharest 44 45 25 26 0.090 0.066Taipei 89 91 44 46 0.195 0.106

Stockholm 100 100 48 48 0.229 0.075Mexico City 147 164 60 77 0.815 0.046

Sydney 173 180 52 59 0.816 0.082

Table 1. Metro map information with the average timing statistics.

on a screen. We also render the contextual edges with lighter andless saturated colors to enhance visual difference. We show the useroriented results in Figures 1, 2, 7, and 9. By limiting all edges tohave identical length, we also can compute general metro maps thatare commonly used in public transportation systems. Figure 10 showsthe comparison of Sydney railway maps determined using [20] and oursystem. 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 theaccompany video. By selecting the start and destination stations, oursystem deforms the map to highlight the travel route efficiently. Theanimated transitions show how the map is iteratively updated. Al-though the transitions are not perfectly smooth because of the octilin-ear edge constraints, the results are still visually pleasing. Basically,the deformation time depends on the complexity of a metro map, andthe difference between the geographic and the final layouts. On theother hand, the labeling time relies on the number of labels. Thanks tothe well-defined energy terms, our system achieves real-time perfor-mance when computing focus+context metro maps, which is able toshow instant messages to visitors. We show the map information withthe average timing statistics in Table 1.

Map aspect ratios. Given a geographic map, we normalize the mapinto the bounding space ∂B. In addition, each node is constrained to bewithin ∂B during the deformation of a focus+context layout. We thenuniformly scale up the obtained metro map to fit the target screen res-olution. Since the nodes and edges are represented in a vector format,the upsampling does not introduce blurring artifacts. We allow thewidth and height of ∂B to be adjusted because of the various aspectratios of mobile devices. It means the edges may have different orien-tations when the bounding space is changed to prevent the stretchingartifacts. Figure 7 shows the layouts with different aspect ratios.

Focal and contextual edge lengths. We set the focal edges twotimes longer than the contextual edges. Because the displaying areais limited, the more focal edges would complicate the visualizationmore. In the worst case, all the edges are magnified and the geographicinformation of a layout is given up to satisfy the edge length require-ments1. Therefore, we strive to solve this problem by retaining thesum of edge lengths when computing a metro map. Namely, in Eq. 1,we set Dα = 2Dβ and solve

Nα Dα +Nβ Dβ = ∑i, j∈E

|vi−v j| (13)

to determine Dα and Dβ , where Nα and Nβ are the number of fo-cal and contextual edges, respectively. Naturally, users can determinethe 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β eventhough we minimize Ω` (see Eq. 1) to achieve map regularity. Thisproblem is due to conflicts between the edge lengths and the graphtopology. As a result, the edges can only extend or contract becausethe graph connectivities are untouched.

Limitations. Apparently, focus+context methods inevitably intro-duce distortions or occlusions. We do not claim that our focus+contextlayouts are fully accurate, but rather we show that it can minimize the

1This situation may not happen if only source and target stations are chosento determine the best route.

Fig. 7. The focus+context metro maps of San Francisco. They are de-termined based on different aspect ratios.

Fig. 8. The focal transportation line is not straight because of limitedwidth of the displaying area.

inconvenience of distortions to visitors. To utilize the limited display-ing area more effectively, our approach does not maintain global cardi-nal directionality of transportation lines. It also regularizes the spaceof neighboring stations such that the geographic or time distance ofthe route cannot be obtained from the map. These distortions are notproblematic because passengers do not rely on cardinal directionalitywhen taking trains or switching transportation lines. We admit thatour technique is not sufficient to handle general maps, but geographicinformation is not the main concern in metro map visualization. Whatvisitors do care about is network navigation and our focus+contextlayout provides sufficient information. Moreover, since our systemachieves real-time performance, passengers can go back and forth toobserve the absolute geographies and the highlighted routes easily.

Our focus+context metro map may not be visually pleasing whenthere are too many focal edges lying in the same direction. Figure8 shows an example in which the focal edges mainly lie in horizontaldirection. Because the width of the displaying area is limited, the mag-nified transportation line bends several times to retain the long lengtheven though we do preserve the line straightness using Eq. 3. In addi-tion, we compute the layout and the labeling problems separately. Thedemanded space from the deformation step may not be enough to thosestations with long labels. As a result, the occlusion may occur regard-less of the position the label is placed. Under real-time constraints, itwould be good if the station and the label positions could be solved to-gether such that all constraints can be considered simultaneously. Weleave this issue to future work.

Fig. 9. From top to bottom are the metro maps of Stockholm, Mexico City and Sydney. (left) The geographic layouts. (middle and right) Thefocus+context results are automatically determined using our system.

6 CONCLUSIONS AND FUTURE WORKS

We have introduced the concept of focus+context layout for metromap visualization. This technique is particularly useful when visu-alizing a complicated map on a mobile device because unnecessarytransportation lines are abstracted. By entering the start and destina-tion stations, our system determines the user-oriented layout fully au-tomatically. 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 per-sist within the screen to show the basic geographic information. Ourmethod preserves the metro map criteria when relocating stations suchthat the visual artifacts are minimized. The experimental results verifyour focus+context visualization technique.

We have successfully tested our program on a desktop PC. Giventhat the algorithm is designed for displaying maps on a small area, wethus plan to implement our method on a mobile device and raise thetechnique to a product-level system.

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 projectedon the 2D space and they are relocated as other stations.

ACKNOWLEDGMENTS

We thank reviewers for their insightful and valuable comments. Wealso thank Chih-hung Liu, Ming-Yen Kuo and Ssu-Hsin Huang forrunning the experiments. This work was supported in part by theNational Science Council (Contracts NSC-100-2218-E-009-008 andNSC 99-2221-E-004-014).

REFERENCES

[1] Y. Boykov and V. Kolmogorov. An experimental comparison of min-cut/max-flow algorithms for energy minimization in vision. IEEE Trans.Pattern Anal. Mach. Intell., 26:1124–1137, 2004.

[2] Y. Boykov, O. Veksler, and R. Zabih. Fast approximate energy minimiza-tion via graph cuts. IEEE Trans. Pattern Anal. Mach. Intell., 23:1222–1239, 2001.

[3] M. S. T. Carpendale, D. J. Cowperthwaite, and F. D. Fracchia. Extendingdistortion viewing from 2d to 3d. IEEE Comput. Graph. Appl., 17:42–51,1997.

[4] K. Garland. Mr. Beck’s underground map. Capital Transport, 1994.[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 visual-isation of metro maps. J. Vis. Lang. Comput., 17:203–224, 2006.

[7] E. Imhof. Positioning names on maps. The American Cartographer,2:128–144.

[8] J. C. James. Time-distance transformations of transportation networks.Geographical Analysis, 9:195–205, 1977.

[9] T. A. Keahey. The generalized detail in-context problem. In Proceedingsof IEEE Information Visualization Symposium, pages 44–51, 1998.

[10] T. A. Keahey and E. L. Robertson. Techniques for non-linear magnifica-tion transformations. In Proceedings of IEEE Information VisualizationSymposium, pages 38–45, 1996.

[11] T. A. Keahey and E. L. Robertson. Nonlinear magnification fields. InProceedings of IEEE Information Visualization Symposium, pages 51–58, 1997.

[12] V. Kolmogorov and R. Zabih. What energy functions can be minimizedvia graph cuts? In Proceedings of the 7th European Conference on Com-puter Vision-Part III, ECCV ’02, pages 65–81, 2002.

[13] E. LaMar, B. Hamann, and K. I. Joy. A magnification lens for interactivevolume visualization. In Proceedings of Pacific Graphics, pages 223–232, 2001.

[14] A. M. MacEachren. A linear view of the world: Strip maps as a uniqueform of cartographic representation. American Cartographer, 13(1):7–25, 1986.

[15] A. M. MacEachren and G. B. Johnson. The evolution, application and im-plications of strip format travel maps. The Cartographic Journal, 24:147–158, 1987.

[16] K. Madsen, H. B. Nielsen, and O. Tingleff. Methods for Non-Linear LeastSquares Problems. Informatics and Mathematical Modelling, TechnicalUniversity of Denmark, second edition, 2004.

[17] K. Madsen, H. B. Nielsen, and O. Tingleff. Optimization with Con-straints. Informatics and Mathematical Modelling, Technical Universityof Denmark, second edition, 2004.

[18] MARTA. Atlanta rail map. Available online at http://www.itsmarta.com.[19] D. Merrick and J. Gudmundsson. Path simplification for metro map lay-

out. In Proceedings of the 14th international conference on Graph draw-ing, GD’06, pages 258–269, 2007.

[20] M. Nollenburg and A. Wolff. Drawing and labeling high-quality metromaps by mixed-integer programming. IEEE Transactions on Visualiza-tion and Computer Graphics, 17:626–641, 2011.

[21] D. H. Parker. The principles of aesthetics. Nabu Press, 2010.[22] M. Sarkar and M. H. Brown. Graphical fisheye views. Commun. ACM,

37:73–83, 1994.[23] J. Stott, P. Rodgers, J. C. Martinez-Ovando, and S. G. Walker. Automatic

metro map layout using multicriteria optimization. IEEE Transactions onVisualization and Computer Graphics, 17:101–114, 2011.

[24] L. Wang, Y. Zhao, K. Mueller, and A. E. Kaufman. The magic volumelens: An interactive focus+context technique for volume rendering. InProceedings of IEEE Visualization Conference, pages 367–374, 2005.

[25] Y.-S. Wang, T.-Y. Lee, and C.-L. Tai. Focus+context visualization withdistortion minimization. IEEE Transactions on Visualization and Com-puter Graphics, 14(6):1731–1738, 2008.

[26] Y.-S. Wang, C. Wang, T.-Y. Lee, and K.-L. Ma. Feature-preserving vol-ume data reduction and focus+context visualization. IEEE Transactionson Visualization and Computer Graphics, 17:171–181, 2011.