-
Notifications
You must be signed in to change notification settings - Fork 0
/
vis.qmd
141 lines (105 loc) · 8.82 KB
/
vis.qmd
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
---
title: Visualizations of problem landscapes
format:
html:
include-after-body:
- text: <script type="text/javascript" defer src="assets/js/biobj.js"></script>
---
### Plots
Show plots in
<button id="colPrev" onclick="getPrev(this)" class="button">−</button>
<select id="col" onchange="changePlot()" class="dropdown"></select>
<button id="colNext" onclick="getNext(this)" class="button">+</button>
columns (click on <b>Dimension</b>/<b>Function</b>/<b>Instance</b>/<b>Visualization type</b> below to show all plots for the chosen category)
<table BORDER="0" width=100%>
<tr>
<td align="center" onclick="selectNode(this)" id="dimAll" class="off"><b>Dimension</b></td>
<td align="center" onclick="selectNode(this)" id="funAll" class="off"><b>Function</b></td>
<td align="center" onclick="selectNode(this)" id="insAll" class="off"><b>Instance</b></td>
<td align="center" onclick="selectNode(this)" id="typAll" class="on"><b>Visualization type</b></td>
</tr>
<tr>
<td class="select" align="center">
<button id="dimPrev" onclick="getPrev(this)" class="button">−</button>
<select id="dim" onchange="changePlot()" class="dropdown"></select>
<button id="dimNext" onclick="getNext(this)" class="button">+</button>
</td>
<td class="select" align="center">
<button id="funPrev" onclick="getPrev(this)" class="button">−</button>
<select id="fun" onchange="changePlot()" class="dropdown"></select>
<button id="funNext" onclick="getNext(this)" class="button">+</button>
</td>
<td class="select" align="center">
<button id="insPrev" onclick="getPrev(this)" class="button">−</button>
<select id="ins" onchange="changePlot()" class="dropdown"></select>
<button id="insNext" onclick="getNext(this)" class="button">+</button>
</td>
<td class="select" align="center">
<button id="typPrev" onclick="getPrev(this)" class="button"><i class="arrow left"></i></button>
<select id="typ" onchange="changePlot()" style="width:220px;height:30px;">
</select>
<button id="typNext" onclick="getNext(this)" class="button"><i class="arrow right"></i></button>
</td>
</tr>
</table>
<!-- <textarea id="result" num=7></textarea> -->
<div id="images" width=100%></div>
### Plot explanation
<div id="text-directions-searchspace" style="padding-top: 10px;">
#### Pareto set approximation
This plot shows the projection of the Pareto set approximation (in black) and some 1-dimensional cuts (in various colors, see below) onto an axes-parallel cut of the search space defined by two variables ($x_1$ and $x_n$, where $n$ is the number of variables).
</div>
<div id="text-directions-searchspace-projection" style="padding-top: 10px;">
#### Pareto set approximation (optima direction)
This plot contains the projection of the Pareto set approximation and some 1-dimensional cuts (in various colors, see below) onto a random cutting plane that contains both single-objective optima. It additionally shows the contour lines for each objective function.
</div>
<div id="text-directions-objspace" style="padding-top: 10px;">
#### Pareto front approximation (original space)
This plot depicts the Pareto front approximation and the results of some 1-dimensional cuts (in various colors, see below) in the original scaling of the objective space (as seen by an optimization algorithm).
</div>
<div id="text-directions-logobjspace" style="padding-top: 10px;">
#### Pareto front approximation (normalized space)
This plot depicts the Pareto front approximation and the results of some 1-dimensional cuts (in various colors, see below) in the normalized objective space (in log scale), where the ideal point is at (0, 0) and the nadir point is at (1, 1).
</div>
<div id="text-additional-info" style="padding-top: 10px;">
In addition to the best known Pareto set/front approximation, the plots present **1-dimensional cuts** ("lines") through the search space:<ul>
<li>along a random direction through each single-objective optimum (in blue),</li>
<li>along each coordinate axis through each single-objective optimum (blue dotted lines),</li>
<li>along the line connecting both single-objective optima (in red),</li>
<li>two fully random lines (in yellow), and</li>
<li>a random line in the random projection plane going through both optima (in green).</li>
</ul>
All straight lines are of the same length (10) with the support vector in its exact middle. Ticks along the lines indicate line segments of the same length in search space. Thicker points on the lines depict solutions that are non-dominated with respect to all points on the same line.
Furthermore, the Pareto set approximation plots highlight the projected region $[-5,5]^n$ as a gray-shaded area while the gray-shaded area in the Pareto front approximation plots denotes the region of interest between the ideal ($\times$) and nadir points ($+$).
</div>
<div id="text-dominance-rank" style="padding-top: 10px;">
#### Dominance rank ratio
Based on a 2-D grid in the search space, the dominance rank ratio of each grid point is the ratio of all grid points that dominate it [@Fonseca1995phd, p. 71ff.]. The plot uses a logarithmic color scale with the overall non-dominated points shown in yellow.
</div>
<div id="text-level-sets" style="padding-top: 10px;">
#### Level sets
This plot shows the level sets for each objective (first objective in blue, second objective in red) together with the non-dominated points of the 2-D grid.
</div>
<div id="text-local-dominance" style="padding-top: 10px;">
#### Local dominance
This visualization method by Fieldsend et al. [-@Fieldsend2019feature] categorizes each point of the 2-D grid into one of three distinct groups. The first group (shown with saturated colors) contains all grid points $P$ for which *all* 8 neighboring grid points (in the Moore neighborhood) are mutually non-dominated to $P$. In landscape analysis terms, we can call these regions in the plots "dominance-neutral local optima regions" in the sense that a dominance-based hill-climber will be able to explore such a region by single non-dominated moves. The second group consists of areas (depicted with non-saturated colors) containing grid points for which *at least one* neighboring grid point dominates it. Each such area is considered a "basin of attraction" of the corresponding region in the sense that a local dominance-based hill climber can only move towards the corresponding region. The same color hue is used to denote each basin of attraction (low saturation) and its corresponding dominance-neutral local optima region (high saturation). Finally, a grid point in categorized into the last group (shown in white), if at least two of its dominating neighbors belong to two different basins of attraction—white areas in the plots therefore show the boundaries between the basins.
In addition, black dots are used to highlight all non-dominated grid points.
</div>
<div id="text-gradient-length" style="padding-top: 10px;">
#### Gradient length
This plot shows the length of the normalized multiobjective gradient at each grid point, computed as
$$\frac{\nabla f_1(x)}{|\nabla f_1(x)|} + \frac{\nabla f_2(x)}{|\nabla f_2(x)|}
= \sqrt{1 + \cos\left(\theta \right)}\times\sqrt{2},$$
where $\nabla f_1(x)$ and $\nabla f_2(x)$ are the gradients of the objectives $f_1$ and $f_2$ in a search point $x$ and $\theta$ is the angle between these gradients. The normalized multiobjective gradient is exactly zero for Pareto-optimal solutions as well as locally non-dominated solutions.
</div>
<div id="text-path-length" style="padding-top: 10px;">
#### Path length
This plot shows the length of the path from each grid point towards the next local optimum. Inspired by the cumulated gradient field landscapes [@Kerschke2017expedition], the length is defined as Euclidean distance to the Moore neighbor to which the biobjective gradient points plus the path length of this neighbor. Cumulated gradient field landscapes sum gradient lengths instead of Euclidean distances. We use the latter because they better quantify the actual distance to the local optimum, however both approaches lead to qualitatively very similar figures.
</div>
<div id="text-correlation" style="padding-top: 10px;">
#### Pearson correlation coefficient
This plot shows the correlation between the two objectives estimated by computing the Pearson correlation coefficient at each grid point using a small sample in the grid point vicinity. The Pearson correlation coefficient measures the linear correlation between two samples' objectives and takes a value between $-1$ (perfect linear anti-correlation shown in red) and $1$ (perfect linear correlation shown in blue). A $0$ value (shown in white) implies that there is no linear dependency between the objectives. The Pearson correlation coefficient values are themselves positively correlated with the length of the normalized bi-objective gradient (see the gradient length plots).
</div>
### Problem definition
<div id="text-function"></div>
{{< include func_def/functions_div_h4.md >}}