# CircleVis: A Visualization Tool for Circular Labeling Arrangements and Overlap Removal
## 3 Proposed Approach
### 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/](https://reactjs.org/)]([https://reactjs.org/](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](https://www.jquery.com)]([https://www.jquery.com](https://www.jquery.com)) (last accessed on 1 December 2021)). _CircleVis_ code is available on GitHub ([[https://github.com/samfad91/CircleVis](https://github.com/samfad91/CircleVis)]([https://github.com/samfad91/CircleVis](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  
Figure 11: Example of removing overlap using _local font size change_: (**a**) before use; (**b**) after use. Figure 12: Example of removing overlap by _merging two labels_: (**a**) before use; (**b**) after use. 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:[]\}\). \"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.