Visualizing public transport with heat-maps : Comparing the scalability of SVG and Canvas for heat-maps

University essay from Mittuniversitetet/Institutionen för data- och systemvetenskap

Abstract: Computer hardware is constantly improving, displays get bigger resolutions and the hardware can handle more data. Consequently, we can display more information with digital visualisation and our software needs to scale well with this increase. For websites, there is a lack in research about which software scales well with bigger data, in particular SVG and Canvas. Some research has been done comparing SVG and Canvas. However, the focus has not been on scalability with big data. The choice of visualisation for this study was heatmaps, as this was an area that previous research was lacking in and proved to be suitable for scalable visualisation. It has looked at the performance of SVG and Canvas with both increasing resolutions and data, by creating a website with two pages equal in looks and functionality using SVG and Canvas. A series of tests were done that simulated the usage of heat-maps. To create the website, D3.js was used and it’s suitability to handle big data was also tested. The results of this study can be used as a guideline to decide whether SVG and Canvas is better suited for a specific range of data size. It has found that in this case SVG is around four times slower when initially creating all the elements of the heat-map. It also found that Canvas is around 30% slower when editing the colour of all elements in the heatmap. For changing the colour of one element, both Canvas and SVG were too fast to be reliably measured. The parts of D3.js used in this study proved to be slow when working with large amounts of data.

  AT THIS PAGE YOU CAN DOWNLOAD THE WHOLE ESSAY. (follow the link to the next page)