Creating a graph with multiple levels

Question

I need to create a graph with a dynamic number of vertices, which will look like this enter image description here

Which layout is best used to get vertical vertices?

Answer 1

Force directed graph might be a solution to your problem. Here are a few options:

1. https://zoomcharts.com/en/chart-types-demo/graph-chart-using-netchart
2. https://bl.ocks.org/mbostock/4062045
3. http://visjs.org/examples/network/basicUsage.html

If you want to have the layout going explicitly in vertical way, you might need to consider either hierarchical or fixed layout like here:

http://jsfiddle.net/L9m34ev5/1/

 var t = new NetChart({
        container: document.getElementById("demo"),
        area: { height: null },
        navigation:{
            focusNodeExpansionRadius: 2,
            initialNodes: ["syslog"],
            mode:"focusnodes"
        },
        style:{
            node:{display:"image",lineWidth:2, lineColor: "red", imageCropping: true},
            nodeStyleFunction: function(node){node.radius = 50;}
        },
        data: { url:"https://zoomcharts.com/dvsl/data/net-chart/bubbles.json" },
        layout:{
            mode:"hierarchy",
            nodeSpacing: 45, // horizontal spacing between nodes
            rowSpacing: 80, // vertical spacing between node rows in the hierarchy layout
            rotation: 90
        }
    });