Automate Organizational Charts

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.

The Data – One of the main components for this org chart to function is by use of the data pulled into the chart. The data is best referenced in a .CSV file format. There is no limitation as to how many people can be listed for the org chart to output the visual representation/flow if each sub-direct person (ex. A manager that reports to a VP) can correspond to the next higher up in the chart if there is on. This can be represented by a Parent ID and a Child ID. The Parent ID references the groups leader or manager, while the Child ID references all the applicable direct reports to the Parent ID of the group. As you start to visualize this, you can create multitudes of groups with different Parent and Child IDs that correspond with one another, all leading to 1 single Parent ID (ex. CEO of a company).
The Chart – The other main component is the code behind the org chart. There is a wide range of customizations you can make to the org chart utilizing the existing or new code. The focus here is that the data utilized for the org chart is properly linked within the code for it to pull the data into the chart. Otherwise, there are many examples provided from the GitHub page where you can obtain other formats, layouts, styles, etc. For the chart to work, the .CSV file and the code need to be compatible with the web space presenting the visual. This means the web space needs capabilities for allowing .CSV files to be uploaded and stored somewhere. The data must be kept until the org chart is no longer needed or the code will break. The web space must also allow for embedded code or HTML code to be added for it to operate.

Included Features

Paging support: Ability to scroll and expand sub-reports in which an org chart has too many siblings to report on a single page.
Search capabilities: Ability to search for a particular user within an org chart
Zoom and panning capabilities: Ability to zoom in and out within the chart rather than the entire browser (preventing clarity issues with the data). Also, ability to pan in different directions where tables are involved within the org chart
Data Manipulation: Ability to add/remove particular fields in the org chart that reference the backend data. This is useful if you want to prevent certain data from being visible in the org chart or if you want to add a person’s location or email address rather than just a title and name.

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.

Download or create a CSV file containing the applicable persons needed to be included in the org chart
- The data must include names, ID, child ID, and other columns for each person
Open Confluence where we will create the org chart.
- Either create a new page where the org chart will be displayed or open an existing page
- Edit the page and add 2 modules.
  1. Upload the CSV File
    - Select the plus icon in the top toolbar to view a menu.
    - Select “Files and Images” from this menu.
    - Select “Upload Files”
    - Select the CSV file we downloaded from earlier.
    - Make sure the checkbox has the correct CSV file and select “Insert”.
    - The file should be visible on the page.
    - Left click the file image and select “Show As Link”.
  2. Add the Org Chart Code
    - Select the plus icon in the top toolbar to view a menu.
    - Select “Other macros”
    - In the “Search macros” field, enter “HTML”.
    - Select just “HTML” for the macro to use, do not select “HTML Include”.
    - You should see an “Insert ‘HTML’ Macro” screen with a preview option, select “Insert” as we will not do anything on this screen.
    - An HTML block should allow you to enter code, copy and paste the code from below.
    - You will need to update 1 line from the code so that we can utilize the CSV file in the code.
    - Before making any edits to the code, right click the name of the CSV file on our page (the file we uploaded from earlier steps) and select “Copy Link Address”.
    - Within the code block, scroll down until you see “ENTER OR REPLACE YOUR FILE ADDRESS HERE”. Paste your link address we copied from the previous step between these quotes.
- Select “Update” on the page and the org chart should be displayed.

<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.

Automate Organizational Charts

Related Posts

Hide Public Folders in GAL (Global Address List)