Organizational chart with D3.js, expandable, zoomable, and fully initialized

An organizational chart made with D3.js with lots of features such as expanding and zooming.

D3.js is a JavaScript library for manipulating documents based on data; however, it doesn’t give you any clue on how to make an organizational chart!

Thanks to Julien Henri Reszka’s great example on Observablehq.com, now we have a great boilerplate we can start with.

The thought of building an expandable and zoomable tree-like organizational chart using D3.js is amazing. This idea is more simple and direct than its counterparts, all based on SVG. Unfortunately, it might be too complex to work with org charts and it took me some time to wrap my head around the code that Julien wrote before. On the other hand, I made some interesting improvements to the data part of this project.

This is a very cool starter project that could help you build your next org chart.

What is D3.js:

D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.
Read more about it on their website.

What is an organizational chart:

An organizational chart, also called organigram or organogram, is a diagram that shows the structure of an organization and the relationships and relative ranks of its parts and positions/jobs.
Read more about organizational charts on Wikipedia.

Let’s start

The main JavaScript file is too long to put it here so I’ll focus on the data file because you don’t need to make any changes to the main script file.
Properties are in plain English 🙂, we don’t need to explain them.
You can go through the lines and read my comments, I tried to make everything simple.

Default card object:

const cardDefaults = {
    width: 324,
    height: 132,
    borderWidth: 1,
    borderRadius: 5,
    borderColor: { red: 0, green: 0, blue: 0, alpha: 0.1 },
    backgroundColor: { red: 255, green: 255, blue: 255, alpha: 1 },
    connectorLineColor: '#d8d7d7',
    connectorLineWidth: 3,
    dashArray: '',
    expanded: false
};

Default image (logo) inside the card:

const nodeImageDefaults = {
    width: 94,
    height: 60,
    centerTopDistance: 0,
    centerLeftDistance: 0,
    cornerShape: 'ROUNDED',
    shadow: false,
    borderWidth: 1,
    borderColor: { red: 0, green: 0, blue: 0, alpha: 0.15 }
};
const nodeIconDefault = { icon: './assets/media/companies-tree.svg', size: 24 };

Default template:

const templateDefault = (title, afterTitle, share) => {
    // Throw error if there was no title
    if (!title) throw new Error('You have to provide a title!');

    let output = '<div class="tree-chart__card">\n';

    if (title) {
        output += `<div class="tree-chart__card__title">${title}</div>`;
    }
    if (afterTitle) {
        output += `<div class="tree-chart__card__after-title">${afterTitle}</div>\n`;
    }
    if (share) {
        output += `<div class="tree-chart__card__share">${share}</div>\n`;
    }

    output += '</div>';

    return output;
};

Screenshot:

Finally

Download the working example or view demo from the buttons at the beginning of this post.
Please don’t hesitate to write to me if something went wrong with you 🙂 I’m always glad to help.

References and Credits:

D3.js
Source Sans Pro font
Main code by Julien Henri Reszka