D3 Organization Chart

I’ve done alot of network analysis in my career using various tools such as R, Python, Gephi, etc. however always ran into a problem of how to make much of the insights a bit more self-service. Yes, of course you can, as I have, make many plots, posters, or animations, however still lacked that je ne sais quoi. Coincidentally, I ran into another problem that many have in companies: what’s our organization chart look like. More specifically, how am I connected to so-and-so I just met in the hallway. To help further the first problem, but ultimately solved the second (well almost) I created an organization chart using d3.js after pulling data from active directory.

Due to the complexity of the visual, you may wish to open in full size.

How To Use:

Initalization occurs on startup, refresh, or selecting a new inital node (employee). This will initially show this employee’s subordinates and / or manager. Hover over a node will also show the details of that employee on the right.

Clicking any of these nodes will expand their connections. If an employee is currently showing their connections and those nodes have no connections shown, clicking again will hide those connections to the employee.

The visualization supports zooming via the mouse wheel and panning via click-and-drag

For demonstration, the network may automatically grow or shrink via the Animate Button. This repetitively randomly select a node and expand or trim it’s connections if it is possible. As the network becomes larger, this possibility becomes less likely, and hence changes much slower.

Click a region for more information. The visualization supports zooming via the mouse wheel and
panning via click-and-drag

About the Data:

For demonstration purposes this data is fake, however data can be extracted easily via MS Active Directory, parsed, and formatted into CSV for use.