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.
Via NPM
npm i binary-tree-visualizer
<style>
body, html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
</style>
<body>
<canvas></canvas>
</body>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'));drawBinaryTree can take a 3rd options argument
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
};
Theme can be tweaked as well
import { setTheme } from 'binary-tree-visualizer';
setTheme(options);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
}[],
};A Binary search tree implementation is also given out of the box
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'));