Around the World in 80 Canvas
Today everything is Internet and has to be viewed fast and nice so that any user understands what is on the screen. That is why many Web apps have started showing content in graphics so everything becomes interactive and friendly-user.
Let’s suppose as example that we have a company which intends to show a Running event in real time, providing the User each runner’s position, lap time, best lap, burned calories and who knows what other myriad data. The best is to represent all this in graphics so that the User is able to analyze those data without viewing just numbers in a boring table.
And that’s why today I would like to tell you more about an excellent and powerful library developed in Javascript called D3.js ( Data-Driven Documents).
D3.js, or just D3, is a JavaScript library to reproduce from data, dynamic and interactive infograms in our Website. As D3 technology, it uses Canvas, SVG and CSS, complying with current standards in Browsers, so with the latest version, our app will work in all devices (including Internet Explorer).
Following our example, with D3 we could represent the race circuit map in graphics, and show every runner’s route as a point in the map. Then we can turn that point interactive by showing the runner’s data we intend to view.
We could also make classic Bar or Pie graphics to have more global statistics. And why not, do more crazy graphics like a Binary Tree to relate runners’ statistics.
As you can see, there are no limits to represent data in graphics when you develop with this library, only good ideas and good programmers are needed.
Performance
Although everything seems to be wonderful and fantastic, at the moment of developing this type of apps, we have to consider our app performance. We shouldn’t forget that we are working with graphics and animations, they are not longer just data in a boring table.
In my experience using D3, depending on the type of development we are going to do, it will be better use Canvas, and in other occasions, SVG.
A short and quick example could be imagining that we have a World (Planet Earth) in 3D (three dimensions) constantly spinning around, with points at different coordinates, lights, colors and any other staff we imagine.
In this case, we will use Canvas for a logical need of CPU processing, Memory, GPU and FPS (Frames Per Second). Think that with Canvas we could even develop a video game (for you to understand how powerful it is).
If we develop with SVG, we would be constantly updating the SVG in our app’s DOM, generating a huge consumption of CPU and Memory, and in machines which are not very fast, this would result in a big FPS loss.
But let’s assume we have the same World in 2D, that is plane, which means that it will be not spinning around, it will not have large animations, and we would not be rendering points all the time. In this case, we could use SVG since the render is not bigger.
Something that has called my attention these times, is that with 3D there are many, but many examples with SVG and a few with Canvas, so sometimes it can be difficult to make something in Canvas (though not impossible).
