I'm very impressed with the
used to generate powerful, animated visualizations in the browser.
In addition, the
ReactJS user interface
Redux state container
make for a powerful Functional Programming environment.
I used those tools to develop this app
(see it live!
or go to github!)
. To the right are
three screenshots taken from it.
The app has the following interesting properties:
React/Redux are used to manage user events and generate
The app leverages the tools so that pure functions can
be leveraged to great effect.
Input data is decoupled from presentation. There aren't any data-specific
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
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).
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.
7B Software, Inc.