This tries to visualize the heapsort algorithm as I understand it. Basically you’d usually only want to run heapsort if you have a ballanced max or min heap. But this algorithm takes any given array, ballances it into a max heap then sorts stuff by popping off the largest item and putting it at the end of the array and repeating.
Check it out and let me know if I should add features and if there’s anything really wrong/bad about the code.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./style.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.7.4/d3.js"></script>
</head>
<body>
<div id="heap">
</div>
<script src="heaper.js"></script>
</body>
</html>
.node {
cursor: pointer;
}
.node circle {
fill: #fff;
stroke: steelblue;
stroke-width: 1.5px;
}
.node text {
font: 10px sans-serif;
}
.link {
fill: none;
stroke: #ccc;
stroke-width: 1.5px;
}