Render large matrix (1000*1000) in Javascript

Question

I need to display a large matrix within our web-based application. The matrix dimensions are approx. 1000*1000 and each cell is either filled or not.

Basically, it should look like this (much larger and without the colors): http://mbostock.github.com/protovis/ex/matrix.html

I need basic interaction, such as zooming and clicking on a cell. The matrix is likely to to be a sparse matrix.

I tried Protovis but rendering takes forever if the matrix is larger than 80*80.

What Javascript library might be suitable for this task?

I'm not sure there's going to be one that does that kind of rendering straight out of the box. You're talking about a *lot* of DOM elements for a web browser to be thinking about. You may have to start with something like that Protovis you pointed out and roll your own zooming / data modeling to get to what you're talking about. Not trying to crash the party and I'm not the most informed on js libraries, but that's kind of my hunch. — Will Buck, Feb 22 '12 at 23:29

score 5 · Answer 1 · edited May 23 '17 at 12:16

5

I would use an HTML5 Canvas for fast drawing. (This super-simple demo renders in a few seconds on my computer.) If you want to zoom in, you can see this answer.

edited May 23 '17 at 12:16

Community

1
1

answered Feb 22 '12 at 23:32

Phrogz

296,393
112
651
745

score 4 · Answer 2 · answered Feb 22 '12 at 23:25

4

In order to display a million items to a user, each element would probably have to be the size of a single pixel.

I'd just use a canvas.

answered Feb 22 '12 at 23:25

Seth

45,033
10
85
120

Nick Fernandez · Answer 3 · 2016-01-05T18:56:02.900

1

You could try the JavaScript library clustergrammer.js (see https://github.com/cornhundred/clustergrammer.js). It uses D3.js to make interactive (zoomable, reorderable, filterable, etc) visualizations. It can handle on the order of 100,000 data points, but if you matrix is sparse enough then you can render large matrices.

Here's an example of clustergrammer.js being used to visualize a 6000x230 matrix http://amp.pharm.mssm.edu/clustergrammer/viz/568affd5b6541b84f3a68234

edited Jan 05 '16 at 18:56

answered Jan 05 '16 at 18:15

Nick Fernandez

1,160
1
10
24

Link-only answers are not the way of SO. Links may be outdated someday. Put essential informations in your answer! – jogo Jan 05 '16 at 18:34

Render large matrix (1000*1000) in Javascript

3 Answers3