a d3 plug-in for automatic label placement using simulated...

10
Nov. 20, 2013 Evan Wang A D3 plug-in for automatic label placement using simulated annealing Golden Gate Mission Nob Hill North B cific Heights Russian H Western Addition lley Tenderloin

Upload: lebao

Post on 10-Sep-2018

222 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: A D3 plug-in for automatic label placement using simulated annealingvis.berkeley.edu/courses/cs294-10-fa13/wiki/images/archive/b/b2/... · A D3 plug-in for automatic label placement

Nov. 20, 2013Evan Wang

A D3 plug-in for automatic label placement using simulated annealing

Golden Gate ParkMission

Nob Hill

North BeachPacific Heights Russian Hill

Western Addition

Noe Valley

Union Square Tenderloin

Page 2: A D3 plug-in for automatic label placement using simulated annealingvis.berkeley.edu/courses/cs294-10-fa13/wiki/images/archive/b/b2/... · A D3 plug-in for automatic label placement

Motivation

- Labeling features or data points (point-feature label placement) is important but time consuming [1].

(1) Cook and Jones. Computer Graphics Forum 9. 1990.

- Given the large cost of time, automatic label placement (ALP) is used widely by map generators [2].

(2) Agrawala and Stolte. Siggraph 2001. 2001.

- Problem: There exist little published or empirical evidence indicating that individuals frequently use ALP

- For advanced plotting tools (D3, Matlab, Matplotlib, Mathematica) favored by scientists and engineers, there is often no sophisticated built-in ALP.

Page 3: A D3 plug-in for automatic label placement using simulated annealingvis.berkeley.edu/courses/cs294-10-fa13/wiki/images/archive/b/b2/... · A D3 plug-in for automatic label placement

Project proposal

- A possible solution to the problem is to create a plug-in (extension, add-on) for an existing program that performs ALP

(1) http://bl.ocks.org/MoritzStefaner/1377729(2) http://bl.ocks.org/ZJONSSON/1691430

- ALP plug-ins do exist for some of the aforementioned plotting tools, with varying sophistication and ease of use [1, 2].

- For D3, there is currently no good ALPplug-in

- My project: write a D3 plugin for automatic label placement that implements a good algorithm (simulated annealing) and is easy to use

- Note: not designing a new algorithm, but addressing a problem that can potentially help a lot of people.

Page 4: A D3 plug-in for automatic label placement using simulated annealingvis.berkeley.edu/courses/cs294-10-fa13/wiki/images/archive/b/b2/... · A D3 plug-in for automatic label placement

Related Work

- The general rules for ALP have been carefully studied by many, most notably by Imhof [1, 2] and more quantitatively formulated by Yeoli [3]

(1) Imhof. International Yearbook of Cartography. 1962. (2) Imhof. The American Cartographer. 1975.

(3) Yeoli. The Cartographic Journal. 1972.

(1) Spatial overlap: labels should not overlap with each other or point features(2) Unambiguity: labels should be unambiguously identified with its graphical feature(3) Legibility: label should be easily readable

A D3 plug-in for automatic label placement using simulatedannealing

Evan Wang

Abstract—Blah blah ...

Index Terms—automatic label placement, simulated annealing, D3.js

1 INTRODUCTION

An explanation of the problem and the motivation for solving it.

Labeling features or data points, more commonly known as point-feature label placement (PFLP), is a fundamental part of a visualiza-tion because it helps viewers see what the data represent and pointsout nuances that could otherwise be missed. PFLP is a very time-consuming task. According to Cook and Jones, cartographers placeapproximately 20-30 labels per hour [1].

Given the large cost of time, automatic label placement is usedwidely by map generators such as LineDrive [2]. However, there islittle published or empirical evidence that indicates individuals fre-quency use automatic labeling. This presents a puzzle. Why would somany individuals manually label graphs and charts even though doingso requires a heavy time commitment? Not only that, an optimiza-tion problem such as this is perfectly suited for one of many standardsearch/optimization algorithms available. For advanced plotting tools(R, D3.js, Matlab, Mathematica, and Matplotlib) favored by scientistsand engineers, there is often no sophisticated built-in automatic labelplacement. In order to label a scatter plot, one often has to resort totweaking labels manually. A possible solution to the problem is tocreate a plug-in (sometimes called extension or add-on) for an exist-ing program that performs the label placement. Plug-ins do exist forthe aformentioned plotting tools. In particular for D3, an increasinglypopular Javascript visualization library D3.js,

2 RELATED WORK

2.1 Label placement rulesThe general rules for label placement have been carefully studied

by many, most notably described by Imhof and more quantitativelyformulated by Yeoli [3, 4, 5]. The basic rules are:

• Spatial overlap: Labels should not overlap with each other orpoint features.

• Unambiguity: Labels should be clearly and unambiguously iden-tified with its corresponding graphical feature(s).

• Legibility: Labels should be easily readable.

Comparisons of figures that adhere to and do not adhere to theserules are shown in Fig. 1. The label placements in Fig. 1(b) are betterthan their counterparts in Fig. 1(a) because there are less label-labeland label-point overlaps, less ambiguity in label-point correspondence,and generally greater readability.

In addition to these rules, Imhof described a set of more specificstylistic rules pertaining to specific label positions [3]:

• Label position on the right is prefered over left.

• Label position on top is prefered over below.

• Author email: [email protected]

(a)Golden Gate Park

Mission

Nob Hill

North BeachPacific Heights

Russian Hill

Western Addition

Noe Valley

Union SquareTenderloin

Golden Gate ParkMission

Nob Hill

North BeachPacific Heights Russian Hill

Western Addition

Noe Valley

Union Square Tenderloin

(b)

Fig. 1. Good (a) and bad (b) label placements. In (a), some labelsoverlap with each other and/or with points. In addition, there are noconventions for prefered placement positions. This creates ambiguity interms of which label corresponds to which data point. In (b), there areno overlaps, labels tend to be situationed in a corner of the data point,and consequently, no ambiguity for label correspondence.

• Label position closer to the corresponding point feature is pref-ered.

A visualization of Imhof’s stylistic rules are shown in Fig. 2.

Nob HillNob Hill

Nob Hill Nob Hill Nob Hill

Nob HillNob Hill Nob Hill

Fig. 2. Prefered label positions. The relative preference of the posi-tions are indicated according to the color saturation of the label. Darkerlabels represents more desirable positions.

2.2 Search space

So far, our description of the problem has been qualitative (i.e.avoid overlaps, place labels in more prefered positions). For an op-timization problem such as this, we have to first define the searchspace [6]. The search space consists of the collection of label posi-tions. Each configuration of label positions, or state (n), can be writenas

n = {r1,r2,r3, . . .rN}, (1)

where I have used r = (rx,ry) as a shorthand to denote the position ofeach label. Additionally, each individual component of every label po-sition r must satisfy the constraints of the graph boundaries, rx > Lmin

x ,rx < Lmax

x , ry > Lminy , ry < Lmax

y . All label cofiguration labels that sat-isfy the boundary conditions are permissible. As we defined the prob-lem, the search space contains 2N degrees of freedom, where N is thetotal number of labels. It is important to note that we have allowedneither the size (font) of the labels nor the orientation (tilt) to be a free

A D3 plug-in for automatic label placement using simulatedannealing

Evan Wang

Abstract—Blah blah ...

Index Terms—automatic label placement, simulated annealing, D3.js

1 INTRODUCTION

An explanation of the problem and the motivation for solving it.

Labeling features or data points, more commonly known as point-feature label placement (PFLP), is a fundamental part of a visualiza-tion because it helps viewers see what the data represent and pointsout nuances that could otherwise be missed. PFLP is a very time-consuming task. According to Cook and Jones, cartographers placeapproximately 20-30 labels per hour [1].

Given the large cost of time, automatic label placement is usedwidely by map generators such as LineDrive [2]. However, there islittle published or empirical evidence that indicates individuals fre-quency use automatic labeling. This presents a puzzle. Why would somany individuals manually label graphs and charts even though doingso requires a heavy time commitment? Not only that, an optimiza-tion problem such as this is perfectly suited for one of many standardsearch/optimization algorithms available. For advanced plotting tools(R, D3.js, Matlab, Mathematica, and Matplotlib) favored by scientistsand engineers, there is often no sophisticated built-in automatic labelplacement. In order to label a scatter plot, one often has to resort totweaking labels manually. A possible solution to the problem is tocreate a plug-in (sometimes called extension or add-on) for an exist-ing program that performs the label placement. Plug-ins do exist forthe aformentioned plotting tools. In particular for D3, an increasinglypopular Javascript visualization library D3.js,

2 RELATED WORK

2.1 Label placement rulesThe general rules for label placement have been carefully studied

by many, most notably described by Imhof and more quantitativelyformulated by Yeoli [3, 4, 5]. The basic rules are:

• Spatial overlap: Labels should not overlap with each other orpoint features.

• Unambiguity: Labels should be clearly and unambiguously iden-tified with its corresponding graphical feature(s).

• Legibility: Labels should be easily readable.

Comparisons of figures that adhere to and do not adhere to theserules are shown in Fig. 1. The label placements in Fig. 1(b) are betterthan their counterparts in Fig. 1(a) because there are less label-labeland label-point overlaps, less ambiguity in label-point correspondence,and generally greater readability.

In addition to these rules, Imhof described a set of more specificstylistic rules pertaining to specific label positions [3]:

• Label position on the right is prefered over left.

• Label position on top is prefered over below.

• Author email: [email protected]

(a)Golden Gate Park

Mission

Nob Hill

North BeachPacific Heights

Russian Hill

Western Addition

Noe Valley

Union SquareTenderloin

Golden Gate ParkMission

Nob Hill

North BeachPacific Heights Russian Hill

Western Addition

Noe Valley

Union Square Tenderloin

(b)

Fig. 1. Good (a) and bad (b) label placements. In (a), some labelsoverlap with each other and/or with points. In addition, there are noconventions for prefered placement positions. This creates ambiguity interms of which label corresponds to which data point. In (b), there areno overlaps, labels tend to be situationed in a corner of the data point,and consequently, no ambiguity for label correspondence.

• Label position closer to the corresponding point feature is pref-ered.

A visualization of Imhof’s stylistic rules are shown in Fig. 2.

Nob HillNob Hill

Nob Hill Nob Hill Nob Hill

Nob HillNob Hill Nob Hill

Fig. 2. Prefered label positions. The relative preference of the posi-tions are indicated according to the color saturation of the label. Darkerlabels represents more desirable positions.

2.2 Search space

So far, our description of the problem has been qualitative (i.e.avoid overlaps, place labels in more prefered positions). For an op-timization problem such as this, we have to first define the searchspace [6]. The search space consists of the collection of label posi-tions. Each configuration of label positions, or state (n), can be writenas

n = {r1,r2,r3, . . .rN}, (1)

where I have used r = (rx,ry) as a shorthand to denote the position ofeach label. Additionally, each individual component of every label po-sition r must satisfy the constraints of the graph boundaries, rx > Lmin

x ,rx < Lmax

x , ry > Lminy , ry < Lmax

y . All label cofiguration labels that sat-isfy the boundary conditions are permissible. As we defined the prob-lem, the search space contains 2N degrees of freedom, where N is thetotal number of labels. It is important to note that we have allowedneither the size (font) of the labels nor the orientation (tilt) to be a free

}- In addition to these rules, Imhof [1] described a set of more specific stylistic rules pertaining to specific label positions

A D3 plug-in for automatic label placement using simulatedannealing

Evan Wang

Abstract—Blah blah ...

Index Terms—automatic label placement, simulated annealing, D3.js

1 INTRODUCTION

An explanation of the problem and the motivation for solving it.

Labeling features or data points, more commonly known as point-feature label placement (PFLP), is a fundamental part of a visualiza-tion because it helps viewers see what the data represent and pointsout nuances that could otherwise be missed. PFLP is a very time-consuming task. According to Cook and Jones, cartographers placeapproximately 20-30 labels per hour [1].

Given the large cost of time, automatic label placement is usedwidely by map generators such as LineDrive [2]. However, there islittle published or empirical evidence that indicates individuals fre-quency use automatic labeling. This presents a puzzle. Why would somany individuals manually label graphs and charts even though doingso requires a heavy time commitment? Not only that, an optimiza-tion problem such as this is perfectly suited for one of many standardsearch/optimization algorithms available. For advanced plotting tools(R, D3.js, Matlab, Mathematica, and Matplotlib) favored by scientistsand engineers, there is often no sophisticated built-in automatic labelplacement. In order to label a scatter plot, one often has to resort totweaking labels manually. A possible solution to the problem is tocreate a plug-in (sometimes called extension or add-on) for an exist-ing program that performs the label placement. Plug-ins do exist forthe aformentioned plotting tools. In particular for D3, an increasinglypopular Javascript visualization library D3.js,

2 RELATED WORK

2.1 Label placement rulesThe general rules for label placement have been carefully studied

by many, most notably described by Imhof and more quantitativelyformulated by Yeoli [3, 4, 5]. The basic rules are:

• Spatial overlap: Labels should not overlap with each other orpoint features.

• Unambiguity: Labels should be clearly and unambiguously iden-tified with its corresponding graphical feature(s).

• Legibility: Labels should be easily readable.

Comparisons of figures that adhere to and do not adhere to theserules are shown in Fig. 1. The label placements in Fig. 1(b) are betterthan their counterparts in Fig. 1(a) because there are less label-labeland label-point overlaps, less ambiguity in label-point correspondence,and generally greater readability.

In addition to these rules, Imhof described a set of more specificstylistic rules pertaining to specific label positions [3]:

• Label position on the right is prefered over left.

• Label position on top is prefered over below.

• Author email: [email protected]

(a)Golden Gate Park

Mission

Nob Hill

North BeachPacific Heights

Russian Hill

Western Addition

Noe Valley

Union SquareTenderloin

Golden Gate ParkMission

Nob Hill

North BeachPacific Heights Russian Hill

Western Addition

Noe Valley

Union Square Tenderloin

(b)

Fig. 1. Good (a) and bad (b) label placements. In (a), some labelsoverlap with each other and/or with points. In addition, there are noconventions for prefered placement positions. This creates ambiguity interms of which label corresponds to which data point. In (b), there areno overlaps, labels tend to be situationed in a corner of the data point,and consequently, no ambiguity for label correspondence.

• Label position closer to the corresponding point feature is pref-ered.

A visualization of Imhof’s stylistic rules are shown in Fig. 2.

Nob HillNob Hill

Nob Hill Nob Hill Nob Hill

Nob HillNob Hill Nob Hill

Fig. 2. Prefered label positions. The relative preference of the posi-tions are indicated according to the color saturation of the label. Darkerlabels represents more desirable positions.

2.2 Search space

So far, our description of the problem has been qualitative (i.e.avoid overlaps, place labels in more prefered positions). For an op-timization problem such as this, we have to first define the searchspace [6]. The search space consists of the collection of label posi-tions. Each configuration of label positions, or state (n), can be writenas

n = {r1,r2,r3, . . .rN}, (1)

where I have used r = (rx,ry) as a shorthand to denote the position ofeach label. Additionally, each individual component of every label po-sition r must satisfy the constraints of the graph boundaries, rx > Lmin

x ,rx < Lmax

x , ry > Lminy , ry < Lmax

y . All label cofiguration labels that sat-isfy the boundary conditions are permissible. As we defined the prob-lem, the search space contains 2N degrees of freedom, where N is thetotal number of labels. It is important to note that we have allowedneither the size (font) of the labels nor the orientation (tilt) to be a free

(1) Label position on the right is preferred over left(2) Label position on the top is preferred over bottom(3) Label position closer to the corresponding point feature is preferred.

}

Page 5: A D3 plug-in for automatic label placement using simulated annealingvis.berkeley.edu/courses/cs294-10-fa13/wiki/images/archive/b/b2/... · A D3 plug-in for automatic label placement

Search space and cost function

- The search space consists of the collection of all possible label positions.

(1) Shieber, Christensen, and Marks. Transactions on Graphics. 1995.

- All label configurations that satisfy the boundary conditions are permissible. - Search space contains 2N degrees of freedom, where N = number of labels- Not all points in the search space are equal- To distinguish between the quality of configurations, construct a function which takes as input amount of overlap, distance constraints, stylistic preferences [1]

parameter. Adding these elements as free parameters are entirely pos-sible and straightforward. However, size and orientation are mostlyused in cartographic applications were the various geographical fea-tures necessitates their usage and utility. For label point features ingraphs, features such as size and orientation are usually fixed.

2.3 Cost function

Of course, not all points in the search space are equal. Label con-figurations that result in less overlap are more prefered. In Fig. 1, both(a) and (b) are permissible states or configurations in the search space.However, (a) is the much more prefered state because there are lessoverlaps and greater readability. In order to distinguish between thequality of configurations in our search space, we need to construct afunction which takes as input a list of indicators for overlaps, distanceconstraints, and stylistic positioning preferences. This function, oftencalled the cost or objective, is what we need to optimize. Based onImhof and Yeoli’s rules [3, 4, 5], our cost function for each individuallabel i depends on

Ci = f (All ,Al p,Ll p,q), (2)

where All is the area of label-label overlaps, Al p is the area of label-point overlaps, Ll p is the distance between the label and the point, andq is the orientation of the label relative to the point. The form of ourcost function for label i for a system with N total labels is then

Ci =N

Âj 6=i

AllWll +N

Âj 6=i

Al pWl p +Ll pWl p +qWq

, (3)

where the W terms are weight constants signifying the relative impor-tance of each rule. For each label i, we sum over all other labels andpoints in order to compute the total area overlap. The greater the over-lap, the higher the cost. To obtain the total cost, we simply sum overeach label, or index i

Ctot =N

Âi

Ci. (4)

In my implementation, this cost function will be modified slightly.

2.4 Overview of algorithms

Many possible classes of algorithms can be applied to automaticlabel placement. These include random placement, exhaustic searchalgorithms, greedy algorithms, local search algorithms, stochasticsearch algorithms, genetic algorithms, and matehmatical program-ming [6]. In general, these algorithms can be categorized into localsearch methods and global optimization methods. For brevity, I willgive an overview for the more widely-used algorithms.

2.4.1 Greedy algorithm

In general, a greedy algorithm makes a locally optimal choice at everystep without backtracking. As applied to label placement, the algo-rithm is the following.

while all points are not labeled do

select an unlabeled point;place label according to preset rules;if no free position then

leave out the label;orlabel point even with overlap;orask for feedback from human;

end

end

Algorithm 1: Greedy algorithmWhile generally very fast, the greedy algorithm frequently gener-

ates label configurations that could be vastly improved [6].

2.4.2 Gradient descentAn gradient descent implementation of automatic label placement

is generally considered better than using a greedy algorithm becausewe now can fine tune a particular configuration by local label move-ments. The algorithm is as follows [7].

while convergence not reached do

randomly make several perturbations to the configuration;calculate decrease in cost function DC;accept the perturbation with the most negative DC;

end

Algorithm 2: Gradient descentAlthough it generally performs better than greedy algorithms, gra-

dient descent is still a local optimization technique. This means thatit tends to get stuck in minima close to the starting configuration andcannot escape into a nearby deeper local minimum. Therefore, the ini-tial placement of label positions is extremely important as the intialconfiguration determines the nearby minima on the cost surface. Thisidea is illustrated in Fig. 4. In the one-dimensional slice of the costsurface, the green circle illustrates the starting configuration. Localoptimization results configurations that at the bottom of the nearestlocal minimum following the steepest gradient. However, the nearbydeeper local minimum is avoided. For these reasons, using gradientdescent often result in less optimum label configurations for anythingexcept the simplest of label placement problems.

Cost

Sunday, November 17, 13

Fig. 3. Local search algorithms. Local search algorithms such as gra-dient descent find nearby local minimum. In this one-dimensional sliceof the cost surface, the green circle illustrates the starting configuration.Local optimization results configurations that at the bottom of the near-est local minimum following the steepest gradient. However, the nearbydeeper local minimum is avoided.

2.4.3 Simulated annealingGiven the high dimensional nature of a problem such as label place-

ment, a global search algorithm is prefered over a local one becauseglobal algorithms can avoid being trapped in local minima. Simulatedannealing is one such algorithm [8, 9]. It is not an exhaustive globalsearch algorithm. For any sizable system (or number of labels), thesearch space is enormous and sampling all the configurations is nei-ther feasible nor a wise use of computational resources. We want tofocus on label configurations that are lower in cost. In simulated an-nealing parlance, energy is usually used in place of cost. The idea hereis that we make random changes to the label positions, and we ac-cept these changes with a probability proportional to their Boltzmannweight. The probability by which we accept these moves is modulatedby a temperature term (T ). Higher the temperature, the more likelywe are to accepting configurations that have a high energy. Lower thetemperature, the less likely we are to accepting these moves. In thecase of T = 0, we go to the bottom of the nearest energy well. Westart at a higher temperature term in order to explore the high dimen-sional energy surface. However, we slowly decrease the temperature,

- Energy/cost function

parameter. Adding these elements as free parameters are entirely pos-sible and straightforward. However, size and orientation are mostlyused in cartographic applications were the various geographical fea-tures necessitates their usage and utility. For label point features ingraphs, features such as size and orientation are usually fixed.

2.3 Cost function

Of course, not all points in the search space are equal. Label con-figurations that result in less overlap are more prefered. In Fig. 1, both(a) and (b) are permissible states or configurations in the search space.However, (a) is the much more prefered state because there are lessoverlaps and greater readability. In order to distinguish between thequality of configurations in our search space, we need to construct afunction which takes as input a list of indicators for overlaps, distanceconstraints, and stylistic positioning preferences. This function, oftencalled the cost or objective, is what we need to optimize. Based onImhof and Yeoli’s rules [3, 4, 5], our cost function for each individuallabel i depends on

Ci = f (All ,Al p,Ll p,q), (2)

where All is the area of label-label overlaps, Al p is the area of label-point overlaps, Ll p is the distance between the label and the point, andq is the orientation of the label relative to the point. The form of ourcost function for label i for a system with N total labels is then

Ci =N

Âj 6=i

AllWll +N

Âj 6=i

Al pWl p +Ll pWl p +qWq

, (3)

where the W terms are weight constants signifying the relative impor-tance of each rule. For each label i, we sum over all other labels andpoints in order to compute the total area overlap. The greater the over-lap, the higher the cost. To obtain the total cost, we simply sum overeach label, or index i

Ctot =N

Âi

Ci. (4)

In my implementation, this cost function will be modified slightly.

2.4 Overview of algorithms

Many possible classes of algorithms can be applied to automaticlabel placement. These include random placement, exhaustic searchalgorithms, greedy algorithms, local search algorithms, stochasticsearch algorithms, genetic algorithms, and matehmatical program-ming [6]. In general, these algorithms can be categorized into localsearch methods and global optimization methods. For brevity, I willgive an overview for the more widely-used algorithms.

2.4.1 Greedy algorithm

In general, a greedy algorithm makes a locally optimal choice at everystep without backtracking. As applied to label placement, the algo-rithm is the following.

while all points are not labeled do

select an unlabeled point;place label according to preset rules;if no free position then

leave out the label;orlabel point even with overlap;orask for feedback from human;

end

end

Algorithm 1: Greedy algorithmWhile generally very fast, the greedy algorithm frequently gener-

ates label configurations that could be vastly improved [6].

2.4.2 Gradient descentAn gradient descent implementation of automatic label placement

is generally considered better than using a greedy algorithm becausewe now can fine tune a particular configuration by local label move-ments. The algorithm is as follows [7].

while convergence not reached do

randomly make several perturbations to the configuration;calculate decrease in cost function DC;accept the perturbation with the most negative DC;

end

Algorithm 2: Gradient descentAlthough it generally performs better than greedy algorithms, gra-

dient descent is still a local optimization technique. This means thatit tends to get stuck in minima close to the starting configuration andcannot escape into a nearby deeper local minimum. Therefore, the ini-tial placement of label positions is extremely important as the intialconfiguration determines the nearby minima on the cost surface. Thisidea is illustrated in Fig. 4. In the one-dimensional slice of the costsurface, the green circle illustrates the starting configuration. Localoptimization results configurations that at the bottom of the nearestlocal minimum following the steepest gradient. However, the nearbydeeper local minimum is avoided. For these reasons, using gradientdescent often result in less optimum label configurations for anythingexcept the simplest of label placement problems.

Cost

Sunday, November 17, 13

Fig. 3. Local search algorithms. Local search algorithms such as gra-dient descent find nearby local minimum. In this one-dimensional sliceof the cost surface, the green circle illustrates the starting configuration.Local optimization results configurations that at the bottom of the near-est local minimum following the steepest gradient. However, the nearbydeeper local minimum is avoided.

2.4.3 Simulated annealingGiven the high dimensional nature of a problem such as label place-

ment, a global search algorithm is prefered over a local one becauseglobal algorithms can avoid being trapped in local minima. Simulatedannealing is one such algorithm [8, 9]. It is not an exhaustive globalsearch algorithm. For any sizable system (or number of labels), thesearch space is enormous and sampling all the configurations is nei-ther feasible nor a wise use of computational resources. We want tofocus on label configurations that are lower in cost. In simulated an-nealing parlance, energy is usually used in place of cost. The idea hereis that we make random changes to the label positions, and we ac-cept these changes with a probability proportional to their Boltzmannweight. The probability by which we accept these moves is modulatedby a temperature term (T ). Higher the temperature, the more likelywe are to accepting configurations that have a high energy. Lower thetemperature, the less likely we are to accepting these moves. In thecase of T = 0, we go to the bottom of the nearest energy well. Westart at a higher temperature term in order to explore the high dimen-sional energy surface. However, we slowly decrease the temperature,

parameter. Adding these elements as free parameters are entirely pos-sible and straightforward. However, size and orientation are mostlyused in cartographic applications were the various geographical fea-tures necessitates their usage and utility. For label point features ingraphs, features such as size and orientation are usually fixed.

2.3 Cost function

Of course, not all points in the search space are equal. Label con-figurations that result in less overlap are more prefered. In Fig. 1, both(a) and (b) are permissible states or configurations in the search space.However, (a) is the much more prefered state because there are lessoverlaps and greater readability. In order to distinguish between thequality of configurations in our search space, we need to construct afunction which takes as input a list of indicators for overlaps, distanceconstraints, and stylistic positioning preferences. This function, oftencalled the cost or objective, is what we need to optimize. Based onImhof and Yeoli’s rules [3, 4, 5], our cost function for each individuallabel i depends on

Ci = f (All ,Al p,Ll p,q), (2)

where All is the area of label-label overlaps, Al p is the area of label-point overlaps, Ll p is the distance between the label and the point, andq is the orientation of the label relative to the point. The form of ourcost function for label i for a system with N total labels is then

Ci =N

Âj 6=i

AllWll +N

Âj 6=i

Al pWl p +Ll pWl p +qWq

, (3)

where the W terms are weight constants signifying the relative impor-tance of each rule. For each label i, we sum over all other labels andpoints in order to compute the total area overlap. The greater the over-lap, the higher the cost. To obtain the total cost, we simply sum overeach label, or index i

Ctot =N

Âi

Ci. (4)

In my implementation, this cost function will be modified slightly.

2.4 Overview of algorithms

Many possible classes of algorithms can be applied to automaticlabel placement. These include random placement, exhaustic searchalgorithms, greedy algorithms, local search algorithms, stochasticsearch algorithms, genetic algorithms, and matehmatical program-ming [6]. In general, these algorithms can be categorized into localsearch methods and global optimization methods. For brevity, I willgive an overview for the more widely-used algorithms.

2.4.1 Greedy algorithm

In general, a greedy algorithm makes a locally optimal choice at everystep without backtracking. As applied to label placement, the algo-rithm is the following.

while all points are not labeled do

select an unlabeled point;place label according to preset rules;if no free position then

leave out the label;orlabel point even with overlap;orask for feedback from human;

end

end

Algorithm 1: Greedy algorithmWhile generally very fast, the greedy algorithm frequently gener-

ates label configurations that could be vastly improved [6].

2.4.2 Gradient descentAn gradient descent implementation of automatic label placement

is generally considered better than using a greedy algorithm becausewe now can fine tune a particular configuration by local label move-ments. The algorithm is as follows [7].

while convergence not reached do

randomly make several perturbations to the configuration;calculate decrease in cost function DC;accept the perturbation with the most negative DC;

end

Algorithm 2: Gradient descentAlthough it generally performs better than greedy algorithms, gra-

dient descent is still a local optimization technique. This means thatit tends to get stuck in minima close to the starting configuration andcannot escape into a nearby deeper local minimum. Therefore, the ini-tial placement of label positions is extremely important as the intialconfiguration determines the nearby minima on the cost surface. Thisidea is illustrated in Fig. 4. In the one-dimensional slice of the costsurface, the green circle illustrates the starting configuration. Localoptimization results configurations that at the bottom of the nearestlocal minimum following the steepest gradient. However, the nearbydeeper local minimum is avoided. For these reasons, using gradientdescent often result in less optimum label configurations for anythingexcept the simplest of label placement problems.

Cost

Sunday, November 17, 13

Fig. 3. Local search algorithms. Local search algorithms such as gra-dient descent find nearby local minimum. In this one-dimensional sliceof the cost surface, the green circle illustrates the starting configuration.Local optimization results configurations that at the bottom of the near-est local minimum following the steepest gradient. However, the nearbydeeper local minimum is avoided.

2.4.3 Simulated annealingGiven the high dimensional nature of a problem such as label place-

ment, a global search algorithm is prefered over a local one becauseglobal algorithms can avoid being trapped in local minima. Simulatedannealing is one such algorithm [8, 9]. It is not an exhaustive globalsearch algorithm. For any sizable system (or number of labels), thesearch space is enormous and sampling all the configurations is nei-ther feasible nor a wise use of computational resources. We want tofocus on label configurations that are lower in cost. In simulated an-nealing parlance, energy is usually used in place of cost. The idea hereis that we make random changes to the label positions, and we ac-cept these changes with a probability proportional to their Boltzmannweight. The probability by which we accept these moves is modulatedby a temperature term (T ). Higher the temperature, the more likelywe are to accepting configurations that have a high energy. Lower thetemperature, the less likely we are to accepting these moves. In thecase of T = 0, we go to the bottom of the nearest energy well. Westart at a higher temperature term in order to explore the high dimen-sional energy surface. However, we slowly decrease the temperature,

General dependence

Cost for each individual label i Total cost

Page 6: A D3 plug-in for automatic label placement using simulated annealingvis.berkeley.edu/courses/cs294-10-fa13/wiki/images/archive/b/b2/... · A D3 plug-in for automatic label placement

Why simulated annealing?- Many possible classes of algorithms can be applied to automatic label placement. These include random placement, exhaustive search algorithms, greedy algorithms, local search algorithms, stochastic search algorithms, genetic algorithms

(1) Kirkpatrick, Galatt Jr., and Vecci. Science. 1983.

- Can generally be divided into local or global search algorithms

- Landscape of label configurations is rough and high-dimensional

also known as annealing the system. By doing so, we are focusingour search on deeper minima, and avoiding the higher energy config-urations. The hope is that as the temperature gets very low, we havereached either the global minimum or a very low energy local mini-mum. Simulated annealing is often used with the Metropolis accep-tance criteria,

Pacc = min[1,eDE/T ], (5)

where Pacc is the probability of acceptance a new label configuration,DE is the change in energy of the system going from one configurationto another, and T is the system tempearture.

while convergence not reached do

attempt a move n !n

0 by moving labels;evaluate change in energy DE = E

n

0 �En

;if DE < 0 then

accept new configuration;else

generate random number x between 0 and 1;if x < eDE/T

then

accept new configuration;else

reject configuration;end

end

decrease T according to schedule;end

Algorithm 3: Simulated annealing

(a) High temperature

(b) Low temperature

Sunday, November 17, 13Fig. 4. Simulated annealing at high and low temperatures. (a) Athigher temperatures, we are not likely to accept configurations that havea high energy. We start at a higher temperature term in order to explorethe high dimensional energy surface. (b) At lower temperatures, we areless likely to accept high energy configurations. In the case of T = 0,we go to the bottom of the nearest energy well. As the simulation pro-gresses, we slowly decrease the temperature, also known as annealingthe system. By doing so, we are focusing our search on deeper minima,and avoiding the higher energy configurations. The hope is that as thetemperature gets very low, we have reached either the global minimumor a very low energy local minimum.

ACKNOWLEDGMENTS

The authors wish to thank A, B, C. This work was supported in partby a grant from XYZ.

REFERENCES

[1] A. Cook and C. Jones. “A Prolog rule-based system for cartographic nameplacement”, Computer Graphics Forum 9. 1990, 109-126.

Table 1. SciVis Paper Acceptance Rate: 1994-2006

Year Submitted Accepted Accepted (%)1994 91 41 45.11995 102 41 40.21996 101 43 42.61997 117 44 37.61998 118 50 42.41999 129 47 36.42000 151 52 34.42001 152 51 33.62002 172 58 33.72003 192 63 32.82004 167 46 27.62005 268 88 32.82006 228 63 27.6

[2] M. Agrawala and C. Stolte. “Rendering Effective Route Maps: ImprovingUsability Through Generalization”, Siggraph 2001. 2001, 241-250.

[3] E. Imhof. “Die Anordnung der Namen in der Karte”, International Year-book of Cartography. 1962, 2:93-129.

[4] E. Imhof. “Positioning names on maps”, The American Cartographer.1975, 2:128-144.

[5] P. Yoeli. “The logic of automated map lettering”, The Cartographic Jour-nal. 1972, 9:99-108.

[6] S. Shieber, J. Christensen, and J. Marks. “An empirical study of al-gorithms for point feature label placement”, Transactions on Graphics.1995, 14(3).

[7] S. Hirsch. “An Algorithm for Automatic Name Placement Around PointData”, Cartography and Geographic Information Science. 1982, 9:5-17.

[8] V. Cerny. “A thermodynamical approach to the travelling salesman prob-lem: An efficient simulation algorithm”, Journal of Optimization Theoryand Applications. 1985, 45:41-51.

[9] S. Kirkpatrick, C. Gelatt Jr., and M. Vecci. “Optimization by simulatedannealing”, Science. 1983, 220:671-680.

global searchGoal: avoid getting trapped in local minima

(2) Cerny. Journal of Optimization Theory. 1985.

- Simulated annealing [1,2] with Metropolis acceptance criterion:

also known as annealing the system. By doing so, we are focusingour search on deeper minima, and avoiding the higher energy config-urations. The hope is that as the temperature gets very low, we havereached either the global minimum or a very low energy local mini-mum. Simulated annealing is often used with the Metropolis accep-tance criteria,

Pacc = min[1,eDE/T ], (5)

where Pacc is the probability of acceptance a new label configuration,DE is the change in energy of the system going from one configurationto another, and T is the system tempearture.

while convergence not reached do

attempt a move n !n

0 by moving labels;evaluate change in energy DE = E

n

0 �En

;if DE < 0 then

accept new configuration;else

generate random number x between 0 and 1;if x < eDE/T

then

accept new configuration;else

reject configuration;end

end

decrease T according to schedule;end

Algorithm 3: Simulated annealing

(a) High temperature

(b) Low temperature

Sunday, November 17, 13Fig. 4. Simulated annealing at high and low temperatures. (a) Athigher temperatures, we are not likely to accept configurations that havea high energy. We start at a higher temperature term in order to explorethe high dimensional energy surface. (b) At lower temperatures, we areless likely to accept high energy configurations. In the case of T = 0,we go to the bottom of the nearest energy well. As the simulation pro-gresses, we slowly decrease the temperature, also known as annealingthe system. By doing so, we are focusing our search on deeper minima,and avoiding the higher energy configurations. The hope is that as thetemperature gets very low, we have reached either the global minimumor a very low energy local minimum.

ACKNOWLEDGMENTS

The authors wish to thank A, B, C. This work was supported in partby a grant from XYZ.

REFERENCES

[1] A. Cook and C. Jones. “A Prolog rule-based system for cartographic nameplacement”, Computer Graphics Forum 9. 1990, 109-126.

Table 1. SciVis Paper Acceptance Rate: 1994-2006

Year Submitted Accepted Accepted (%)1994 91 41 45.11995 102 41 40.21996 101 43 42.61997 117 44 37.61998 118 50 42.41999 129 47 36.42000 151 52 34.42001 152 51 33.62002 172 58 33.72003 192 63 32.82004 167 46 27.62005 268 88 32.82006 228 63 27.6

[2] M. Agrawala and C. Stolte. “Rendering Effective Route Maps: ImprovingUsability Through Generalization”, Siggraph 2001. 2001, 241-250.

[3] E. Imhof. “Die Anordnung der Namen in der Karte”, International Year-book of Cartography. 1962, 2:93-129.

[4] E. Imhof. “Positioning names on maps”, The American Cartographer.1975, 2:128-144.

[5] P. Yoeli. “The logic of automated map lettering”, The Cartographic Jour-nal. 1972, 9:99-108.

[6] S. Shieber, J. Christensen, and J. Marks. “An empirical study of al-gorithms for point feature label placement”, Transactions on Graphics.1995, 14(3).

[7] S. Hirsch. “An Algorithm for Automatic Name Placement Around PointData”, Cartography and Geographic Information Science. 1982, 9:5-17.

[8] V. Cerny. “A thermodynamical approach to the travelling salesman prob-lem: An efficient simulation algorithm”, Journal of Optimization Theoryand Applications. 1985, 45:41-51.

[9] S. Kirkpatrick, C. Gelatt Jr., and M. Vecci. “Optimization by simulatedannealing”, Science. 1983, 220:671-680.

Page 7: A D3 plug-in for automatic label placement using simulated annealingvis.berkeley.edu/courses/cs294-10-fa13/wiki/images/archive/b/b2/... · A D3 plug-in for automatic label placement

Specifics of my implementation

- Focus on ease of use

5 lines only

Page 8: A D3 plug-in for automatic label placement using simulated annealingvis.berkeley.edu/courses/cs294-10-fa13/wiki/images/archive/b/b2/... · A D3 plug-in for automatic label placement

Video demo 1: data in a straight line

Page 9: A D3 plug-in for automatic label placement using simulated annealingvis.berkeley.edu/courses/cs294-10-fa13/wiki/images/archive/b/b2/... · A D3 plug-in for automatic label placement

Video demo 2: scatter plot

Page 10: A D3 plug-in for automatic label placement using simulated annealingvis.berkeley.edu/courses/cs294-10-fa13/wiki/images/archive/b/b2/... · A D3 plug-in for automatic label placement

Remaining timeline

NowDec. 2: Presentation

Nov. 22: Implement MC rotation moves, stylistic rules (Imhof)

Nov. 27: Implement more accurate calculation of label area, overlap area, optimize weights

Time

Thanks for listening!