Skip to content
Javascript library for drawing nice binary trees
JavaScript CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


Javascript library for drawing nice binary trees

I found that I needed to display a binary tree nicely and didn't like the options out there. I came up with an algorithm to display them, but I also wanted to tell others how I did it. And I wanted it to look nice too. So I added some animation in as well.

To use this:

Download the latest copy of velocity. It can be found at, but the actual file should be here:

In the of your HTML page, include this:

<script src='velocity.min.js'></script>
<script src="AdHavocBinaryTree.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="AdHavocBinaryTree.css" />

Set your tree in the body with an SVG like this:

<svg id="exampleSvg" xmlns="" version="1.1" width="1000px" height="1000px" preserveAspectRatio="xMinYMin meet"></svg>

Initialize the tree with some data using javascript like this:

var treeText ="<root startNode=\"1\"><node id=\"1\" left=\"2\" right=\"3\"/><node id=\"2\"/><node id=\"3\"/></root>"
var tree = AdHavocBinaryTree.createTreeFromXml(treeText, document.getElementById("exampleSvg"));
You can’t perform that action at this time.