Creating a swim lane chart using d3 [closed]

Question

I need to generate a swim lanes chart similar to the following but with the addition of showing dates on the Y-axis. All of the nodes I need to show are activities with dependencies, no flow control elements.

Is this possible using something like d3 or is there a better javascript library to use for this type of chart? I haven't seen any examples like it, so if it is possible using d3 I'm not sure where I would start. Any tips would be greatly appreciated.

Answer 1

Based on the previous answer and comments, I started down the path of implementing the chart using Raphael.js. After writing 600+ lines of code (mostly framework stuff to make up for its bare bones nature) I discovered that Raphael.js is extremely slow at rendering text. Not sure exactly why, but it's apparently a known issue. In the end it was taking 3.5s to render a chart with 300 items with 80% of the time spent rendering text.

I then started over with d3.js. I found that d3.js is the much better choice when creating data bound charts when legacy browser support isn't a concern. Creating a swim lane chart in d3.js took me about 100 lines of code vs the 600+ for Raphael.js. The d3.js version also has more functionality, looks nicer, and is more responsive.

While the declarative style of d3.js takes some getting used to, it makes working with data super easy. As an added bonus, my chart now renders in about 250 ms :)

See http://bl.ocks.org/1962173 for the final swim lane chart that I created.