Thursday, October 25, 2012

JavaScript/JSON: Record Visualizer

One product we sell at Melissa Data is a list of data that matches each customer's demographic needs. We buy data ourselves in a raw form from many different vendors which we refine into a standard format that is efficient and convenient for our customers to access. Because the data we buy comes in so many different sellers' formats, several steps must be taken in the process that rearranges it into our standard format. An important type of information that we want to visualize in our development tools at Melissa Data is the seller source of each bit of data.  With that we can tell what fraction of our data comes from which source, the quality of the data from each of them, and where problems have occurred between one assimilation phase to another.  When reading from a mountain of contact records a picture is often worth a thousand words.  The Record Visualizer project I was assigned produced a Javascript-based tool within a Java servlet-based Apache website that presents data within the records that come into existence at each phase of our assimilation process.  Records created during the build are linked by horizontal edges to their parent or children to show the sequence the data follows. The InfoVis Javascript jit library provides an easy way to show this sequence via a tree as is shown below.


Each node on the tree is labeled with a record ID.  When one is selected it changes colors and the data within the record is shown on the rightside panel.  Note the alternate coloring of the panel text that is intended to distinguish between different items in a compact sequence of entries, and the tooltip that drops down whenever the mouse pointer is hovered over the purple demographic bullet point. The tooltip is a means to present sorted detail info concerning the bullet point while minimizing screen clutter.

The lower screenshot shows the page again with the configuration panel dropped down to reveal the list of record fields that can be shown or hidden in the right side panel.