We will split the visualization into two parts: implementation and features.
\section{Implementation}
For the visualization we have considered multiple options. First of all we had a look at quite popular choices as:
\begin{itemize}
\item d3.js
\item cytoscape.js
\item cola.js
\item spring.js
\end{itemize}
In the end, we have decided to use combination of d3 and d3-graphviz, which offers rendering from DOT format, as we had the conversion to DOT format included in the Python implementation. Another benefit was the ability of d3-graphviz to do transitions between different trees.
For the ease of development, and also usage, we have considered developing the web app in the React. However we encountered issues with one of the dependencies of d3-graphviz that prevented us from that. Therefore the entire frontend of the web app is done with 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 differs. 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.
Last feature of the web page are \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 following scenarios:
\begin{enumerate}
\item\textit{Single rotation} and \textit{double rotation} that happen as 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 visualization of two trees at once, we have decided to prepare following scenarios:
\begin{enumerate}
\item\textit{Rank difference}, where AVL and WAVL trees differ in ranks after a deletion. This is caused by the relaxation of the \textit{AVL Rule} and allows to halt 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. This is caused by halting the deletion sooner as opposed to AVL tree where the rebalancing continues and rotation happens higher in the tree.
