Markdown Visualization

This feature allows user creating flexible interactive visualization with ease.

Btree

(3)
(1,2)(4,5,6,8)

(3)
(1,2)(4,5,6,7,8)

(3,6)
(1,2)(4,5)(7,8)

Multi Visual Draw

linear(height=30)
1 2 3 4{}
linear(height=30,offsetY=30)
2 3 4 5
tree(height=30,offsetY=60)
(3)
(1,2)(4,5,6,8)
bar()
3 1 2

linear(height=30)
1 2 3 4
tree()
(3)
(1,2)(4,5,6,8)
bar()
3 1 2

Static Binary Tree

(4)
(2)(5)
(1)()(3)()

Interactive Binary Search Tree

31 30 23 50 45 48 70 67 75

RedBlack Tree

(4){"c": "black"}
(2){"c": "black"}(5){"c":"green"}
(1){"c": "black"}(3){"c":"red"}

(4){"c": "black"}
(2){"c": "black"}(5){"c":"red"}
(1){"c": "black"}(3){"c":"red"}(10){"c": "black"}(15){"c": "black"}

Bars

1,7,6,3,4,5,2

1,7,3,6,4,2,5

TODO

  • Array, Linkedlist
  • Graph
  • Geometry Math

Tabs {.tabset}

Tab One

RedBlackTree

(4){"c": "black"}
(2){"c": "black"}(5){"c":"green"}
(1){"c": "black"}(3){"c":"red"}

(4){"c": "black"}
(2){"c": "black"}(5){"c":"red"}
(1){"c": "black"}(3){"c":"red"}(10){"c": "black"}(15){"c": "black"}

Tab Two

BinaryTree

var x = 1;
let y = 2;
const z = x + y;

{-}

Code Highlight

// SelectionSort sorts array of items
function selectionSort(a) {
  const n = a.length
  for (let i = 0; i < n-1; i++) {
    for (let j = i + 1; j < n; j++) {
      if (a[j] < a[i]) {
        let tmp = a[i]
        a[i] = a[j]
        a[j] = tmp
      }
    }
  }
}

Debugable CodeEditor

// SelectionSort sorts array of items
function selectionSort(a) {
  const n = a.length
  for (let i = 0; i < n-1; i++) {
    for (let j = i + 1; j < n; j++) {
      if (a[j] < a[i]) {
        let tmp = a[i]
        a[i] = a[j]
        a[j] = tmp
      }
    }
  }

  return a
}

selectionSort([3,2,1,4,5])

Slideshow with Reveal.js

Code slideshow animation, focus and press f to enter fullscreen mode

Blockly Programming

Programmable drag and drop blocks