web app – Visualize Date gaps and dates overlapping

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