What's the best way to plot a 2D array?

New To Observable
1

I have MNIST data I have loaded into OJS, its essentially a list of 28x28 (2D) arrays.

I have an input slider that selects the index, which I use to select which of the 28x28 array I want to display. However, I am not sure how to go about displaying the 2D array as an image.

I checked out this link: Reusable (2D Array -> image) function / sw1227 | Observable

However, this doesn’t allow me to put multiple canvases side by side. Or, at least, its not obvious to me how I would do that.

Any advice would be appreciated, thank you :slight_smile:

2 Likes
2

Here’s how I would use that imshow function to display the MNIST digits in Observable:

You can build and style HTML in a number of ways with Observable so, if you know HTML and CSS, you can display it in almost any way you want. I chose to build a DIV with Javascript and return that. Here’s the result:

3

We’ve recently been working on a new raster mark for Plot. You can check out this branch if you’d like to try it:

@Fil has written up some of our thinking here, and also demonstrated a couple ways of doing this using the rect and dot marks:

Using individual SVG elements per datum, as the rect or dot mark does, starts to get slow with large grids. That might be okay for a 28×28 grid, but the purpose of the propose raster mark is to make this much more efficient by using canvas. We’d love feedback on the proposed API if you are interested.

1 Like