A part can have one successor or multiples successors. A part can also have one predecessor or multiple predecessor

The problem we have we want to quickly be able to view which part has which successors and show if there are gaps or overlaps in the date range

The columns Start and Drop are keys which identify the sequence: the predecessor drop key is the same as the sucessor start key

draft visualize date gap or overlap

The important part ist to quickly understand

  • what is wrong with the from and till dates or
  • if Start and Drop do not match (not the case in the exmaple)

What have i done?

I looked at

but none did match my visualization needs.


  1. What would you change to improve visibillity / glancabillity?
  2. Would reducing contrast all none relevant text help?

Table content is on codepen.io

reduced contrast sample

reduced contrast sample


1 Answer 1


Try using colour cobinations and cycling through a set of predefined colors. Alternatively try stronger border colours on various parts of the table cells to try a create a link

Color cells

enter image description here

  • Yes the colors are good and simple way. to lead the eye. Do you think using a color for gaps and overlaps would be helpfull? What do you think about codepen.io/codemuggle/pen/dyNBWXE?
    – surfmuggle
    May 3, 2021 at 2:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.