Even the humble time series chart can benefit from some careful Cognitive Engineering focus.
Good charts can make analysis more comfortable, quicker, and lessen the
risk of someone drawing the wrong conclusion—a critical thing
when million-dollar decisions are being based on ideas traders, PMs,
or analysts infer from charts. (Jump ahead to see ways
we fix two common chart misinterpretation problems:
1, 2)
Aren’t there plenty of charting packages out there
already? We’ve sampled many packages and though much more complete in some ways, they
all fall short on the two measures we prize most highly: clarity & ease. We’re currently developing these
charts with Rosenblatt Securities, Inc. and are looking for more development partners.
Good design is possible only when one has real business processes in mind.
Just added: drag any chart directly into applications like Word, Outlook, Photoshop,
Illustrator, or TextEdit by starting your drag on the “WBP” credit, lower right.
Note the subtler things, too: halos around labels make them easy to read while obscuring little of the data; smoothly curved call-out lines are easy to distinguish from data and grid lines; the grid lines themselves are light enough not to compete. And the chart integrates better because the margins around the chart are the color of the Web page—you can even specify any TrueType font on your server. (Below we use the graceful and space-saving Myriad Pro Semi-Condensed; elsewhere Lucida Sans Unicode to match the page.)
Almost paradoxically a quieter, more integrated chart conveys more information.
| . | . | ||
|
Here we put several price curves on the same graph so they can be compared to the same base curve,
separated vertically to make them a little easier to read. Since they all have different value scales, the scales
only show up when you hover over a curve.
Click on any chart to enlarge it. Drag curves in either of these charts to compare them. |
Now the comparison takes on a whole new dimension. Not only are the positive and negative regions shaded
with a color-blind-safe red/blue color scheme, but a difference curve is shown below to
directly show the magnitude of the gap. It helps correct for a dangerous bias in reading charts, caused by
how the human eye operates. We naturally tend to estimate widths perpendicular to edges, so most
people think the gap at B is smaller than the gap at C; in fact it’s twice as wide!
We developed a sophisticated technique to elimate this misinterpretation risk: Roll over the chart and notice that the red and blue areas show vertical striations representing exactly how far apart the curves are at each point in time. This makes it easy to tell the gap is larger between curves around A and B. So much easier that a viewer may not even need the difference curve—very valuable since now the gap size is right next to the prices themselves, rather than twice removed (in space and abstraction) in the difference chart below. |
Charts should play a quiet, supporting role in a Web presentation unless someone clicks in for details. We use sophisticated graphics techniques to ensure that (almost) no matter how tiny one starts out, it’s still readable. Most off-the-rack charts are so untidy and awkward that they draw attention to themselves—away from the real business at hand.
Is it worth confusing your traders or burdening your customer (perhaps losing their business...) just to save some coding effort?
This is not a rhetorical question; it might be worth it. For small internal non-critical decision-making, or processes in which the risks of misinterpretation are low, or for projects in development, a standard charting package might be adequate. But if you can tailor a chart to foreground exactly the information needed in someone’s work flow as we do, saving a programmer’s time is penny-wise but pound-foolish. You pay for that one-off savings by creating thousands of half-second delays, distractions, and risks when your customers or critical decision-makers can least afford it—for the life of your software times the number of people using it!
|
Another variation shows how easy it is to summarize three related values in one chart. Note how the volume and VWAP data stopped at about 3:25, but the chart kept all three series aligned. A “show last value” option is turned on here; it’s useful in when the charts are updating in real-time. |
|
Here is a simple time series bar chart. Roll over the bars to see the detailed individual volumes that make up each bar; it may be useful to know whether it was one large execution or lots of small ones that summed to the height of that five-minute bar. Also, the slight gap at the right visually “leaves room” for the rest of the day: this chart takes up only half of the width at 9:30, and completely fills the width at 4:00. |
|
And finally, another aid to overcome the eye’s propensity to err. Most of the values here seem to be around or above 5. In fact a histogram (summing how many observations occured at each value) shows most were between between 3.0 and 4.0. Roll over the sideways histogram at right to see the time distribution of the values in each bucket: the lowest bucket holds mostly mid-day values, justifying the industry term “smile.” |
All these capabilities are driven by specific business decision-making tasks. Off-the-rack commodity code just doesn’t fit well enough for business-critical procedures.
And beyond simple reporting, these charts can be combined
into the kind of next-generation portfolio management and trading/analysis tools that will reassert the
primacy of human understanding in financial markets. It won’t be algorithms that win the next round of financial games by themselves; it’ll
be algos controlled by people who can see market impact and instantly re-target.
| The didi charts are being assembled into a portfolio performance tracking tool that will help traders understand which of hundreds of stock in a basket are responsible for a divergence between a portfolio and a benchmark. (Work in progress) |
