create interactive heatmap with paper.js

[Guidantonio Malagoli Tagliazucchi]

Hi, I am new of paper.js and I am working to create an heatmap (similar to this one: http://bl.ocks.org/ianyfchang/8119685) with about 200 rows and 40 columns from a csv file.

I created a first draft of the code and I tried to add some functionalities. For example, when the user click each cell of the heatmap I would like create a rectangle

with some data. 

However I see that the responses (after the click) becomes slow and the rectangles appears in delay. To draw the heatmap, for each row (200) the code plot 'n' rectangles (40).

My first question is if it possible create interactive heatmap of these size with paper.js and if there are some 'rules' to improve the performance and speed.

If necessary, I can post my code. 

Thank in advance for the support and compliments to the developer for this library. 

Best,

Gmt

[Stefan Krüger]

Hi Gmt,

200*40 = 8000 ;-) i think that is a hugh numer of rectangles

i have made some experiments for high object counts in this thread: https://groups.google.com/forum/#!topic/paperjs/SXt6zvy5_oE

additionally you could check if you can use the Symbol System: http://paperjs.org/tutorials/project-items/working-with-symbols/

i think best for fast and easy testing / help is if you setup a minimal example that illustrates the problem you are getting in http://sketch.paperjs.org/

and then post the resulting link here (the code is stored in the url) - with this we can just click on it - make changes / experiment - and repost the link...

if you also want to integrate the 'stats' library you can base it on this sketch:

http://sketch.paperjs.org/#S/dZHBboQgEIZfxXBRk0buazw0TfsCe6w9IEMrXZmhgN00G9+9oFbXQzkxDPN/M//cGAqj2ImdLyrInj0wSZDiFt9HlEETZgLgHETwRXlrMYvnW7jMS6dtaIDkaBSGSjolgnoeVIqKfEnnZb1ULGFFOJCA5k95E9xEE6ZBdc1WYL3nN1JH8FMJaxXCU68HKOaqCsjcf3fqa1Q+PKI2IrFeXJyz2GYaiOwBP3c5C40W4iQH9v+CSafcP073VcttOlrgnWxyzp24fujoGhluHBB1fIF/em6ED8rxboyzra9GY8zkq9LmRK8EHJ2YGamHqcUW98XVcbFd3NDFksbg2en1bfoF

its  just the minimum to load this external lib:

function addStats(){
    var script=document.createElement('script');
    script.onload=function(){
        var stats=new Stats();
        document.body.appendChild(stats.dom);
        requestAnimationFrame(function loop(){
            stats.update();
            requestAnimationFrame(loop)
        });
       
    };
    script.src='//rawgit.com/mrdoob/stats.js/master/build/stats.min.js';
    document.head.appendChild(script);
}

addStats();

sunny greetings

stefan