Visualizations from 7B Software, Inc.

Home

Contact

About 7B Software, Inc.

How to Engage Me

Professional Resume

Notable Hacks
from 7B Software

Programming Techniques
from 7B Software

Links and Resources

Computer Industry Predictions

I'm very impressed with the D3 javascript framework, used to generate powerful, animated visualizations in the browser.

I used the toolkit to develop this app (see it live!). To the right are three screenshots taken from it.

The app has the following interesting properties:

  • Input data is decoupled from presentation. There aren't any data-specific kludges in the javascript code. In addition:

  • A metadata layer ensures that data is decoupled from input controls. Adding a metadata table and joining it to the actual input is a clean method of describing whether particular data can be added to tooltips, used for pivots, or used for aggregation. This allows a single point of control for any dataset.

  • Label placement is a pretty hard problem, solved here with a force graph. A crowded graph presents a tricky label positioning issue. We use a force graph to force label names apart (as in the screenshot directly to the right).

  • A force graph is also being used to model a simple network. In the app, the network is a simple hierarchy built from inherent parent-child relationships within the dataset.

  • The app supports auto-rollup of status within the network visualization. Statuses are plotted as red (bad), yellow (warning), green (ok), and gray (unknown). A parent node can have its own innate status, but it also displays (on its ringed outer border) the worst status of any of its descendents.

  • Data transforms are using map and reduce, allowing them to be moved easily to a server for large datasets. The map and reduce code handle filtering, pivoting, and aggregation. This particular app does all of this work in the browser, but there's no reason why it can't be migrated to the server if the dataset is too big.

  • JQuery is used to populate the input controls and to support tooltips. In a future version of this app, I'll be using AngularJS instead of JQuery. But for this particular version, JQuery does a nice job of simplifying access to the DOM for the input controls.



Mark Smith
7B Software, Inc.