Imagine: at a large company, HR manually updates the employee list in PDF. After a week, the data becomes outdated, the hierarchy gets confused, and finding a specific specialist turns into a quest. In one project for an EdTech company with 500+ employees, we replaced the manual PDF with an interactive tree, reducing contact search time from 5 minutes to 10 seconds and saving the company 150,000 rubles per year. We solve this problem with interactive organizational structure visualization (Org Chart) — a dynamic employee tree with cards, connections, and search. Such a tool not only simplifies navigation but also serves as a single source of truth for the entire team.
Our experience — 10 years on the market, over 50 projects for EdTech, retail, and public sector. We integrate Org Chart with 1C, SAP, and any HR systems via REST API. Below, we break down the key implementation approaches.
How to choose a library for interactive Org Chart?
| Library | Flexibility | Ease of start | React support | Key features |
|---|---|---|---|---|
| d3-hierarchy | High | Low | Yes (via SVG) | Full control, zoom/pan, custom animations |
| react-organizational-chart | Medium | High | Yes (JSX) | Simplicity, ready-made Tree, CSS styling |
| OrgChart.js | High | Medium | Yes (JS API) | Drag-n-drop, export to PNG/PDF, minimap |
| @ant-design/graphs | High | Medium | Yes (React) | Many graph types, dark theme, responsiveness |
The choice depends on requirements. If you need maximum control over rendering and non-standard card layouts — d3-hierarchy. If the project is typical and you need a quick launch — react-organizational-chart (it is 3 times faster to start). For enterprise with drag-n-drop — OrgChart.js.
Why we use d3-hierarchy?
In complex projects (network of 2000+ employees, hierarchy depth up to 10 levels), d3-hierarchy gives 2 times more flexibility than react-organizational-chart. We control every pixel: custom cards with avatars, progress bars, actions. We support lazy loading of subnodes — the tree expands on click, reducing initial rendering to 100 ms.
Note: as noted in d3-hierarchy, this library provides algorithms for tree structures with full control over layout.
d3-hierarchy + React
import { hierarchy, tree } from 'd3-hierarchy';
import { useState, useMemo } from 'react';
interface Employee {
id: string;
name: string;
position: string;
department: string;
avatarUrl?: string;
children?: Employee[];
}
function OrgChart({ data }: { data: Employee }) {
const [expanded, setExpanded] = useState<Set<string>>(new Set([data.id]));
const [hoveredId, setHoveredId] = useState<string | null>(null);
const width = 900;
const nodeWidth = 180;
const nodeHeight = 80;
const { nodes, links } = useMemo(() => {
const root = hierarchy(data);
const treeLayout = tree<Employee>()
.nodeSize([nodeWidth + 20, nodeHeight + 40])
.separation((a, b) => (a.parent === b.parent ? 1.2 : 2));
const laid = treeLayout(root);
return {
nodes: laid.descendants(),
links: laid.links()
};
}, [data]);
// Центрирование дерева
const xs = nodes.map(n => n.x);
const minX = Math.min(...xs);
const maxX = Math.max(...xs);
const treeWidth = maxX - minX + nodeWidth;
const treeHeight = Math.max(...nodes.map(n => n.depth)) * (nodeHeight + 40) + nodeHeight + 20;
const offsetX = (width - treeWidth) / 2 - minX;
return (
<div className="overflow-auto">
<svg width={width} height={treeHeight + 20}>
<g transform={`translate(0, 20)`}>
{/* Связи */}
{links.map((link, i) => (
<path
key={i}
d={`M${link.source.x + offsetX},${link.source.y + nodeHeight}
C${link.source.x + offsetX},${(link.source.y + link.target.y + nodeHeight) / 2}
${link.target.x + offsetX},${(link.source.y + link.target.y + nodeHeight) / 2}
${link.target.x + offsetX},${link.target.y}`}
fill="none"
stroke="#d1d5db"
strokeWidth={1.5}
/>
))}
{/* Узлы */}
{nodes.map(node => (
<foreignObject
key={node.data.id}
x={node.x + offsetX - nodeWidth / 2}
y={node.y}
width={nodeWidth}
height={nodeHeight}
>
<EmployeeCard
employee={node.data}
isHovered={hoveredId === node.data.id}
hasChildren={!!node.data.children?.length}
isExpanded={expanded.has(node.data.id)}
onHover={setHoveredId}
onToggle={(id) => setExpanded(prev => {
const next = new Set(prev);
next.has(id) ? next.delete(id) : next.add(id);
return next;
})}
/>
</foreignObject>
))}
</g>
</svg>
</div>
);
}
function EmployeeCard({ employee, isHovered, onHover, onToggle, hasChildren, isExpanded }) {
return (
<div
className={`border rounded-lg bg-white p-2 shadow-sm text-center cursor-pointer
transition-shadow ${isHovered ? 'shadow-md ring-2 ring-blue-300' : ''}`}
onMouseEnter={() => onHover(employee.id)}
onMouseLeave={() => onHover(null)}
onClick={() => onToggle(employee.id)}
>
{employee.avatarUrl && (
<img src={employee.avatarUrl} className="w-8 h-8 rounded-full mx-auto mb-1" />
)}
<p className="text-xs font-semibold text-gray-800 leading-tight">{employee.name}</p>
<p className="text-xs text-gray-500">{employee.position}</p>
{hasChildren && (
<span className="text-xs text-blue-400">{isExpanded ? '▲' : '▼'}</span>
)}
</div>
);
}
react-organizational-chart (simplified approach)
import { Tree, TreeNode } from 'react-organizational-chart';
function SimpleOrgChart({ data }) {
return (
<Tree
label={<OrgNode employee={data} />}
lineWidth="2px"
lineColor="#d1d5db"
lineStyle="solid"
>
{data.children?.map(child => (
<OrgSubTree key={child.id} node={child} />
))}
</Tree>
);
}
function OrgSubTree({ node }) {
return (
<TreeNode label={<OrgNode employee={node} />}>
{node.children?.map(child => (
<OrgSubTree key={child.id} node={child} />
))}
</TreeNode>
);
}
function OrgNode({ employee }) {
return (
<div className="inline-flex flex-col items-center bg-white border border-gray-200 rounded-lg px-3 py-2 shadow-sm min-w-32">
<span className="text-sm font-semibold">{employee.name}</span>
<span className="text-xs text-gray-500">{employee.position}</span>
</div>
);
}
How we work on Org Chart?
| Stage | Duration | What we do |
|---|---|---|
| Analytics | 1–2 days | Study company structure, data sources (1C, SAP, CSV), agree on card composition |
| Design | 1–2 days | Draw tree prototype, approve expansion logic and search |
| Implementation | 3–5 days | Write code in React + d3-hierarchy, configure responsiveness and accessibility |
| Testing | 1–2 days | Check performance on 5000+ nodes, correct links, mobile behavior |
| Deployment | 1 day | Upload to your server or Vercel, provide source code access and documentation |
Timeline and cost
Basic version (clickable cards, tree rendering) — from 1 week. Extended version with search, zoom/pan, lazy loading — 1.5–2 weeks. Cost is calculated individually based on data volume and required integrations. Order a consultation — we'll estimate your project within 1 day.
What you get
- Source code on GitHub with MIT license.
- REST API for employee management (CRUD).
- Demo environment with your data.
- Documentation for deployment and customization.
- 1 hour of team training (Zoom or in-person).
- Code warranty — 6 months of free bug fixes.
How to implement tree search?
function searchInHierarchy(root: Employee, query: string): Set<string> {
const matchedIds = new Set<string>();
function traverse(node: Employee) {
const matches = node.name.toLowerCase().includes(query.toLowerCase()) ||
node.position.toLowerCase().includes(query.toLowerCase());
if (matches) matchedIds.add(node.id);
node.children?.forEach(traverse);
}
traverse(root);
return matchedIds;
}
Search works in O(n) worst case, but for 2000 nodes it is imperceptible. Highlighting matched nodes and automatically expanding the path to them makes navigation convenient. Additionally, we implement keyboard navigation and ARIA attributes for accessibility. The tree adapts to mobile screens with horizontal scrolling. With this feature, the company saves up to 80,000 rubles per year on employee search.
How to integrate with 1C
- Configure REST API in 1C: Salary and Personnel Management.
- Create an endpoint for exporting the employee directory.
- Set up a webhook for incremental updates.
- Implement data import in JSON format on the website side.
- Run synchronization on a schedule.
Contact us to discuss your project. Write to us — and we will prepare a demo tailored to your structure. Get a free consultation. We offer custom development of any complexity.