Visualize sorting algorithms using d3.js
While searching for JavaScript graphical libraries to create module dependency graphs, I found D3.js. Today, I created a simple sorting algorithm visualization using it.
Code demystify
This creates a svg
using d3.js with width = 300
and height = 100
.
To display bars in svg
will need rect
rectangles.
D3.js provides enter
, where you can create new nodes for incoming data ([10, 20]
).
At this step, these rects
are not assigned with information of its width, height and position yet.
Above lines will assign <x, y>
position and <width, height>
to each rect
.
d
is the data associated with the rects (10 for rects[0]
, 20 for rects[1]
) and
i
is the index of rect
in rects
.
To update the rects
, you will do the similar using new data and transition
:
These are all the basic code required to display the bar chart.
You will then call redraw()
in algorithms at each step.