Data Generation

Chart card content is pure HTML, you have ability to generate it's content as you want. Some properties like node card dimension, node image corner shape, colors e.t.c are predefined.

Suppose, in the example bellow myData is your data. which has following structure:

myData = [{
  name: "Ian Devling"
  imageUrl: "https://raw.githubusercontent.com/bumbeishvili/Ass…s/master/Projects/D3/Organization%20Chart/cto.jpg"
  area: "Corporate"
  office: "CTO office"
  unit: Object {type: "business", value: "Business first"}
  positionName: "Cheaf Executive Officer "
  id: "O-1"
  parentId: null
},
{
  name: "Davolio Nancy"
  imageUrl: "https://raw.githubusercontent.com/bumbeishvili/Ass…ster/Projects/D3/Organization%20Chart/general.jpg"
  office: "CEO office"
  unit: Object {type: "business", value: "Business one"}
  positionName: "CTO "
  id: "O-2"
  parentId: "O-1"
}]

You can use this map function to generate desired content

data = myData.map(d=>{
  const width = Math.round(Math.random()*50+300);
  const height = Math.round(Math.random()*20+130);
  const cornerShape = ['ORIGINAL','ROUNDED','CIRCLE'][Math.round(Math.random()*2)];
  const nodeImageWidth = 100;
  const nodeImageHeight = 100;
  const centerTopDistance = 0;
  const centerLeftDistance = 0;
  const expanded = false; //d.id=="O-6"
  
  const  titleMarginLeft = nodeImageWidth/2+20+centerLeftDistance
  const  contentMarginLeft = width/2+25
  return {
    nodeId:d.id,    // node identificator
    parentNodeId:d.parentId,  // parent node identificator
    width:width,   // node card width
    height:height,  // node card height
    borderWidth:1,  // node card border width
    borderRadius:15,  // node card border radius 
    borderColor:{ .   // border color
        red:15,
        green:140,
        blue:121,
        alpha:1,
    },
    backgroundColor:{  // background color of node card
      red:0,
      green:81,
      blue:90,
      alpha:1,
    },
    nodeImage:{        // node image properties
      url:d.imageUrl,    // url to image
      width:nodeImageWidth,   // image width
      height:nodeImageHeight,   // image height
      centerTopDistance:centerTopDistance,   // vertical distance from center
      centerLeftDistance:centerLeftDistance,  // horizontal distance from node center
      cornerShape:cornerShape,      // corner shape, can be 'ORIGINAL','ROUNDED','CIRCLE'
      shadow:false,             // if image has shadow (if yes, performance may be poor for 50+ visible nodes)
      borderWidth:0,           // image border width
      borderColor:{           // image border color
        red:19,
        green:123,
        blue:128,
        alpha:1,
      },
    },    
    // node card content
    template:`<div>           
                  <div style="margin-left:${titleMarginLeft}px;
                              margin-top:10px;
                              font-size:20px;
                              font-weight:bold;
                         ">${d.name} </div>
                 <div style="margin-left:${titleMarginLeft}px;
                              margin-top:3px;
                              font-size:16px;
                         ">${d.positionName} </div>

                 <div style="margin-left:${titleMarginLeft}px;
                              margin-top:3px;
                              font-size:14px;
                         ">${d.unit.value}</div>

                 <div style="margin-left:${contentMarginLeft}px;
                             margin-top:15px;
                             font-size:13px;
                             position:absolute;
                             bottom:5px;
                            ">
                      <div>${d.office}</div>
                      <div style="margin-top:5px">${d.area}</div>
                 </div>
              </div>`,
    connectorLineColor:{      // Edge color
      red:11,
      green:123,
      blue:108,
      alpha:1
    },
    connectorLineWidth:5,      // Edge width
    dashArray:'',              // We can have stripped edges, you should specify dashArray for it (google: svg dashArray)
    expanded:expanded          // If we want node to be expanded
  } 
})

See this org-chart notebook for more exploration