Click here to see the SAS code.
Click here to see the example.

---------------------------------------------------------------

This graph was an entry for the ...
Business Intelligence Network 2006 Data Visualization Competition

The contest was organized & judged by Stephen Few (he was the 
organizer & judge of the DM Review contest last year, which 
SAS won the dashboard competition).

This particular graph is for Question/Scenario #2 ...


Challenge:

You have been asked to design a visualization that can be used by 
bank customers to track their checking account activities during a
single month.  You want to make it just as easy for people to see
the individual deposit and withdrawal transactions as well as the
resulting balances.  You also want to make it easy for them to see 
the precise dollar amounts of the transactions and balances
whenever they wish.


Proposed Best Practice:

The main & most important "best practice" demonstrated in this graph
is the way the points are joined by the line - in our software this
is called "steplj" (step-left-join) line interpolation.
From each transaction marker, the line continues to the right
at that same level until the next transaction, and then it drops
to the new value.

Any other type of line (straight line, step-right-join, spline, etc)
would be misleading.  This particular type of step (steplj) is the 
only type of line that accurately represents what the data is truly
doing.

Other Important Features:

Each individual transaction is represented as a marker, so you can
see each transaction (even if there were multiple transactions on 
the same day, you would be able to distinguish them by their markers).
The marker is a downward pointing arrow for withdrawals, and an upward
pointing arrow for deposits.

Looking at the static image of the graph, you can get a good feel for
both the amount of the individual transaction, and the resulting 
total balance.  (You don't see the 'exact' values, but you get a
very good feel for them.)

I experimented with labeling vertical lines with the transaction 
amount, and the markers with the resulting balance, but the graph
became too "cluttered".  Therefore I decided to provide this 
information only on-demand through interactive charttips.

If a user wishes to see the precise dollar amount of a transaction 
and the resulting balance, all they have to do is hover their mouse
over the markers, and the html charttip will show them the detailed
information (the submitted screen-capture shows the chartttip for
one transaction, to demonstrate this).  

Subtle Features:

I have made the axes and the axis labels a medium/subdued "gray" color,
and the data line and markers bolder/brighter colors, so the data markers
(ie, the most part of the graph) stand out.

I chose weekly tickmarks for my horizontal axis (rather than daily), 
so the axis doesn't become cluttered.  But since the month doesn't
end on an exact/even number of weeks, I put a dotted refline at the
beginning and end of the month to show the exact time-period that
this data is from.  

Future Ideas:

Lots of banks have a minimum balance requirement (if you fall below the 
minimum, then they start service-charging you).  If I knew what this 
bank's minimum balance was, I'd add a subtle (light red) reference line
at that amount, so the user can easily see if they're getting close to that
amount.  And if they cross that amount, then the line would become 
bright red, and maybe any withdrawal markers below that line would
also become bright red.

Also, this plot uses the calendar-month, whereas banks typically use
a banking-month.  If I knew what this bank's start/end days were for
their banking-month, then I'd use that as the vertical reflines.

Back to Samples Index