Screenshot of the visualization with 9 nodes and 8 edges: [2, 5, 9, 8, 11, 20, 13, 12, 4]. Two nodes are highlighted by color.

There was the voluntary option to develop a visualization with D3 in JavaScript for the oral examination in the compulsory elective course Selected Topics of Media Computer Science[1]The topic this semester was visualization. of B.Sc. Media Systems (B-MS) in the summer semester 2014. The D3 layout for the visualization had to be one that wasn't introduced in the lectures.

Inspiried by the Attachment B - elementary data structures from the textbook Graphentheoretische Konzepte und Algorithmen[2]ISBN 978-3-8348-0629-1
(amazon.de)
Subject: Graph Theory
from S. O. Krumpke and H. Noltemeier, which explains d-ary heaps, I developed a stepwise visualization of the basic dHeap operations[3]The basic operations explained in the textbook are: insert a new node, reduce the value of a node, and remove the root node.

I extended the algorithms to increase the value of a node and to remove an arbitrary node. Both with an unchanged logarithmic running time.
with the D3 Tree Layout.

The result of this work can be viewed online here. The loaded heap is the example from the book. First a 4 is inserted (right picture) and then the 2 gets removed.

Languages JavaScript, JSON, SVG, HTML, CSS
Technologies D3, JS Prototypes, Closures
IDE Geany
Participants 1

Robin C. Ladiges / dHeap

German flag