Visualizing depth and breadth first tree traversal algorithims using a d3 dendrogram, chained transitions, and basic js array stack/queue functionality
Vanilla dendrogram taken from /d3noob/8326869
xxxxxxxxxx
<meta charset="utf-8">
<title>Tree Traversals</title>
<!-- stuff for styling -->
<link rel="stylesheet" type="text/css" href="style.css"/>
<!-- stuff for d3 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
<!-- data stuff -->
<script src="data.js"></script>
<body>
<div id="title">Tree Traversals</div>
<div id="button-wrapper">
<button id="dft" onclick="dft()">Depth First</button>
<button id="bft" onclick="bft()">Breadth First</button>
<button id="reset" onclick="resetTraversal()">Reset</button>
</div>
<div id="tree-container"></div>
</body>
<script src="treeTraversal.js"></script>
https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js