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): .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 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./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?

• javascript
• matrix
• rendering
• visualization
• protovis

• 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 Commented Feb 22, 2012 at 23:29

3 Answers 3

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

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.

You could try the JavaScript library clustergrammer.js (see https://github./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