Skip to content
Dynamic message sequence charts for d3.
Branch: master
Clone or download
Latest commit 05ca8b4 Jun 21, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
doc d3 v5 fixups Jun 21, 2018
LICENSE Initial commit Nov 26, 2015
README.md Initial commit Nov 26, 2015
d3-msg-seq.js d3 v5 fixups Jun 21, 2018
d3-msg-seq.min.js d3 v5 fixups Jun 21, 2018

README.md

Message Sequence Charting for D3

A simple dynamic/static message sequence chart for d3.

Dynamic

Dynamic Demo Image

Static

Static Demo Image

Quick Start

Check out the example.

If you just want to generate a static chart, set the fade property to 0.

Less Quick Start

Set up a message sequence chart:

var msg_seq = d3.messageSequence().fade(5000); // fade time is in msecs

then call the chart on your svg element selection.

d3.select('#container')
  .append("svg")
  .attr("width", "100%")
  .attr("height", "100%")
  .call(msg_seq)

You can then add messages to your chart like so:

var msg = {from: "customer", to: "barrista1", msg: "place order"};
msg_seq.addMessage(msg);

You'll also need to set up some styles, so the chart appears properly, for example:

g.actor line {
  stroke: lightgray;
  stroke-width: 1px;
}

g.message text {
  font-family: monospace;
}

g.message line {
  stroke: black;
  stroke-width: 2px;
}

g.message path {
  stroke: black;
  stroke-width: 2px;
}

Caveats

I didn't include default styles, since I believe you'd need to use !important to override them, which seems janky.

A declarative data method might be a better approach than the imperative addMessage function.

This is a first stab, it's pretty rough. PR's are gladly accepted! 💕.

You can’t perform that action at this time.