Hacking a New Org Chart
- Org charts can be large. I wanted a more compact layout than was possible with the example layouts.
- I wanted to convey additional management levels more strongly than individual contributors.
- I wanted to look at part of the tree and still show the reporting chain. Fully expanding the tree made it hard to focus on just the relevant piece.
- I wanted additional information (pictures, title, location) that didn't work with the example layouts.
All of this led me to build my own layout function. If you think you want to use d3js and are trying to understand how it really woks, I highly recommend writing your own layout function. It wasn't until then that I fully grasped how things really worked. These layout functions just compute coordinates that are used by the consumer to draw and animate specific behaviors. I ended up with three different node types: a manager node, an individual contributor node, and a parent node. You can expand or collapse any node, as well as re-root the tree on any particular node. You can also auto-expand all nodes and have a nice visual display of an entire organization. Each level is laid out in a column, making sure an entire organization will "sit beneath" any expanded nodes above it regardless of how much is expanded. Here's an example:
I'd like to get the code up on github, but it requires additional work to clean up. A former colleague reached out to me as he was working on a data structure visualization tool with similar needs. Hopefully he can generalize my code into something useful. Each hackathon is better than the last, and I'm thrilled to have them part of our culture. I only hope that some of my future hackathon projects can be as successful as this one.