Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

HTML

              
                <div id="hi">
  <input type="number" id="value" value="6">
  <form id="controls">
  <button id="insert">insert</button>
  <button id="randomize">randomize</button>
  <button id="reset">reset</button>
  </form>
</div>
              
            
!

CSS

              
                /* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

svg {
  border: 1px solid black;
  margin: auto;
  display: block;
  width: 730px;
}
div#hi {
  width: 335px;
  margin: auto;
  display: block;
}

.node circle {
  fill: #fff;
  stroke: steelblue;
  stroke-width: 2px;
}

.node text { font: 12px sans-serif; }

.node--internal text {
  text-shadow: 0 1px 0 #fff, 0 -1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff;
}

.node text{
  font-size: 0.8em;
  font-family: Courier;
  font-weight: 400;
}

.hidden{
  display: none;
}

.link {
  fill: none;
  stroke: #ccc;
  stroke-width: 2px;
}

input#value {
  border: 4px solid black;
  font-size: 1em;
  font-family: Courier;
  width: 70px;
  text-align: center;
  display: inline;
}

button {
  outline: none;
  color: black;
  font-size: 1em;
  font-family: Courier;
  display: inline;
}

form {
  display: inline;
}
              
            
!

JS

              
                function depthFirstSearch(tree, value) {
  if (!value) { return false; }
  let res=[];
  let stack=[];
  let node=tree.root;
  while (node!==null) {
    if (node.data==value) { return node; }
    if (value<node.data) { node=node.left; }
    else { node=node.right; }
  }
  return false;
}

function pathToValue(tree, value) {
  if (!value) { return false; }
  let res=[];
  let stack=[];
  let node=tree.root;
  res.push(node);
  while (node!==null) {
    if (node.data==value) { return res; }
    if (value<node.data) { node=node.left; }
    else { node=node.right; }
    res.push(node);
  }
  return false;
}

function printNodes(tree) {
  let res=[];
  let ct=1;
  function traverse(tree) {
    if (tree==null) { return; }
    traverse(tree.left);
    traverse(tree.right);
    res.push(tree.data);
  }
  traverse(tree);
  return res;
}

function findSuccessor(N) {
  let stack=[];
  if (!(N&&N.right)) { return false; }
  stack.push(N);
  N=N.right;
  stack.push(N);
  while (N.left!==null) { 
    N=N.left; 
    stack.push(N);
  }
  return {node: N, pathTo: stack };
}

function isLeaf(node) { 
  return !node.left&&!node.right;
}

function countChildren(node) {
  return (node.right ? 1 : 0 ) + (node.left ? 1 : 0);
}

function findParent(tree, node) {
  if (tree==node) { return null; } // this is the root
  while (tree!==null) {
    if (tree.left==node||tree.right==node) { break; }
    if (node.data<tree.data) { parentNode=tree; tree = tree.left; }
    else if (node.data>tree.data) { parentNode=tree; tree = tree.right; }
  }
  return tree ? tree : false;
}

function breadthFirstTree(tree) {
  if (tree===null) { return; }
  let queue=[];
  let res=[];
  let level=0;
  queue.push(tree);
  queue.push(null);
  while (queue.length) {
    tree=queue.shift();
    if (tree===null) { 
      level++; 
      queue.push(null); 
      if (queue[0]===null) { break; }
      else { continue; }
    }
    if (tree.left) { 
      queue.push(tree.left);  
    }
    if (tree.right) {  
      queue.push(tree.right);  
    }
    res.push({data:tree.data, level:level});
  }
  let levels={};
 
  res.forEach(obj=>{
    levels[obj.level] ? levels[obj.level].push(obj.data) : levels[obj.level]=[obj.data];
  });
  return levels;
}

function depthFirst(tree) {
  let stack=[];
  let res=[];
  stack.push(tree);
  while (stack.length) {
    tree=stack.pop();
    res.push(tree);
    if (tree.left) { 
      stack.push(tree.left);
    }
    if (tree.right) {
      stack.push(tree.right);
    }
  }
  return res;
}

function rotateLeft(tree, root) {
  if (!root.right) { return false; } //we assume the right child is not null.
  let rightChild=root.right;
  root.right=rightChild.left;
  let parent=findParent(tree.root, root);
  if (parent===null) {
    tree.root=rightChild;
  } else if (parent.left==root) {   
    parent.left=rightChild;
  } else if (parent.right==root) {
    parent.right=rightChild;
  }
  rightChild.left=root;
}

function rotateRight(tree, root) {
  if (!root.left) { return false; } //we assume the left child is not null.
  let leftChild=root.left;
  root.left=leftChild.right;
  let parent=findParent(tree.root, root);
  if (parent===null) {
    tree.root=leftChild;
  } else if (parent.right===root) {   
    parent.right=leftChild;
  } else if (parent.left===root) {
    parent.left=leftChild;
  }
  leftChild.right=root;
}

function generateTreeTree(tree) {
  let X=depthFirst(tree.root);
  let noC={};
  let oneC={};
  let twoC={};
  X.forEach(n=>{
    if (countChildren(n)==0) {
      noC[n.data]={"name":n.data, "children": [{"name":"null"},{"name":"null"}]};
    }
    if (countChildren(n)==1) {
      let children=[n.left ? {"name":n.left.data} : {"name":"null"}, n.right ? {"name":n.right.data} : {"name":"null"}];
      noC[n.data]={"name":n.data, "children": children};
    }
  });
  X.forEach(n=>{
    if (countChildren(n)==2) {
      let children=[n.left ? {"name":n.left.data} : {"name":"null"}, n.right ? {"name":n.right.data} : {"name":"null"}];
      noC[n.data]={"name":n.data, "children": children};
      twoC[n.data]={"name":n.data, "children": children}
    }
  });
  X.forEach(v=>{
    v=v.data;
    noC[v].children=noC[v].children.map(c=>{
    return c.name!=='null' ? noC[c.name] : {"name":"null"};
    });
  });
  return noC[tree.root.data];
}

function balanceNode(q, tree) { //balances a node
  let bf=q.getBF();
  if (bf==2||bf==-2) { //unbalanced grandparent
    if (bf==2) { //left-heavy parent
      let childBalance=q.left.getBF();
      if (childBalance==1) { //left-child
        rotateRight(tree, q);
      } else if (childBalance==-1) { //right child
        rotateLeft(tree, q.left);
        rotateRight(tree, q);
      }
    } 
    else if (bf==-2) { //right-heavy parent
      let childBalance=q.right.getBF();
      if (childBalance==1) { //left-child
        rotateLeft(tree, q);
      } else if (childBalance==-1) { //right child
        rotateRight(tree, q.right);
        rotateLeft(tree, q);
      }
    }
  }
}

function insert(tree, number) {
  let T=tree.root;
  if (T==null) { tree.root = new node(number); }
  let navi=T;
  let stack=[];
  while (navi!==null) {
    stack.push(navi);
    if (number==navi.data) { return false; } // exclude duplicates
    if (number<navi.data) 
    { 
      if (navi.left!==null) { navi=navi.left; }
      else { break; }
    }
    else if (navi.right!==null) { navi=navi.right; }
      else { break; }
    }
  if (number<=navi.data) { navi.left=new node(number); }
  else { navi.right=new node(number); }
  unwindAndBalance(stack, tree);
  return tree;
}

function unwindAndBalance(stack, tree) {
  while (stack.length) {
    let q = stack.shift();
    balanceNode(q, tree); 
  }
  return true;
}

function longestPathToLeaf(root) {
  let nPath=[];
  function path(node) {
    if (node==null) { return; }
    if (node.left==null&&node.right==null) { return nPath; }
    else {
      nPath.push(node);
      path(node.left);
      path(node.right);
    }
}
  path(root);
  return nPath;
}

var tree = function(root) {
  this.root=root;
}

var node = function(data, left, right, tree) {
  this.data=typeof data !==undefined ? data : null;
  this.left=left || null;
  this.right=right || null;
}

node.prototype.swapValue = function(b) {
  this.data=b.data;
  this.iteration=b.iteration;
}

node.prototype.getBF = function() {
  return maxHeight(this.left)-maxHeight(this.right);
}

node.prototype.copy = function() {
  return new node(this.data, this.left, this.right);
}

function maxHeight(tree) {
  if (tree==null) { return 0; }
  else {
    let leftD=maxHeight(tree.left);
    let rightD=maxHeight(tree.right);
    return leftD > rightD ? leftD+1 : rightD+1;
  }
}

let Q = {root: new node(5), iteration:0};
insert(Q, 3);
insert(Q, 4);
insert(Q, 1);
insert(Q, 2);
  for (var i=0;i<20;i++) {
        let rand=Math.floor(Math.random()*100);
        insert(Q, rand);
      }

var margin = {top: 40, right: 90, bottom: 50, left: 90},
    width = 730 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

// declares a tree layout and assigns the size
var treemap = d3.tree()
    .size([width, height]);
  // append the svg obgect to the body of the page
  // appends a 'group' element to 'svg'
  // moves the 'group' element to the top left margin
  var svg = d3.select("body").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom),
      g = svg.append("g")
        .attr("transform",
              "translate(" + margin.left + "," + margin.top + ")");
//  assigns the data to a hierarchy using parent-child relationships

function update(treeData, hideNulls=false) {
  svg.selectAll("text").remove();
  var nodes = d3.hierarchy(treeData);

  // maps the node data to the tree layout
  nodes = treemap(nodes);

  // adds the links between the nodes
  var link = g.selectAll(".link")
      .data(nodes.descendants().slice(1));
      link.enter().append("path").merge(link).attr("class", "link")
      .attr("d", function(d) {
        let path="M" + d.x + "," + d.y
            + "C" + d.x + "," + (d.y + d.parent.y) / 2
            + " " + d.parent.x + "," +  (d.y + d.parent.y) / 2
            + " " + d.parent.x + "," + d.parent.y;
        if (hideNulls) { return d.children ? path : null; }
        else { return path; }
      });
      
  link.exit().remove();

  // adds each node as a group
  var node = g.selectAll(".node").data(nodes.descendants());
  var nodeEnter=node.enter().append("g").merge(node);
  nodeEnter
      .attr("class", function(d) { 
        let classList="node ";
        if (d.children) { classList+=" node--internal"; }
        if (hideNulls&&!d.children) { classList+=" hidden"; }
        return classList;
      })
      .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
    nodeEnter.append("circle")
        .attr("r", 5);
    nodeEnter.append("text")
      .attr("dy", ".5em")
      .attr("dx", ".15em")
      .attr("y", function(d) { return d.children ? -20 : 0; })
      .style("text-anchor", "middle")
      .text(function(d) { 
        return d.data.name!=="null" ? d.data.name : "";
      });

  var nodeExit=node.exit().remove();
  }

function handleForm(e) {
  e.preventDefault();
  let V = document.getElementById('value');
  switch (e.target.id) {
    case 'insert': 
      if (!V.value) { return false; } insert(Q, Number(V.value)); break;
    case 'randomize':
      Q = {root: new node(5), iteration:0};
      for (var i=0;i<20;i++) {
        let rand=Math.floor(Math.random()*100);
        insert(Q, rand);
      }
    break;
    case 'reset': 
      Q = {root: new node(5), iteration:0};
      insert(Q, 3);
      insert(Q, 4);
      insert(Q, 1);
      insert(Q, 2);
    break;
  }
  V.value='';
  update(generateTreeTree(Q), true);
}

window.onload=function() {
  update(generateTreeTree(Q), true);
  let F = document.getElementById('controls');
  F.addEventListener('click', handleForm);
}
              
            
!
999px

Console