A simple D3 ladder diagram component which plots Messages between different Sources on a timeline. Sources must have 'id' and 'class' attributes. Messages must have 'time', 'class', 'source', and 'target' attributes. Class attributes are added to SVG elements so they can be styled with CSS. Optionally, messages can be displayed in a popup on hover.

This updating example is supposed to simulate an undisciplined chain of command. Yellow represents requests, while green and red are yes and no's respectively. You'll notice employees occasionally go over their bosses heads. For the sources I used a color scheme from Cynthia Brewer, which really wasn't meant to be used with my dingy traffic light colors.

The second dataset represents a SIP call flow. Hover over ladder rungs for more information. Also, the proportions of the graphic are configurable. Scroll wheel while mousing over the Source Labels to alter the look.

I still need to add source reordering and zoom controls. I was also toying with the idea of adding small plots or horizon charts on each sourceline- though that might make it too busy to be useful...