Even the humble time series chart can benefit from some careful “cognitive engineering” focus.
We can make analysis more comfortable, quicker, and introduce less of a risk of drawing the wrong conclusiona critical thing
when million-dollar decisions are being made from the data inferred by traders. PMs, or analysts.
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 I prize most highly: clarity & ease. I’m currently developing these
charts with Rosenblatt Securities, Inc. and am looking for more development partners.
Design works 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 pageyou can even specify any
TrueType font on your server. (Below we use the graceful and space-saving Myriad Pro
Semi-Condensed; elsewhere Georgia 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 Cin fact it’s twice as wide!
We developed a sophisticated technique to elimate this 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 between curves at A and B is larger. So much
easier that a viewer may not even need the difference curve 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 themselvesaway 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 itfor
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 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 may seem
to be around 5. In fact the histogram at the side (summing
how many values are at each height) shows most were between between 3.0 and 4.0.
Roll over the histogram to see the time distribution of the values within each bucket.
All these capabilities are driven by specific business work processesoff-the-rack commodity code just
doesn’t fit critical business needs. And beyond simple reporting procedures, they can be combined
into the kind of next-generation portfolio management and trading analysis tools that will reassert the
primacy of the human. It won’t be algorithms alone that win the next round of financial games; it’ll
be algos and much morecontrolled by people who can see and act upon their business impact.
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)