Site icon Cybertek Defense

Automate Organizational Charts

CyberTek

Short Description: Automate a dynamic, interactive web-based visualization library, that helps with visualizing hierarchical data within SharePoint or Confluence by utilizing some code and an existing CSV file.

Detailed Description: This is a highly customizable d3 org chart. Integrations available for Angular, React, Vue. The chart can be implemented in many online workspaces that allow for HTML, embedded code modules, etc. The GitHub repository has many other examples to utilize than just the one I am showing you below for my use case of this. I simply needed a way to present a clean org chart based on an existing database of users for use when presenting. The org chart had some requirements that needed the solution to be free of purchase, little user interaction as possible, repetitive formats/styles across all new charts, and a way to ingest backend tables of existing people. While Visio is a powerful tool, it took too much time copying data, moving boxes around, lining things up correctly, etc.

Included Features

Links:

Walkthrough:

This walkthrough will provide a simple org chart that offers the ability to automate and export the org chart. A few other things that are included are the ability to expand other managers than may have people reporting up to them specifically, and ability click and drag the chart around.

<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-org-chart@3.1.0"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-flextree@2.1.2/build/d3-flextree.js"></script>

<button onclick="chart.exportImg()">Export Current</button>
<button onclick="chart.exportImg({full:true})">Export Full</button>
<button onclick="chart.exportSvg()">Export SVG</button>
<button onclick="downloadPdf(chart)">Export PDF</button>

<script src="https://unpkg.com/html2canvas@1.1.4/dist/html2canvas.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.3.1/jspdf.umd.min.js"></script>
<script>
  const blankChecker = function(row) {
    if (row.length === 0) {
      return null;
    } else {
      return row;
    }
  };

  function downloadPdf(chart) {
    chart.exportImg({
      save: false,
      full: true,
      onLoad: (base64) => {
        var pdf = new jspdf.jsPDF();
        var img = new Image();
        img.src = base64;
        img.onload = function () {
          pdf.addImage(
            img,
            'JPEG',
            5,
            5,
            595 / 3,
            ((img.height / img.width) * 595) / 3
          );
          pdf.save('chart.pdf');
        };
      },
    });
  }
</script>

<div class="chart-container"></div>

<script>
  var chart = null;

  d3.csv(
    'ENTER OR REPLACE YOUR FILE ADDRESS HERE', blankChecker
  ).then((data) => {
    chart = new d3.OrgChart()
      .nodeHeight((d) => 85 + 25)
      .nodeWidth((d) => 220 + 2)
      .childrenMargin((d) => 50)
      .compactMarginBetween((d) => 35)
      .compactMarginPair((d) => 30)
      .neighbourMargin((a, b) => 20)
      .nodeContent(function (d, i, arr, state) {
        const color = '#FFFFFF';
        const imageDiffVert = 25 + 2;
        return `
                <div style='width:${
                  d.width
                }px;height:${d.height}px;padding-top:${imageDiffVert - 2}px;padding-left:1px;padding-right:1px'>
                        <div style="font-family: 'Inter', sans-serif;background-color:${color};  margin-left:-1px;width:${d.width - 2}px;height:${d.height - imageDiffVert}px;border-radius:10px;border: ${d.data._highlighted || d.data._upToTheRootHighlighted ? '5px solid #E27396"' : '1px solid #E4E2E9"'} >
                            <div style="display:flex;justify-content:flex-end;margin-top:5px;margin-right:8px"></div>
                            <div style="background-color:${color};margin-top:${-imageDiffVert - 20}px;margin-left:${15}px;border-radius:100px;width:50px;height:50px;" ></div>
                            <div style="margin-top:${
                              -imageDiffVert - 20
                            }px;">   <img src= "${d.data.image}" style="margin-left:${20}px;border-radius:100px;width:40px;height:40px;" /></div>
                            <div style="font-size:15px;color:#08011E;margin-left:20px;margin-top:10px">  ${
                              d.data.name + " " + d.data.lastName
                            } </div>
                            <div style="color:#716E7B;margin-left:20px;margin-top:3px;font-size:10px;"> ${
                              d.data.position
                            } </div>

                        </div>
                    </div>
                            `;
      })
      .container('.chart-container')
      .data(data)
      .render();
  });
</script>

I highly suggest going out to bumbeishvili GitHub site and review his project in more detail. There is a plethora of other examples he provides and a large community of people utilizing his code to create their own org charts.

Exit mobile version