Can I create a flow chart (no tree chart) using D3.js

Question

can I create a flowchart like this one:

starting form a json object using the D3.js library?

What should the json structure look like?

Have you got any example I can analyse?

Thank you very much.

Answer 1

can I create a flowchart like this one?

D3 is capable of doing it.

starting form a json object using the D3.js library?

Yes

What should the json structure look like?

Depends on how you approach the project. I'm using force layout and removing the force, so my JSON is

{node:
    [{
        id: 1,
        title: 'title'
    }],
 link: 
    [{
        source: 0,
        target: 1
    }]
 }

Have you got any example I can analyse?

For your inspiration

• http://marvl.infotech.monash.edu/webcola/
• http://www.coppelia.io/2014/07/an-a-to-z-of-extra-features-for-the-d3-force-layout/

Starting point https://github.com/mbostock/d3/wiki/Force-Layout

how to wrap your text in block http://bl.ocks.org/mbostock/7555321

D3.js is not suited very well for this kind of visualization. The visualization is just too complex to do a simple mapping from data to SVG

Not sure why, but IMO flowcharts are one of the simplest types of diagrams, blocks and lines that connect them. D3 has built-in means to draw nodes and connectors. Yes that is not out of the box, ready to use solution. But all you need to do is learn and customize.