CHARTING WORK
(Work in progress)

Page last updated January 28, 2009



HOME

PROJECTS

SPEAKING

DEPLOYED WORK  &  SHOWS

CHARTING  &  GRAPHIC WORK

ESSAYS

GIFTS

UNREALIZED WORK

BACKGROUND

BIOs, IMAGES  &  CVs

CONTACT

COLOPHON

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 conclusion—a 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.

price chart        

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

Click “A” in the chart to scroll to here

You will also have noticed that the chart’s label turned into a more informative headline that could have been repeated here to make it easier to associate the two.

B: High point

Now mouse over these two paragraphs in the Web page’s scrolling text and see how (in most browsers) the label in the chart responds 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 there.

Imagine how difficult it would be to find a single point, like the Spurious data spike at “A” (roll over this italic text to expand it on 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 Georgia 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 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 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 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 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 processes—off-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 more—controlled 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)


All the work and images on and linked from this page © W. Bradford Paley, 2008–2009; all rights are reserved.