Graphael Business Quadrant Charts

Next step was to produce a (more) polished product. We started to feed real data into our prototype code and quickly spotted some obvious visual issues:

  • dot placement was mis-aligned
  • there were dot hotspots

The relative dot placement was controlled by the user defined minimum and maximum axis values. At first glance a chart with X and Y axis minimum of 1 and maximum of 5 should give a 5 x 5 grid. Nope - it should provide a 4 x 4 grid with all of the dots being placed on the grid lines - think 1/2 point shift. 1 was the left most value and aligned on top of the left side y axis line. Ouch. Wrong. Similarly 5 ended getting placed on the rightmost edge of the chart area. This was not visually pleasing (or correct). We needed the dots to be placed inside each grid box, not on the grid lines. This was very obvious after we viewed a few real graphs, but in retrospect this was a very subtle concept since we did not identify the issue beforehand (secret sauce hint provided!).

Some introspection revealed that the data (or the grid lines) needed to be shifted by 1/2 a grid. This observation led to the creation of a preprocessor engine that we inserted in between the raw data extraction engine and the graphing engine. The preprocessor massaged the raw data point values, the axis scale values and the axis title values.The general concept stretched all data (including axis labels) by a factor of 2 and inserted gridlines at the midpoint between the original values and provided empty axis labels for the new "holes" between the "stretched" data points. And everything got bumped up by 1/2 a slot to prevent the data points from lying on the extreme left and right of the graph area. These transformations are pretty confusing, subtle but entirely obvious once you see a concrete example. Trust me. Or PM me for details...

The second visual challenge was to handle data collisions. The users rated risk from Very High to Very Low. We gave them 5 different choices: Very Low, Low, Medium, High, Very High. So it was really a 1 to 5 ranking scale. This means that you can expect multiple different data points with the same risk value.Very High is Very High. All Very high's are the same. But not visually. The end user still want to see all of the individual Very High risks depicted as separate data points on the chart. The scientific scatter chart people may want to see a single point that was "brighter"? The science people may be happy to have hotspots identified in a very large data set. The business people want to deal with each individual important data point as they are generally dealing with a smaller data set.

Dealing with collisions is simple. Redistribute the data so that all points are visible.But you can move a data point into a new grid spot. After some thought the obvious solution was to stretch each grid box to allow multiple non-colliding data points. In simple terms we could stretch our 5x5 grid to be a 25x25 grid (this would allow 25 distinct dots in each grid box). But we needed to maintain the original 5x5 visual concept. We did not want 25 different axis labels. This required that we separate the data and axis transformation. Axis transformation remained untouched. Data transformation was subjected to an additional algorithm

How to spread the dots? The user would expect a simple centroid style of data distribution. First dot goes in the center. Next dot goes next to it. Next dot goes next to that.Obvious.Visually simple. Not so simple to program. The delta-x and delta-y for the next point all depending upon the selected grid scaling factor. I got lazy and implemented a random walk algorithm to distribute the points. Each real data point randomly walked 1 unit away from its current location until it did not collide with an existing displayed point.

Success... We had visually pleasing but scientifically incorrect Business Quadrant Charts.