In my last post, I said that I’d arranged for the nodes in my network diagram to be clickable. Clicking on a data node brings up a display showing its contents plus an explanation thereof; clicking on a transformation node shows the code it runs and an explanation of that. I call these little displays “viewlets”, and will now explain how I implemented them.

The main thing for this prototype was to demonstrate the idea. So I put together two easy-to-use and free pieces of software. The first is’s Table plug-in for jQuery. This uses JavaScript to convert an HTML table into something you can scroll through, search, and sort. There are demonstrations here.

The second is Jed Foster’s Readmore.js. This, as the demo on that page shows, reduces large chunks of text to manageable size by equipping them with “Read More” links. Initially, you see only a few lines. Click “Read More”, and you see the full text; click once more, and the extra text goes away, giving just those few lines again.

Here’s a screenshot of a data viewlet:

And here’s a code viewlet:

Browsers have a habit of exploding when asked to display a 20,000-row table. So the data viewer is probably not good for full-scale datasets. Something like base-R View, talking to the server via sockets, might be better. The “Read More” library is also not ideal, because it doesn’t allow the programmer to specify how much of the text should be displayed above the link, and because you have to scroll all the way down to the end to collapse the full text.

Leave a Reply

Your email address will not be published. Required fields are marked *