Following the previous post, I needed a graphical representation of a tree graph to put on an HTML page. I thought it would be a great opportunity to learn this HTML5 thingy, which everyone is talking about these days. I ended up writing a full implementation of a tree graph using only HTML5 and pure JavaScript, thus avoiding any third-party JavaScript libraries.
However, I faced some problems. I had to plot more than 2,000 nodes, although not all at the same time, sometimes I had hundreds of them being shown. So I had to run into a series of optimizations of the algorithm, not only to speed up the internal calculations, but also the page rendering itself. On my first implementation, each node was a DIV, and the lines were drawn upon a canvas. Then at some point I decided to purely draw the whole monster on canvas, and I rewrote everything, taking the opportunity to add animation effects.
Since I consider it to be good and clean code, and believing that it could be useful to someone else, I published the whole code on GitHub at rodrigocfd/html5-tree-graph, along with an example file.
A hard work and a great experience, indeed.
2 comments:
Excellent Idea, I'm going to use it to represent some data graphically. I hope you continue sharing your cool devs.
Great code.
Apparently changing imgSize doesn't change the boxes size :(
Post a Comment