# Binary Tree Visualizer  
This is a visualizer for binary trees.
Use the BinaryTreeNode and BinarySearchTreeNode classes provided in the library to create a binary tree or extend it to create a different type of binary tree.
To visualize it just pass the root node and the html canvas element to the drawBinaryTree function.
# Installation
Via NPM
```
npm i binary-tree-visualizer
```
# Usage
## Default
```html
```
```js
import { BinaryTreeNode, drawBinaryTree } from 'binary-tree-visualizer';
// Init a new root binary tree node
const root = new BinaryTreeNode(100);
// Setting the left child
root.setLeft(new BinaryTreeNode(50));
// Setting the left > left child
root.left.setLeft(new BinaryTreeNode(30));
// Setting the right child
root.setRight(new BinaryTreeNode(145));
// Draw a binary tree with all default config
// Canvas will take up entire height and width of the screen
drawBinaryTree(root, document.querySelector('canvas'));
```
## Options
drawBinaryTree can take a 3rd options argument
```js
import { VisualizationType } from 'binary-tree-visualizer';
type options = {
// SIMPLE: Taken by default. It assumes that max number of leaf nodes are present and decides the spacing accordingly.
// PRETTY: Spacing is dynamic according to the nodes.
// HIGHLIGHT: This is the same as PRETTY. Only difference is that the nodes expand when they are hovered over.
// EXPANDABLE: Only one child can be viewed at a time.
type?: VisualizationType.SIMPLE | VisualizationType.EXPANDABLE | VisualizationType.PRETTY | VisualizationType.HIGHLIGHT,
// SUGGESTION: Max height of the canvas. If required more will be taken
maxHeight?: number,
// SUGGESTION: Max width of the canvas. If required more will be taken
maxWidth?: number
};
```
### Simple
### Pretty
### Expandable
## Theme
Theme can be tweaked as well
```js
import { setTheme } from 'binary-tree-visualizer';
setTheme(options);
```
```ts
type options = {
// Radius of nodes (DEFAULT 20)
radius?: number,
// By how many times radius can grow or shrink (DEFAULT 1.25)
growthAndShrinkTimes: number,
// Minimum leaf node spacing (DEFAULT 60)
leafNodeSpace?: number,
// Minimum vertical spacing (DEFAULT 90)
lineHeight?: number,
// The font size of the value shown inside the node
fontSize: number,
// Font family shown on canvas (DEFAULT 'Poppins') (import required)
textFont?: string,
// The color of lines/strokes (DEFAULT '#f56042')
strokeColor?: string,
// A random color that is selected for each node circle
// (DEFAULT [{bgColor: '#fff2e0', borderColor: '#f56042'}])
colorArray?: {
borderColor: string
bgColor: string
}[],
};
```
## Binary Search Tree
A Binary search tree implementation is also given out of the box
```js
import { BinarySearchTreeNode, drawBinaryTree } from 'binary-tree-visualizer';
const root = new BinarySearchTreeNode(100);
[50, 145, 150, 130, 120, 140, 30, 70, 75].forEach((num) => root.insert(num));
drawBinaryTree(root, document.querySelector('canvas'));
```
# Demo
- Code sandbox: https://codesandbox.io/s/binary-tree-visualizer-coqx6?file=/src/index.ts
- Example: https://github.com/tirthamouli/example-binary-tree-visualizer
- Video documentation: https://youtube.com/playlist?list=PLDKunvJxaiVWxG4Ow5l8g6aHkqC9ZYy8x