1

I am rendering a scatter plot every 5 seconds where the X-axis denotes time and Y-axis denotes a set of names ordered alphabetically.

mockup

A set of data points (say, 'X's) can optionally be grouped into a category and so I use a color to show this. Therefore all 'X's with the same color belong to the same category and so on.

Problem: I have tens of thousands of 'Name's and they can appear randomly on the graph at some point in time. The real purpose is to provide the user with a graph that provides the ability to monitor these names. Therefore, every time I render the graph, I get the list of points to be rendered and the underlying graph library: Flotr2 takes care of assigning colors to the sets of points. Therefore, if the dataset contains two categories of points, it assigns two colors and if a point belonging to a new category arrives, it assigns a third color. As a result of this, what I am observing due to this is a flicker effect:

mockup

And when the point disappears, the colors revert back to the ones before. Is there a good way to solve this problem? I have two specific problems:

  • Colors keep changing for every new point being added
  • A new point added somewhere shifts every other point vertically in either direction. For instance, if Category 2.5 is added, it ends up shifting Category 2 down and Category 1 up because the alphabetical order should be preserved.

In a scenario which is highly dynamic, such a graph tends to be useless because of the dynamism it shows visually. One obvious solution I can think of is to pre-allocate space for all points and all categories possible in the graph so that an appearance of a new point will not change anything but it just draws a point somewhere. However, I am not clear if this approach is ideal for large data sets where the set of names and categories change often.

Is there a good way to solve this problem? I am open to other graph types that mitigate this problem. In short, I want a real-time display that is capable of showing the appearance of new names on a time axis.

Legend
  • 113,822
  • 119
  • 272
  • 400
  • 1
    Use a scrolling log or a Gantt chart. – Deer Hunter May 25 '13 at 04:38
  • @DeerHunter: +1 Thank you. Can you kindly elaborate on how to address this using Gantt charts? – Legend May 26 '13 at 21:09
  • What you have is a data reduction problem. Human beings are not accustomed to deal with scores of new pieces of data. Only if you reduce the number of names/categories to manageable proportions (not larger than 8-10) can Gantt or any other timeline based chart be useable (and each category's color should be consistently the same all the time). Try to think in terms of decision-making workflow of your users - they aren't machines, their cognition capabilities are very limited. – Deer Hunter May 26 '13 at 21:42
  • 1
    I'll move this to stack overflow for you, but if you've got any code to include, maybe a jsfiddle that'll help you get better answers. – JonW May 26 '13 at 21:55
  • I was hoping more for design answers but you maybe right. I will try to think about what kind of JSFiddle will help here. – Legend May 26 '13 at 22:30

0 Answers0