-
Notifications
You must be signed in to change notification settings - Fork 0
/
about.html
113 lines (108 loc) · 9.53 KB
/
about.html
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
<html>
<body>
<nav class="navbar navbar-default navbar-static-top col-lg-10 col-9" id="topNav">
<div class="navbar-header">
<a class="navbar-brand" id="brand-name" href="/" data-step="3" data-intro="Tree Visual" data-position="right" data-scrollTo="tooltip">
Tree<span style="color: #0c2340;">Visual</span>
</a>
</div>
</nav>
<div class="container-fluid" id="mainDiv">
<div class="row">
<!-- aboutDiv -->
<div class="col-lg-10 col-9 row my-3" id="aboutDiv">
<p>
TreeVisual is an educational tool that provides an accessible web interface for students to explore and interact with hierarchical data visualizations of real-world data sets. A variety of modern tree layout algorithms (including animations and fully interactive views) allow users to discover patterns, relationships, and other properties from the underlying data. The data sets are drawn from various applications, including publication and citation, government structure, import and export, and the tree of life. Users learn how to compare and evaluate different tree visualizations in side-by-side panels, which can be tweaked and augmented by various interactions. Filtering and selection make even very dense views easy to visualize and understand.
</p>
<div>
<p id="motivation" class="h4">Motivation</p>
<p>
Tree diagrams are used to represent hierarchical data structures in a graphical form. They are given the name "tree" because classic representations resemble a tree, with the root at the base or beginning of the view and leaves at the end. Many different kinds of data can be represented in a hierarchical format, such as organizational structures, species taxonomy, etc. Tree visualization is a fundamental topic of information visualization, making it an essential part of a data visualization course.
</p>
</div>
<div>
<p id="layouts" class="h4">Layouts</p>
<p>
TreeVisual supports several layouts that are interactive and show various levels of each hierarchical structure. Some layouts are best suited for viewing leaves, while others allow users to dive into the hierarchical structure. For example, treemaps [1] display a single level of the tree structure at a time, while radial trees can show the entire hierarchical structure simultaneously.
</p>
<p>
TreeVisual includes two treemap layouts, a standard treemap displaying leaves only and a zoomable treemap. The zoomable treemap [2] allows users to explore each level of the hierarchy, zooming in or out by clicking the parent of the displayed nodes. The standard treemap shows all the leaves in a variety of ways. The binary tiling strategy recursively partitions the specified nodes into an approximately balanced binary tree, choosing horizontal partitioning for wide rectangles and vertical partitioning for tall rectangles. The slice strategy divides the rectangular area vertically according to the attribute of each of the specified node's children, while the dice strategy divides them horizontally. The slice and dice strategy displays nodes horizontally and vertically in an alternative manner.
</p>
<p>
The radial tree diagrams are closer to more traditional hierarchical views. The standard radial tree automatically displays all the nodes from the root level to the leaf level. The collapsible radial tree [3] exposes a node's children via animated transition upon clicking on that node.
</p>
<p>
Besides treemaps and radial trees, TreeVisual also includes two additional layouts: pack and sunburst. The pack diagram uses nested circles to represent the hierarchy. The size of each node's circle represents the accumulated attribute values of its leaves. The sunburst diagram [4] depicts parent-children relationships by concentric rings. In this layout, the circle at the center represents the root, while each successive ring moving outward represents a tree level. By clicking on any node, users zoom into the subtree rooted at the clicked node. Clicking on the circle at the center brings the view a level up of the hierarchy.
</p>
</div>
<div>
<p id="data" class="h4">Data sets</p>
<p>
TreeVisual comes with a set of example data sets from various fields. The data sets are drawn from different sources, including publication and citation, government structure, import and export, and the tree of life.
</p>
</div>
<div>
<p id="interactions" class="h4">Interactions</p>
<p>
TreeVisual provides essential interaction functions to allow users to compare different layouts in two side-by-side panels. There are options to adjust the layout appearance. For example, users can change the node's size either in general or by an attribute accumulated over its leaves.
</p>
<p>
Besides changing the appearance, users can filter the drawing by pruning each level based on its labels and clicking on the "Apply Filters" button. They can also select any leaf nodes. Additionally, users can mouse over a node in the tree layout for highlighting. The descendent nodes are colored based on the colors assigned to the immediate children of the root.
</p>
</div>
<div>
<p id="team" class="h4">Team</p>
<p>We acknowledge the following who have contributed to the design and development of TreeVisual:</p>
<ul>
<li>Principal investigator: Chaoli Wang</li>
<li>Project lead: Brendan O'Handley</li>
<li>Advisory board: Christine Trinter</li>
</ul>
<p></p>
<ul>
<li>Haobin Duan ~ 07/2020-08/2020</li>
<li>Yuheng Wu ~ 07/2021-09/2021</li>
</ul>
</div>
<div>
<p id="acknowledgements" class="h4">Acknowledgements</p>
<p>This project is supported by the U.S. National Science Foundation under grant DUE-1833129.</p>
</div>
<!-- <strike> -->
<div>
<p id="references" class="h4">References</p>
<p><a id="cit1">[1]</a> B. Shneiderman, "Tree Visualization with Tree-Maps: 2-D Space-Filling Approach," ACM Trans. Graph., vol. 11, no. 1, pp. 92-99, 1992.</p>
<p><a id="cit2">[2]</a> R. Blanch and E. Lecolinet, "Browsing Zoomable Treemaps: Structure-Aware Multi-Scale Navigation Techniques," IEEE Trans. Vis. Comput. Graph., vol. 13, no. 6, pp. 1248-1253, 2007.</p>
<p><a id="cit3">[3]</a> K.-P. Yee, D. Fisher, R. Dhamija, and M. Hearst, "Animated Exploration of Dynamic Graphs with Radial Layout," Proc. IEEE InfoVis, pp. 43-50, 2001.</p>
<p><a id="cit4">[4]</a> J. T. Stasko and E. Zhang, "Focus+Context Display and Navigation Techniques for Enhancing Radial, Space-Filling Hierarchy Visualizations," Proc. IEEE InfoVis, pp. 57-65, 2000.</p>
</div>
<!-- </strike> -->
</div>
<!-- end aboutDiv -->
<!-- sidebar -->
<div class="col-lg-2 col-3" style="overflow-y: auto; overflow-x: hidden; padding-left: 0px;" id="sidebar">
<div id="sidebarInsideDiv" class="ml-auto ml-0" style="width: 100%; padding-left: 15px;">
<form>
<h2 id="toolbar-head" style="font-size: 20px; margin-bottom: 20px; width: 100%; padding-bottom: 13px; padding-top: 20px; margin-bottom: -10px; color: #000;">
<b>Navigation</b>
<a id="back" href="javascript:void(0)" onclick="backfromAbout();" class="toolbox-link">back</a>
</h2>
<hr />
<div id="naviDiv" class="col-md-12">
<a href="#motivation"><h2>Motivation</h2></a>
<a href="#layouts"><h2>Layouts</h2></a>
<a href="#data"><h2>Data sets</h2></a>
<a href="#interactions"><h2>Interactions</h2></a>
<a href="#team"><h2>Team</h2></a>
<a href="#acknowledgements"><h2>Acknowledgements</h2></a>
<a href="#references"><h2>References</h2></a>
</div>
</form>
</div>
</div>
<!-- sidebar -->
</div>
<!-- row -->
</div>
</body>
</html>