Extendible Hashing

data.js

var dots = [
    [
		'digraph G {',
		'	rankdir="LR";',
		'	node [shape = record]',
		'	subgraph directory {',
		'		array [label="<a0> 0"];',
		'	}',
		'	subgraph buckets {',
		'		bucket0x60400002f2e0 [label="", xlabel="0"];',
		'	}',
		'	array:a0 -> bucket0x60400002f2e0;',
		'}',
	],
	[
		'digraph G {',
		'	rankdir="LR";',
		'	node [shape = record]',
		'	subgraph directory {',
		'		array [label="<a0> 0"];',
		'	}',
		'	subgraph buckets {',
		'		bucket0x60400002f2e0 [label="0", xlabel="0"];',
		'	}',
		'	array:a0 -> bucket0x60400002f2e0;',
		'}',
	],
	[
		'digraph G {',
		'	rankdir="LR";',
		'	node [shape = record]',
		'	subgraph directory {',
		'		array [label="<a0> 0"];',
		'	}',
		'	subgraph buckets {',
		'		bucket0x60400002f2e0 [label="0|1", xlabel="0"];',
		'	}',
		'	array:a0 -> bucket0x60400002f2e0;',
		'}',
	],
	[
		'digraph G {',
		'	rankdir="LR";',
		'	node [shape = record]',
		'	subgraph directory {',
		'		array [label="<a0> 0 | <a1> 1"];',
		'	}',
		'	subgraph buckets {',
		'		bucket0x60400002f2e0 [label="0|2", xlabel="1"];',
		'		bucket0x60400002f360 [label="1", xlabel="1"];',
		'	}',
		'	array:a0 -> bucket0x60400002f2e0;',
		'	array:a1 -> bucket0x60400002f360;',
		'}',
	],
	[
		'digraph G {',
		'	rankdir="LR";',
		'	node [shape = record]',
		'	subgraph directory {',
		'		array [label="<a0> 0 | <a1> 1"];',
		'	}',
		'	subgraph buckets {',
		'		bucket0x60400002f2e0 [label="0|2", xlabel="1"];',
		'		bucket0x60400002f360 [label="1|3", xlabel="1"];',
		'	}',
		'	array:a0 -> bucket0x60400002f2e0;',
		'	array:a1 -> bucket0x60400002f360;',
		'}',
	],
	[
		'digraph G {',
		'	rankdir="LR";',
		'	node [shape = record]',
		'	subgraph directory {',
		'		array [label="<a0> 00 | <a1> 01 | <a2> 10 | <a3> 11"];',
		'	}',
		'	subgraph buckets {',
		'		bucket0x60400002f2e0 [label="4", xlabel="2"];',
		'		bucket0x60400002f360 [label="1|3", xlabel="1"];',
		'		bucket0x60400002f420 [label="0|2", xlabel="2"];',
		'	}',
		'	array:a0 -> bucket0x60400002f2e0;',
		'	array:a1 -> bucket0x60400002f360;',
		'	array:a2 -> bucket0x60400002f420;',
		'	array:a3 -> bucket0x60400002f360;',
		'}',
	],
	[
		'digraph G {',
		'	rankdir="LR";',
		'	node [shape = record]',
		'	subgraph directory {',
		'		array [label="<a0> 00 | <a1> 01 | <a2> 10 | <a3> 11"];',
		'	}',
		'	subgraph buckets {',
		'		bucket0x60400002f2e0 [label="4", xlabel="2"];',
		'		bucket0x60400002f360 [label="3|5", xlabel="2"];',
		'		bucket0x60400002f420 [label="0|2", xlabel="2"];',
		'		bucket0x60400002f4a0 [label="1", xlabel="2"];',
		'	}',
		'	array:a0 -> bucket0x60400002f2e0;',
		'	array:a1 -> bucket0x60400002f360;',
		'	array:a2 -> bucket0x60400002f420;',
		'	array:a3 -> bucket0x60400002f4a0;',
		'}',
	],
	[
		'digraph G {',
		'	rankdir="LR";',
		'	node [shape = record]',
		'	subgraph directory {',
		'		array [label="<a0> 00 | <a1> 01 | <a2> 10 | <a3> 11"];',
		'	}',
		'	subgraph buckets {',
		'		bucket0x60400002f2e0 [label="4", xlabel="2"];',
		'		bucket0x60400002f360 [label="3|5", xlabel="2"];',
		'		bucket0x60400002f420 [label="0|2", xlabel="2"];',
		'		bucket0x60400002f4a0 [label="1|6", xlabel="2"];',
		'	}',
		'	array:a0 -> bucket0x60400002f2e0;',
		'	array:a1 -> bucket0x60400002f360;',
		'	array:a2 -> bucket0x60400002f420;',
		'	array:a3 -> bucket0x60400002f4a0;',
		'}',
	],
	[
		'digraph G {',
		'	rankdir="LR";',
		'	node [shape = record]',
		'	subgraph directory {',
		'		array [label="<a0> 000 | <a1> 001 | <a2> 010 | <a3> 011 | <a4> 100 | <a5> 101 | <a6> 110 | <a7> 111"];',
		'	}',
		'	subgraph buckets {',
		'		bucket0x60400002f2e0 [label="4", xlabel="2"];',
		'		bucket0x60400002f360 [label="3|5", xlabel="2"];',
		'		bucket0x60400002f420 [label="7", xlabel="3"];',
		'		bucket0x60400002f4a0 [label="1|6", xlabel="2"];',
		'		bucket0x60400002f560 [label="0|2", xlabel="3"];',
		'	}',
		'	array:a0 -> bucket0x60400002f2e0;',
		'	array:a1 -> bucket0x60400002f360;',
		'	array:a2 -> bucket0x60400002f420;',
		'	array:a3 -> bucket0x60400002f4a0;',
		'	array:a4 -> bucket0x60400002f2e0;',
		'	array:a5 -> bucket0x60400002f360;',
		'	array:a6 -> bucket0x60400002f560;',
		'	array:a7 -> bucket0x60400002f4a0;',
		'}',
	],
	[
		'digraph G {',
		'	rankdir="LR";',
		'	node [shape = record]',
		'	subgraph directory {',
		'		array [label="<a0> 000 | <a1> 001 | <a2> 010 | <a3> 011 | <a4> 100 | <a5> 101 | <a6> 110 | <a7> 111"];',
		'	}',
		'	subgraph buckets {',
		'		bucket0x60400002f2e0 [label="4|8", xlabel="2"];',
	]
]

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="//d3js.org/d3.v5.min.js"></script>
<script src="https://unpkg.com/@hpcc-js/[email protected]/dist/index.min.js"></script>
<script src="https://unpkg.com/[email protected]/build/d3-graphviz.js"></script>
<div id="controls">
    <button id="step" onclick="render()">Next</button>
    <button id="back" onclick="dotIndex=Math.max(dotIndex - 1, 0);render()">Prev</button>
    <button id="reset" onclick="dotIndex=0;render()">Reset</button>
</div>
<div id="graph" style="text-align: center;"></div>
<script src="data.js"></script>
<script>

var dotIndex = 0;
var graphviz = d3.select("#graph").graphviz()
    .transition(function () {
        return d3.transition("main")
            .ease(d3.easeLinear)
            .delay(500)
            .duration(500);
    })
    .logEvents(true)
    .on("initEnd", render);

function render() {
    var dotLines = dots[dotIndex];
    var dot = dotLines.join('');
    graphviz
        .renderDot(dot)
        .on("end", function () {
            dotIndex = (dotIndex + 1) % dots.length;
        });
}
	

</script>