d3.js for showing workflow runtime state

Question

We are looking to graphically depict state of running workflows. For instance in the below screenshot, runtime state of a workflow is presented. The small green box below an activity indicates that the activity has been processed -

I need to implement something similar for a workflow system. Users need to see the runtime state of workflow (what all activities are there in the flow) and which activities have already completed.

I was hoping to use D3 Visualization API to achieve this. I have a few questions regarding that -

1. Is it free or does it need a license
2. Can something like this be achieved in D3? I was looking at the examples, but couldn't find anything similar

https://github.com/mbostock/d3/wiki/Gallery

3. Any other API which would be more appropriate for this kind of a requirement

Thanks in anticipation.

Answer 1

I had similar requirement, I was able to make such kind of chart using d3 :

You can find the code for same here.

In this i have used bootstrap panels as a content of each state, we could fulfill your requirement by tweaking some code to change position of boxes and direction of arrows.

I can help you modifying the code further if you need.

Hope this helps :) .

Answer 2

You should realize that, unlike Highcharts for example, D3 is not a collection of graphs or visualizations. It's a library (just like jQuery) that allows you to create said visualizations from scratch.

Now, to answer your questions:

1. Is it free or does it need a license

   As stated on the bottom of d3js.org:

   Library is released under BSD license. Copyright 2013 Mike Bostock.

   And wikipedia article on BSD 3-clause license states that:

   This version allows unlimited redistribution for any purpose as long as its copyright notices and the license's disclaimers of warranty are maintained. The license also contains a clause restricting use of the names of contributors for endorsement of a derived work without specific permission.

2. Can something like this be achieved in D3? I was looking at the examples, but couldn't find anything similar

   Yes, this can be achieved. You might find some inspiration in this directed graph editor example.

3. Any other API which would be more appropriate for this kind of a requirement

   For simple cases D3 itself should be sufficient.