The didi Chart Applet

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)

This page requires that you have the Java runtime VM installed; if you don’t see charts below, please go to the Java site and install it. You may have to set browser security permissions and/or click "okay to run" dialog buttons in these careful security-conscious times.

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.

price chart

This simple price chart shows how these charts interact with the browser, making it easy to bind textual analysis tightly with visual data.

Hover over this title: Spurious Data

Notice that the chart’s label turned into a more informative headline, repeated here to make it easier to associate the two.

B: High point

Now click anywhere in the chart (it will pop out of the page) and mouse over these two paragraphs and see how (in most browsers) the label in the chart will still respond by showing the full headline.

C: Another peak

Now move around above the line and note how the cursor jumps from peak to peak, always finding the chart feature closest to the cursor. This is how the eye naturally works, though virtually every other interactive chart simple-mindedly takes the cursor’s horizontal position and highlights data at that time value.

Imagine how difficult it would be to find a single point, like the spurious data spike at “A” (roll over this text to show it in the chart). Other charts solve this problem by introducing another problem: they give you fewer horizontal data points—less information—so it seems easier to hunt for the one you want.

That didn’t satisfy us because we wanted thousands of data points (some 5,000 in this chart) immediately at hand, so you can expand the chart instantly. Click anywhere but a call-out label on the chart and you’ll see what we mean. Go ahead and stretch it across several monitors: there’s lots of data there.

D: Low point

You can easily find the low points in the chart if you move the cursor around under the curve.

E: Low point 2

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.

peers chart .    .    difference chart

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!

summary chart  

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.

volume chart  

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.

volatility chart  

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)