- presentation of thousands of elements,
- low memory consumption,
- fully responsive UI,
- real-time interaction.
Showing thousands of elements on the screen is not a problem but if you want to minimize memory consumption and you don't want to wait ages for loading all elements (fully responsive UI) you have to run this process asynchronously and visualize only necessary elements. For detecting elements belonging to my visibility area (in this particular case screen + 25% margin) I decided to use Quadtree algorithm. On the pictures below you can find ZoomBoxes with all elements (left hand side) and just necessary elements detected by Quadtree (right hand side). ZoomBoxes on the left hand side contain simplified form of nodes (just nodes no connections, about 15k ellipses) loaded upfront to help users to find themselves on this huge canvas 66000 x 66000 pixels.