OBS Portlet - D3js

Discussion created by AndrewLerner on Nov 27, 2014
Latest reply on Dec 28, 2016 by pjromano

I was really impressed by gcubed's obs html portlet post (and all of his other work as well). I had been messing around with Mike Bostock's d3js library and decided to try and combine both. I borrowed much of Gene's authentication and document parsing work but rendered the OBS like this: Toggle nodes to expand/collapse.



1. I have a single html file containing the required css and js (excluding the d3.js library). I serve it up from a "custom" directory created in my Clarity application's webroot, but chris.wuenstel's knowledge store trick ( would work too.

2. I do the same thing with the d3.js library (d3.v3.min.js), although you could use a CDN. Available from:

3. I use an HTML portlet with an iframe like Gene.


4. There's a simple nsql query (id: x_api_obs). Replace the OBS UNIQUE_NAME value in the WHERE clause with something appropriate.


Areas for Improvment:

While it is somewhat useful for visualizing larger OBSs, on its own it's really just a parlor trick. But I could imagine adding to it to show just about anything. For example, you could show OBS associated security rights for a given user/group/OBS unit.


Going further, it might be nice to build a library/framework to handle the Clarity api access and document parsing. I suppose that you could also abstract pre-built charts on top of d3js similar to, but oriented to Clarity.



  • Will not work with IE in v13.0 (and maybe v13.1-3). This is due to Clarity forcing IE8 emulation in 13. It does work on IE in v14.1.
  • Works on Chrome and later versions of FF in 13, but does not work in older versions of FF and Safari.  I don't understand why, but the XML returned from Clarity is not parsed correctly in these browsers.
  • I'm not much of a client side JS developer...