43 lines
No EOL
3.3 KiB
TeX
43 lines
No EOL
3.3 KiB
TeX
\chapter{Visualization}
|
|
|
|
We will split the visualization description into two parts: implementation and features. Screenshots of the web page can be seen in \autoref{fig:visualization} and \autoref{fig:comparator}.
|
|
|
|
\section{Implementation}
|
|
|
|
For the visualization, we have considered multiple options. First of all we had a look at quite popular choices as \texttt{d3.js}, \texttt{cytoscape.js}, \texttt{cola.js} or \texttt{spring.js}.
|
|
|
|
Our choice of frameworks was influenced by the already implemented conversion of the tree to the DOT format in Python. For that reason, we have used a combination of \texttt{d3}~\footnote{\url{https://github.com/d3/d3}} and \texttt{d3-graphviz}~\footnote{\url{https://github.com/magjac/d3-graphviz}}, which offers rendering from the DOT format. Another benefit was the ability of \texttt{d3-graphviz} to do transitions between different trees.
|
|
|
|
We have considered developing the web app in React for ease of development and usage. However, we encountered issues with one of the dependencies of \texttt{d3-graphviz} that prevented us from that. Therefore the entire frontend of the web app is done with Bootstrap~\footnote{\url{https://github.com/twbs/bootstrap}}, which provides CSS and also UI elements.
|
|
|
|
\section{Features}
|
|
|
|
We started with a simple visualization of the operations, such as \texttt{insert} and \texttt{delete}, on the WAVL tree. Having the implementations in Python influenced our decision to visualize them in addition to WAVL.
|
|
|
|
As mentioned in \autoref{chap:testing}, we have used property-based testing to find minimal counter-examples where AVL and WAVL differ. For that purpose, we have implemented the \textit{comparator} class. Porting that class to JavaScript allowed us to visualize different trees at the same time.
|
|
|
|
The last feature of the web page is \textit{predefined scenarios}. Motivation for creating predefined scenarios is simple, and that is being able to trigger different parts of the algorithms that are used in rebalancing or triggering a deletion that causes differences between AVL and WAVL trees. For visualization, we cover the following scenarios:
|
|
\begin{enumerate}
|
|
\item \textit{Single rotation} and \textit{double rotation} that happens as the final part of the deletion rebalance in the WAVL tree.
|
|
\item \textit{Double demotion} that happens during the propagation part of the deletion rebalance in the WAVL tree.
|
|
\end{enumerate}
|
|
|
|
For the visualization of two trees at once, we have decided to prepare the following scenarios:
|
|
\begin{enumerate}
|
|
\item \textit{Rank difference}, where AVL and WAVL trees differ in ranks after a deletion, which can be caused by the relaxation of the \textit{AVL Rule} and allows halting the deletion rebalancing sooner in the WAVL tree.
|
|
\item \textit{Different trees}, where AVL and WAVL trees differ not only in rank, but also are not isomorphic, which can be caused by halting the deletion sooner opposed to the AVL tree where the rebalancing continues, and rotation happens higher in the tree.
|
|
\end{enumerate}
|
|
|
|
\begin{figure}
|
|
\centering
|
|
\includegraphics[scale=0.20,angle=90]{visualization.png}
|
|
\caption{Visualization of a chosen tree.}
|
|
\label{fig:visualization}
|
|
\end{figure}
|
|
|
|
\begin{figure}
|
|
\centering
|
|
\includegraphics[scale=0.20,angle=90]{comparator.png}
|
|
\caption{Comparator part of the visualization.}
|
|
\label{fig:comparator}
|
|
\end{figure} |