Organisation Chart

d3-org-chart renders a large hierarchy that stays readable: collapse branches, change direction, search and export.

Compact

Company structure

Click a card to centre it, or use the chevron to fold a branch

d3-org-chart 3.1.1

Selected person

Click any node in the chart to see their details here.

Headcount by department

Edit the tree

Add a report to the selected person

Data shape

A flat array — the library builds the hierarchy from parentId

const data = [
  { id: '1', parentId: '',  name: 'Aigars Silkalns', role: 'Chief Executive Officer', dept: 'Executive' },
  { id: '2', parentId: '1', name: 'Sarah Chen',      role: 'Head of Product',         dept: 'Product'   },
  { id: '3', parentId: '1', name: 'Marcus Webb',     role: 'VP Engineering',          dept: 'Engineering' }
];

new d3.OrgChart()
  .container('#orgChart')
  .data(data)
  .nodeWidth(() => 250)
  .nodeHeight(() => 120)
  .nodeContent(d => `<div class="oc-card">${d.data.name}</div>`)
  .onNodeClick(id => console.log('clicked', id))
  .render();