Blog

Hacking a New Org Chart

Thumbnail
We have a company-wide hackathon each quarter.

We have a company-wide hackathon each quarter. Rahul Nair has been a big hackathon champion and posted a summary of the most recent one. While my project didn't work out this time, my project from the last one was quite successful. We've had hackathon projects that add to the product, improve engineering tools, and improve programs around philanthropy and diversity. I observed that the built-in org chart from our HR provider was pretty bad. Each organization had to maintain their own hand-drawn org charts. As the leader of the largest organization in the company, I found this process particularly painful for my team. So I set out to build an org chart visualization tool on top of a previous hackathon project, our corporate directory. I wanted to learn more about d3js, a powerful javascript library for data visualization. I had used it before but never grasped how it worked. I started with some stock collapsible tree examples, but none of them worked well for my needs:

  • 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:

org chart

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.