prettybt

Simple binary tree visualizer

Usage no npm install needed!

<script type="module">
  import prettybt from 'https://cdn.skypack.dev/prettybt';
</script>

README

prettybt

Simple binary tree visualizer

Demo

binary trees

Usage

Browser

<body>

<!-- always use a specific commit hash -->
<script src="https://cdn.jsdelivr.net/gh/ggorlen/prettybt@8ad0935/js/pbt.js"></script>
<script>

var canvas = document.createElement("canvas");
document.body.appendChild(canvas);

var tree = {val: 1, left: {val: 2}, right: {val: 3}};
// or: var tree = PrettyBT.treeFromString("[a,b,c,,d]");

var size = 15;
PrettyBT.drawBinaryTree(canvas, tree, size);

</script>
</body>

Making an SVG with canvas2svg

<body>

<script src="https://cdn.jsdelivr.net/gh/gliffy/canvas2svg@eaab317/canvas2svg.js"></script>
<script src="https://cdn.jsdelivr.net/gh/ggorlen/prettybt@8ad0935/js/pbt.js"></script>
<script>

var tree = PrettyBT.randomTree();
var dimensions = PrettyBT.computeDimensions(tree);
var canvas = (function () {
  var ctx = new C2S(dimensions.width, dimensions.height);
  return {
    getContext: function () {
      return ctx;
    }
  };
})();
PrettyBT.drawBinaryTree(canvas, tree);

var svg = document.createElement("div");
document.body.appendChild(svg);
svg.outerHTML = canvas.getContext().getSerializedSvg();

</script>
</body>

NodeJS with canvas

const {createCanvas} = require("canvas");
const PrettyBT = require("prettybt");

const canvas = createCanvas();
const tree = PrettyBT.randomTree();
PrettyBT.drawBinaryTree(canvas, tree);
console.log('<img src="' + canvas.toDataURL() + '" />');