Org chart
In this material, we will talk about the development of an interactive browser-based diagram of company departments and employees. After analyzing third-party solutions, we realized that all of them are somehow not very suitable for displaying hundreds of employees simultaneously (and besides that, they tend to use collapsed nodes, which we really didn’t like).
Since we clearly envisioned this diagram as a classic UX pattern “Infinite Canvas” (as everyone knows fr om Miro and Figma) instead of lots of filters and sorts, we created a huge canvas, and the user simply can to zoom and actively move around the canvas.
Trackpad: the wheel event scrolls the diagram, drag on RMB + wheel, zoom — pinch zoom, or when using a mouse ctrl + wheel. This diagram is for trackpads mainly, but it’s also functional with a mouse. Click works. Mouse-wheel zooms the diagram, drag — on RMB and wheel. Click works both for mouse and trackpad — on a trackpad drag with two fingers. DragOnly mode — wheel zooms, drag on LMB, click doesn’t work.
We analyzed a bunch of structural diagrams, and all of them has a conflict between the principles of defining the hierarchy of departments — either Product-based or Divisional-based.
We found a way to remove that limitation. As a result, we made our own version, wh ere you can display even 1000 people at once on one screen. Solution allows to create even up to 10 virtual departments per person: “all female programmers” or “all blond boys,” etc. There’s no need to make a bunch of filters for this — the lines clearly show the connections which organizational entities each person belongs to.
Core things are done with the help of Yoga (it’s not a full-fledged renderer, it’s code that on the base of flexbox properties description creates a 3D description that’s easy to render).
In principle, describing an element in the style of this framework is almost the same as using React to describe css-flexbox styles for a component.