CircleVis: A Visualization Tool for Circular Labeling Arrangements and Overlap Removal

Abstract

Information visualization refers to the practice of representing data in a meaningful, visual way that users can interpret and easily comprehend. Geometric or visual encoding shapes such as circles, rectangles, and bars have grown in popularity in data visualization research over time. Circles are a common shape used by domain experts to solve real-world problems and analyze data. As a result, data can be encoded using a simple circle with a set of labels associated with an arc or portion of the circle. Labels can then be arranged in various ways based on human perception (easy to read) or by optimizing the available space around the circle. However, overlaps can occur in one or more arrangements. This paper proposes CircleVis, a new visualization tool for label arrangement and overlap removal in circle visual encoding. First, a mathematical model is presented in order to formulate existing arrangements such as angular, path, and linear. Furthermore, based on user interaction, a new arrangement approach is proposed to optimize available space in each circle arc and delete label overlaps. Finally, users test and evaluate the designed tool using the COVID-19 dataset for validation purposes. The obtained results demonstrate the efficacy of the proposed method for label arrangement and overlapping removal in circular layout.

1. Introduction

In mathematics, geometric forms are created by connecting points to generate a desired pattern [1] such as circles, rectangles, etc. Several studies in cognitive psychology have shown that humans prefer curved items and tend to be more attracted by curvilinear forms, particularly circular ones [2]. Circles are extensively used to depict information in various domains ranging from statistics, data mining, machine learning, etc. Labeled circles are frequently used in information visualization (InfoVis) for visual encoding of datasets [3], as well as with a variety of techniques such as sunburst, pie, and chord, to name a few. Furthermore, they can be used on problem-driven approaches [4] to represent statistics, tree structure, and data levels, among others. Using labeled circles to design a visualization system that assists in problem-solving has become popular. This enables people to analyze, explore, compare, and summarize data when they do nott know a priori what questions to ask. For this purpose, circles can be encoded using classical representation as weighted arcs with associated labels. Another encoding approach consists of deploying hierarchical levels with other circles from the middle to outside.

In literature, labeling arrangement techniques [5,6] are divided into two main classes: internal and external. For external labeling, labels are placed outside the circle because of the free space, allowing designers to display more data dimension. Internal labeling is often incorporated with zoom and fish-eye interactions to visualize more details. Users or researchers may choose the desired technique to display labels depending on the required interpretation level and the available free space. This work is more concerned with the external labeling [7] of radial contouring [8] than with circle division by arcs or other forms of visual encoding. Furthermore, label arrangements can have an overlapping problem, especially for large amounts of data. Many approaches have been proposed to remove overlaps for 1D [9] and 2D [10,11,12]) graph layout between nodes or labels. However, no studies have focused on circular layout and how to relate labels to sub-divisions (sub-features) of circular layout.

Hence, in this work we propose CircleVis, a visualization tool for encoding circles using various label arrangement techniques and label overlap removal. The following are the main contributions of this work. First, the state of the art of current labeled-circle studies on InfoVis is presented, with a focus on problem-driven approaches. Following that, a classification of the various approaches to label placement in circle layout is proposed. This study also introduces a new linear improved arrangement method for using circles with single/multiple levels while optimizing the available space. In addition, for each proposed arrangement to be implemented in the tool, a mathematical formulation is derived. A new method for detecting and removing possible label overlapping is proposed for 1D graph overlapped labels. Furthermore, CircleVis incorporates various interactions to reduce overlapping in 2D arrangement methods. Finally, a use case using COVID-19 datasets is analyzed to test, evaluate, and improve the proposed tool’s functionalities.

The rest of the paper is organized as follows. First, we present a state of the art of labeled-circle approaches and overlap removal (Section 2). A classification of the various methods for label arrangements in circular layouts is suggested in Section 3.1. In addition, methods to remove overlaps are proposed in Section 3.2). Our proposed approaches are implemented in CircleVis (Section 3.3), a new visualization tool to visualize a labeled circular layout. Finally, we assess our proposed approaches and tool in Section 4.

2. Related Work

This section provides a review of the literature on existing approaches to data visualization that use labeled circles. A classification is suggested with discussion of the various contributions on label arrangements in circles and on overlap removal.

2.1. Labels Arrangements in Circles

Forty-four articles published between 1999 and 2021 were collected to provide a comprehensive review of techniques for label arrangement using circular visual encoding. At a higher level, it is worth noting that the majority of papers discussed problem-driven rather than technique-driven approaches. Label arrangements in a circle can be broadly divided into three categories.

The first category is angular arrangement (A1), which is widely used in literature with different visual coding targets such as geographical information [13,14], statistical information [15,16,17], and relationships [16,18]. As an example, Topicks [18] groups topics as small dots inside circles with labels outside the circle to explore relationships between labels and topics.

Path arrangement (A2) [19,20,21,22,23] is the second proposed category. This arrangement is commonly used for small labels and long arc sizes, such as numbers and names. Emotion Cues [22], for example, is a visual analytical solution that analyzes students’ emotions using classroom videos. It was created to help teachers and parents quickly determine student engagement in class. The circle view, which stores each child’s feelings, was chosen from the four proposed views for the context of this paper. As a result, green represents surprise, yellow represents happiness, gray represents neutrality, magenta represents rage, blue represents sadness, purple represents disgust, and cyan represents fear.

Linear arrangement (A3) [24] is the third proposed arrangement. Approaches using this arrangement [25,26,27,28,29] represent visualization of emotions, time, statistics [30], or topics. Peltonen et al. [27], for example, proposed a circle view of negative feedback for exploratory search. As a result, labels were arranged in different circle layouts, from inner to outer circles. Keywords in the inner and outer rings on the same angle are similar. Their estimates of relevance represent the distance to the center, with high relevance in the center and linear decay to zero on the outer border. $A3$ is commonly used inside circles to explain details or to present an overview of information.

Table 1. Approaches using circles with three arrangements.

Arrangement	Years	Number of Approaches
A1	2010–2021	12
A2	2014–2021	11
A3	1999–2017	11

summarizes the frequency with which the three label arrangements were used over time. We can see that between 1999 and 2013, A3 was the most commonly used in literature, whereas between 2014 and 2021, A1 and A2 were the most commonly used.

2.2. Overlap Removal

Many algorithms [10,31] have been proposed to remove overlaps in graph embedding or between labels in maps, with the majority [11,12,32,33,34] being applicable to 1D or 2D layout. All of the proposed approaches, in general, fall into two categories: force-based adjustments and constraint-optimization-based approaches (COA).

For the first category, one important method is the force scan algorithm (FSA), which was first developed by Misue et al. in [35]. For the purpose of reducing node overlapping, the authors suggest a pushing force model and an associate algorithm: the push force scan algorithm. Because forces are applied horizontally first, then vertically for all nodes, this method can be used for 1D embedding. The authors also presented a second force model, the push-pull force scan algorithm (PSA)) that allows for both pushing and pulling forces. As a result, the embedding is smaller, and both techniques maintain the orthogonal ordering.

The main goal of COA approaches [11,33] is to minimize an objective function while preserving a set of constraints. Node movements are represented by an objective function, while constraints prevent overlapping. Marriott et al. [33] outlined four distinct COA strategies, where the initial one uses consistent scaling. The problem is then formulated as a convex quadratic-programming problem.

Although the aforementioned algorithms are designed to handle overlaps between pairs of nodes or rectangles in graph embedding in two dimensions, they can also be used for 1D embeddings with a cost error. Thus, Fadloun et al. [9] proposed an improved approach for removing overlaps from 1D graph embeddings. This algorithm has a complexity time ($O\left(\right|V\left|log\right(\left|V\right|\left)\right)$, where V is the number of nodes, and it preserves the relative distance between two nodes. Furthermore, there is no special attention paid to circular layout. Because of constraints such as arc space/position/direction, restricted space, variable orientation, and different arc levels, this type of visualization is frequently more complicated. The proposed approach, as described below, aims to improve previous algorithms by adding interactions to remove overlaps between labels.

3. Proposed Approach

The workflow depicted in Figure 1 was used to carry out this study. First, as previously described, techniques for problem-driven visualizations with circular label arrangement are assembled and classified into $A1,A2$, and $A3$ label layouts. Following this, a mathematical formulation for each arrangement is formed. Then, an enhanced linear arrangement is proposed. As a culminating point, a visualization tool called CircleVis is created to integrate all of the different arrangements; the new enhanced arrangement $A4$ and interaction techniques to reduce label overlap round out the enhancements to the tool. CircleVis users will be able to select an appropriate arrangement with numerous possible interactions. The first step of this workflow has been emphasized in the previous section; the sections below will be devoted to the remaining contributions.

3.1. Label Arrangement Formulation

Let T be a set of labels. Each label $t\in T$ is surrounded by a rectangle that describes a bounding box with a length l, height h, and position $p=(x_t,y_t)$ around the circle and an orientation angle q. In circle layout (see Figure 2), two main circles are drawn with the same center position c. The first covers the arcs’ $C_r$ border, while the second is used to create gaps between arcs and labels $C_v$. Note that $C_r$ and $C_v$ describe the radius of each circle with $C_r<C_v$. The mathematical formulation includes two parts: labels t and circles C:

$$t=\left\{p,q,l,h\right\},C=\left\{c,C_r,C_v\right\}$$

Each label is associated to an arc on the circle. All arrangements have the same angle, which is calculated according to the associated arc. $q_{ar{c}_{in}}$ is the initial arc angle and $q_{ar{c}_f}$ is the final arc angle. q of each label is calculated as follow:

• $q=q_{ar{c}_{in}}+((q_{ar{c}_f}-q_{ar{c}_{in}})/2)$
• $p=C_v\ast (cos\left(q_i\right),sin\left(q_i\right))$
• $l=|x_f|-|x_i|$
• $h=|y_f|-|y_i|$

• A1: Angular Arrangement:

As previously stated, $A1$ is frequently used due to the large amount of space available for drawing label characters while handling a large number of label elements. Furthermore, the arc size has no bearing on the label. Figure 3 shows an example of a set of labels arranged for each arc by rotating q from the circle center. In the following cases, q is updated to $q^{\prime }$:

-

If $\frac{\pi }{2}\le q_i\le \pi$, then $C_v=C_v+l_i$; the $p_i$ is calculated in association with the new $C_v$, and $q^{\prime }=-(\pi -q)$;

-

If $\pi <q<2\ast \pi$, then $q^{\prime }=2\ast \pi -q$.

• A2: Path Arrangement:

Labels in path arrangement follow the arc’s orientation. Each arc has a border length (L) that corresponds to the related arc length. However, arc lengths can be too short to draw labels with fixed sizes. Thus, users cannot see label without further interactions. In Figure 4, for example, “Madagasca” has a limited drawing space. For $A2$, $p_i$ is calculated using the same equation as $A1$. Labels in this case are paths that follows the arc orientation. However, they are placed in the middle of $p_i$, and if $l_{Arci}$ is the length of associated arc, each label length must be smaller or equal to arc length $l_i<=l_{Arci}$. If $l_i>l_{Arci}$, the label will be updated by plotting just the available length from the beginning of the label, which will be $l_{Arci}$.

• A3: Linear Arrangement

For drawing labels around circles without orientation, many approaches have used 1D layout. This arrangement is simple to read, even without turning the head. It employs two linear arrangements. The first ($A{3}_L$) involves drawing a rectangle around the real circle $C_r$ and then placing labels on the left, right, top, and bottom of the rectangle, as shown in Figure 5. The number of areas available to draw labels in this first layout is limited. If we choose the left and right sides, for example, we can use the space in the top and bottom. As a result, this arrangement is not widely used in the InfoVis community (see Section 2.1), but it may be found in website programming (http://bl.ocks.org/dbuezas/9306799 (last accessed on 1 December 2021)).

The second arrangement ($A{3}_{Ln}$) is illustrated in Figure 5. For this approach, there is no rectangle around the circle and each label is drawn according to the virtual circle and arc center. Furthermore, the label anchor is related to each arc position, such as: the start point in the left, the finish point in the right, the midpoint point on the top or bottom. This arrangement is also used in the literature; however, there is a problem with overlap between the label pairs. For $A3$ arrangement, there are three modifications of position:

• If $(0\le q_i\le \frac{\pi }{2})\cup (\frac{3\pi }{2}\le q_i\le 2\pi )$, then $p_i$ is the same;
• If $q_i=\frac{\pi }{2}$ or $q_i=\frac{3\pi }{2}$, then $p_i=p_i+\frac{l_i}{2}$;
• If $(\frac{\pi }{2}\le q_i\le \frac{3\pi }{2})$, then $p_i=p_i+l_i$.

• A4: Proposed Enhanced Linear Arrangement

Classical linear approaches place the center of labels according to a virtual circle with fixed radius, as shown in Figure 6. As a result, all labels with varying bounding box (rectangle encompassing the label) sizes will be placed in accordance with the fixed radius. As shown in Figure 6A, the radius of the virtual circle is assigned “long labels” and “short labels” (with the point drawn). We can see that the “long label” requires more space to display the label. To deal with this, the solution is to increase the virtual circle’s radius in order to display the “long label”. However, as shown in Figure 6B, a label with a small size can deviate from the real circle.

We propose an improved method for positioning labels as close to the circle as possible while using various label sizes.

This proposed method employs circles with a single/multiple levels (including arcs). It can be considered as an enhanced version of ($A{3}_{Ln}$) due to its advantages such as readability. The following improvements are given:

• T’s position will be as close to the circle’s arcs as possible.;
• All of the available open places around the circle will be occupied;
• Labels will be included in a circle and surrounded with weighted or unweighted arcs.

The initial difficulty is to line up the rectangles with the circle while leaving as little space between them as possible. An improved procedure is defined as follows:

• Draw a line from the $C_r$ to $C_v$;
• Place the rectangle in $\left(D_c\right)$ with the following dimensions: R the radius of $C_v$, D the semi-line from the rectangle center, and $\mathsf{\Theta }$ the angle between D and the rectangle, as shown in Figure 7;
• The distance S between the rectangle and the circle’s center is given using the following equations:

  $$\begin{array}{cc}\hfill L& =sin\theta \ast D\hfill \\ \hfill S_1& =cos\theta \ast D\hfill \\ \hfill {\mathsf{\Theta }}_1& =co{s}^{-1}(L/R)\hfill \\ \hfill S_2& =sin{\theta }_1\ast R\hfill \\ \hfill S& =S_1+S_2;\hfill \end{array}$$
• The bounding box coordinates x and y are calculated to obtain the shortest distance between the rectangle and circle centers;
• Finally, every label t is placed in its calculated position of $(x,y)$.

Figure 7 displays the proposed function for drawing T around the circle with the least amount of distance. Labels are placed in $p_i$, which is calculated with respect to S. $A4$ may be used for multi-level circles by building many virtual circles $C_v$. However, label overlapping can occur.

3.2. Overlap Removal

For this section, two methods for overlap removal are proposed: the 1D graph embedding function and the interactions techniques.

3.2.1. 1D Overlap-Removal Function

This method is inspired by [9] and adapted to the $A4$ arrangement for reducing overlaps in 1D graph embedding. The idea is to compose linear labels from two sides. The following steps are then applied:

• Each label is included in a rectangle;
• The same formulation as Section 3.1 is used in order to employ the remove-overlap function:
  Let $p_t^{\prime }$ be the function that calculates the final position of each label or rectangle. $p_t$ is the initial position of each label. The label is considered as a rectangle with $t\in T$, $t_h\left(t\right)$ (height of rectangle) in the interval of $[0,l_s-{\sum }_{x\in V}{t}_h\left(x\right)]$ ($l_s$ line size in each side):
  $p_{t_{min}}=p_t\left(1\right)$ and $p_{t_{max}}=p_t\left(\right|T\left|\right)$
  $p_t^{\prime }\left(t\right)=\frac{p_t\left(t\right)-p_{t_{min}}}{p_{t_{max}}-p_{t_{min}}}\times (l_s-{\displaystyle \sum _{x\in T}}{t}_h\left(x\right))$;
• The 1D function is used on each side separately as follow:
  • Two label rectangles $(t,t^{\prime })$ in T are overlapping if $|x_t-x_{t^{\prime }}|<\frac{l_t-l_{t^{\prime }}}{2}$ and $|y_t-y_{t^{\prime }}|<\frac{h_t-h_{t^{\prime }}}{2}$;
  • If labels overlap, then

    (a)

    Apply the remove-overlap function in the horizontal direction;

    (b)

    If there is not enough line length, then increase line size $l_s=l_s+k$, with k as the limit difference, to remove label overlap.

Figure 8 represents an example of removing overlap from labels using the 1D algorithm. It is observed from labels surrounded with circles in a and b that the proposed algorithm was able to detect and remove overlapping between “Romania” and “Portugal”. Furthermore, this algorithm can be used for four sides separately for linear arrangements. However, angle and path arrangements need 2D treatments. Thus, leveraging interactions for 2D label overlap is proposed in the next section.

3.2.2. Interactions

For this work, three user interactions to reduce overlaps are discussed: semantic zooming; changing the label font size; and merging or splitting arcs.

-

Semantic Zoom:

In semantic zoom, the radius of the circle becomes larger in such way that the area of each arc is expanded, allowing for extra label-drawing space. This action is useful for reducing label overlap. Figure 9 illustrates an example of this interaction. In Figure 9a, an overlap between the “Hungary” and “Switzerland” labels is observed. However, the overlap between the previous labels disappears in Figure 9b when using semantic zoom, or, specifically, by increasing the circle radius and re-drawing the circle labels.

-

Changing label font size:

For this interaction two font size options are presented: a global option, for which font size is changed for all labels, and a local option, where the font size is changed only for specific labels or overlapped ones. For example, Figure 10a shows an overlap between “Filand” and “North Macedonia”. As seen in Figure 10b, when the global font size of the labels is decreased, the overlap between these labels is eliminated. Moreover, Figure 11a shows overlap between “Cameroon” and “Cote Divoire”. As seen in Figure 11b, reducing the font sizes of these labels eliminates label overlapping.

-

Merge or split interactions:

Reducing label overlap can also be accomplished by the merging or splitting arcs interactions. Figure 12a shows a circle with overlapping labels; after merging the two labels “Kazakhstan” and “Hungary”, the overlapping is reduced, as shown in Figure 12b.

Users can form groups by using merge/split. Merge enables users to create groups that can be structured hierarchically (root and children) rather than simply as sets of objects [36]. In order to create a new parent node, we use the sum percentages of merged objects (children). Each node split in hierarchy layout displays arcs divided by the number and percentage of children at the next level. For example, if “Kazakhstan” and “Hungary” each have 5%, we add a new percentage 10% to the dataset called “HungaryKaz” and remove the two 5% associated with their labels. We save the information from the merged objects (label and percentage) in the new object data so that it can be used in the split action.

3.3. CircleVis Design

As illustrated in Figure 13, CircleVis is a new interactive visualization tool in which all the previous arrangements were implemented. Furthermore, this tool was designed using the information visualization process [37] and respects the compatibility of multiple views [38]. The user interface is implemented using ReactJS (https://reactjs.org/ (last accessed on 1 December 2021)). CircleVis views are implemented using the d3.js library [39]. The input data are formatted with JSON, and the user interface is connected to the server using the JQuery library (https://www.jquery.com (last accessed on 1 December 2021)). CircleVis code is available on GitHub (https://github.com/samfad91/CircleVis (accessed on 1 December 2021)). For the next sections, data structuring, visual encoding, and interaction strategies used by CircleVis are discussed.

• Data Curation:

CircleVis datasets are organized under the JSON format to enable holding items (statistical information). Each item has a name, a value (or a percentage), and a color (if is it available or generated after the save action). If the file contains numbers that are not normalized, a normalization between 0.1 and 1 is provided to generate percentage. Users can directly use the tool to generate and store their datasets, or import existing files. The JSON file contains a set of elements (arcs) and each one has attributes. For example, the arc of USA can have: $\{id:1,label:“USA”,value:0.3,color:“red”,fontsize:10,children:\left[\right]\}$. “Children” refers to the list of other arcs that are merged in USA arc. They have the same arc structure inside the attribute children. Each file can be presented with a variety of visual encodings, as described in the next section.

• Visual Mapping:

CircleVis includes various views (see Figure 13) depending on the label arrangement techniques ($A1$, $A2$, $A3$) previously discussed, as well as our new arrangement ($A4$). The top section of Figure 13 introduces the label descriptions with many possible parameters, such as weights (percentages associated with arcs), size, and color. As a result, compatible circles are provided, which allow users to compare and decide which one to use. Circles in the middle section are presented using a classic representation of static circles with weighted arcs and external labels. In order to calculate the percentage for each arc, the label size is maintained and normalized (divide each value/weight by the sum of the set). Next, the default visual encoding is used for every circle as follows:

• Color: initially, a color between blue and red is associated for each arc [40];
• Font size: initial label size is set to 10 (see font size slider in Figure 13). When 0 is selected for the individual label parameter, it indicates that there will be no label size augmentation ($10+0$);
• Arc size: arc weight is normalized to obtain the percentage for each dataset;
• Parent arc size/color: The arc percentages for the parent size is considered while combining arcs to obtain the new percentage. Additionally, the parent color is randomly selected based on the colors of the children. Otherwise, the initial visual encoding in split action is maintained.

The tool bar can be found on the left side of CircleVis in Figure 13. It contains several interactions to help users extract knowledge from the dataset. As discussed before, the interactions include zooming in or out, adding or removing objects, and changing the font size, labels, percentages, and colors. Additionally, the possibility of using an overlap-removal algorithm is offered. Users can also export or save their data in a structured JSON format or save individual circles as SVG files.

4. Evaluation

This section describes the data used to evaluate CircleVis and presents and discusses user evaluations.

4.1. Data Collection and Preparation

The data used for the evaluation of the proposed work were collected from WorldOmeters (https://www.worldometers.info/coronavirus/ (accessed on 1 November 2021)), and are related to the COVID-19 pandemic. This website provides real time world statistics in CSV format since the start of the pandemic. Next, the top 15 nations in COVID-19 cumulative cases until 2 September 2021 were selected to create visuals. After that, the data was categorized using the CONTINENT attribute and arranged using the ascending norm. Finally, data was shuffled to avoid the risk of overlaps at the top left of the circle because the smallest parts are consecutive and close to each other. For the proposed assessment, three datasets for the continents of Europe, Africa, and America were used. Data vary in size, with 17 countries from Europe, 16 from Africa, and 10 from America. They also have different label sizes and arc weights.

4.2. Evaluation and Results

This section describes the assessment approach and provides user information. Furthermore, functionalities and label arrangements are evaluated using the three datasets. Finally, the options for removing user overlaps are tested for one dataset.

4.2.1. Assessment Approach

The evaluation protocol is based on evaluation approaches in the field of InfoVis [38,41]. More specifically, it falls under the user experience (UE) scenario [41], as it deals with understanding visualizations. The primary goal is to collect user feedback on various arrangement layouts. UE evaluation methods such as the usability test, field observation, and laboratory questionnaire are introduced for this purpose. In order to achieve effective a consistent view, we kept the same dataset color encoding as in [38]. The protocol includes the following five steps:

• Understanding the working environment: in this step, the room is prepared for users to conduct the assessment. Because CircleVis is a web application, all users need is a web browser to obtain access;
• Data explanation and visualizations: following the installation of the room, data is explained using various views (note that links are included in CircleVis to explain the views);
• Specify the evaluation constraints: in this step, a questionnaire is created for each view, as well as for comparison between views;
• Presentation: users learn about the test time in this step, then start the evaluation and answer the questions (normally, this part must be filmed);
• Interview: following our testing of CircleVis, a visualization interview is conducted with users to learn about their difficulties and suggestions.

4.2.2. User Information

The users who tried out our solution were nine men and four women between the ages of 18 and 35 (most were students). The majority of users were already familiar with visualization software and had a basic understanding of InfoVis. On a scale of 1 to 10, they were asked to score the utility and use of each view. The questionnaire included tasks for all CircleVis functionalities.

4.2.3. Results and Discussion

Three different evaluations were made during this work. First, various arrangements were assessed with three datasets containing 17, 16, and 10 elements (see Figure 14), respectively. Second, CircleVis functionalities were evaluated. Finally, user evaluations of the proposed options to remove overlaps were given.

User evaluations for the label arrangement methods are illustrated in

Table 2. User evaluations (/10) of different arrangements using various datasets.

Data	$A1$	$A2$	$A{3}_L$	$A{3}_{Ln}$	$A4$
Europe	7,7	4,4	6	5,5	5,2
Africa	7,6	4,3	7	5	4,2
America	7,7	4	6	4	4,7

. The majority of users chose the $A1$ arrangement for each data source because of the small arc weight and extended label length. Furthermore, Figure 15 indicates different dataset visualizations using the proposed arrangements. The obtained results show that labels in $A1$ do not overlap in short arcs. Unlike the $A2$ arrangement, labels are not completely written because they are long and related to small arcs (arrangement fails). The $A{3}_L$ structure was preferred, particularly with the Europe and America datasets. This was due to label length having no bearing on the structure. Moreover, the Europe dataset’s arcs are a bit wide despite its 17 elements, and the America dataset contains only 10 elements and three minor arcs that cause a small overlap. For the Europe and Africa datasets, most users accepted the $A{3}_{Ln}$ and $A4$ arrangements because they do not produce label overlaps in all test dataset. This was commonly accepted despite having two or three overlaps, in contrast to America (which has the fewest elements (10)), which has six or seven overlaps that are unacceptable or incomprehensible.

Table 3. User evaluations of CircleVis functionalities.

Functionalities	Usability
Randomize data	54%
Merge/Split	92%
Add/Delete item	100%
Import/save data	100%

illustrates the user evaluations of CircleVis functionalities. It was noted that the randomize function was selected by 54% of users because it was useful to test or compare datasets with different sizes, arc weights, and label lengths. Other functions, such as merge/split or add/delete items, were regarded as useful by the majority of users. Arc color and label color were not evaluated because they were user suggestions.

Finally, user evaluations for overlap-removal options are given in

Table 4. User evaluation (/10) of overlap-removal options.

Arrangements	$A1$	$A2$	$A{3}_L$	$A{3}_{Ln}$	$A4$
Zoom semantic	6	4,6	5,4	5,6	5,6
Global size	5,8	4,4	5	5,4	5,5
Local size	6,4	5	6	6	6
Algorithm	/	/	5	/	/

. The most efficient technique was “changing the font size locally” because it was useful where there are few overlaps, as in the European dataset. “Semantic zoom” and “global font size change” were useful, especially with $A1$, $A{3}_{Ln}$, and $A4$. However, “semantic zoom” is not the best option for $A2$, because it required significant zoom to remove overlaps. Thus, the illustration may leave the arrangement screen (SVG limit is 600 pixels). Last, due to the fact that removing overlaps is only used for one dimension on each circle side, this algorithm is more efficient for the $A{3}_L$ approach.

4.2.4. Comparison Criteria

In this section, using the same datasets, we attempt to evaluate user perception based on circle labeling. If the area has width (w) and height (h), the circle radius will be calculated as $min(w,h)/4$. In this evaluation, we adjust the interactions between “global font size” and “geometric zoom.” When the data increased by more than 16 (see

Table 5. Evaluation criteria of user perceptions using CircleVis.

Criteria/Datasets Sizes	Labels < 10	10 < Labels < 16	Labels ≥ 16
Font Size	18	10	10
Area	600 × 600 px	700 × 700 px	800 × 800 px
Circle Radius	150 px	175 px	200 px
Easy to Read	Yes	Medium	Hard

), users favored using a large screen area and increasing the font size of the labels for easier interpretation. Moreover, users suggested a minimum font size of 13. In addition, they recommend customization of area according to the label set and circle size for future work.

4.3. Discussion

“CircleVis,” as previously described, displays multiple views of the same dataset with different label arrangements (angular, path, list, linear) and the proposed arrangement. It helps users in making decisions about circle and label arrangements to be chosen. CircleVis also includes some interactions that help users update the circle visual encoding and remove label overlap (colors, font sizes, merge/split, semantic/geometric zoom, and so on). In our study, visual encoding of circles was confined to simple weighted circles (donut circles). To select arrangements, the proposed mathematical formulations in Section 3.1 can be easily used or implemented in other circular layouts. For example, if we use a sunburst layout with $A1$ as the external arrangement, we only need to select the external circle border and apply the mathematical formula to each label. The method for removing overlap described above can also be used. Another constraint is the size of the dataset and the percentages of the data. More space and interactions are required to accommodate a greater number of labels. Finally, additional interactions and automation can be added to the tool to help users choose the best-labeled circle.

5. Conclusions

This paper presented CircleVis, a new visualization tool for labeling a circular layout. The proposed tool was designed to help users to select the best arrangement for dataset visualization while avoiding label overlap. A review of the labeled-circle approaches presented in the InfoVis domain was given. After that, label-arrangement methods were grouped into three main categories, while a fourth category that includes enhanced linear arrangements was proposed. Furthermore, a mathematical model was given to every category of circular labeling arrangements. For the overlap-removal problem, CircleVis was implemented with a removal function for 1D graph embedding. Moreover, visual interactions were proposed to allow the user to make decisions about the most favorable label arrangement method. Finally, a user study was conducted to test the functionalities of the designed tool, as well as the overlap-removal options. The obtained results demonstrated the simplicity and efficiency of CircleVis.

As future work, more interaction techniques, such as manual/automatic arc ordering, could be incorporated. Furthermore, we intend to provide other visual encoding techniques for circular layouts (such as chord/sunburst circles, hierarchical circles, etc.). In addition, we plan to test CircleVis in circular layouts with various 2D overlapping removal strategies while increasing the number of levels in each circle.