Heapsort start from half back because those are leaves Animate steps of sift-down by highlighting and swapping numbers in tree and array simultaneously. Code is high level: while(greatest(p, left(p), right(p)) == p) { ... } match up variables in code and nodes in tree/elements in arr show code of micro-functions (left, right) as hovered highlight what those numbers mean in array, like for left = 2*i + 1 show two different backgrounded i length chunks and match them up in the tree Have consistent formatting clues: • Foreground for data type • Background for algorithm active elements (p, left, right) • Border for selection/hover Option to switch between 0 and 1 based arrays The best part will be the design of decoupling the visuals from the actual data, so hover on arr/node can call highlight(this.data) and it should affect all visual representations. Change code language and display algorithmic steps. Each step may highlight non-contiguous parts of the code.