Javascript library for drawing nice binary trees
Switch branches/tags
Nothing to show
Clone or download


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"));