Innovation X

Overview

A concept project exploring how an interactive, D3.js-powered graph can turn a static org chart into a scalable organisation intelligence platform — surfacing departments, teams, roles, people, reporting lines, cross-functional teams and live projects in one explorable view.

Context

Traditional org charts are static, hierarchy-only images that struggle to represent modern organisations with cross-functional teams, matrixed reporting lines and shifting project work.

Challenge

Design and build an interactive organisation graph that scales from a single organisation-level view down to individual people, without becoming visually overwhelming or losing the relationships that make an org chart useful.

Idea

Model the organisation as a graph rather than a tree — departments, teams, roles, people and projects as nodes, with structural, reporting, cross-functional and project links as distinct edge types — then let a force-directed D3.js layout, search and filtering make that graph explorable.

Experience

Explored zoomable and pannable navigation, draggable nodes, expandable and collapsible departments and teams, hover-based relationship highlighting, a searchable focus mode, and a detail panel summarising a selected node's role, manager, direct reports, responsibilities, team size and current projects.

UX/UI Approach

Prioritised progressive disclosure — the graph opens at a readable department-level view, with detail (teams, roles, people, projects) revealed on demand through expansion, hover and selection rather than shown all at once.

Engineering Approach

Built as a client-side React component that hands node positioning to a D3.js force simulation while keeping selection, filtering and search state in React, with a ResizeObserver for responsive sizing and cached node positions so the layout stays stable across interactions.

Accessibility

Graph nodes are keyboard-focusable and operable buttons with descriptive labels, the search input supports a full node list via a native datalist, and colour is paired with distinct node sizing and labelling rather than being the only differentiator between node types.

Organisation Graph

An interactive D3.js visualisation of Innovation X’s structure — departments, teams, roles, people, reporting lines, cross-functional teams and active projects. Zoom, pan, drag nodes, expand or collapse departments and teams, and search to focus on any part of the organisation.

My Contribution

• Designed the graph data model — organisation, department, team, role, person and project node types with structural, reporting, cross-functional and project relationships.
• Built the interactive D3.js force-directed graph, including zoom/pan, drag, expand/collapse and hover-based highlighting.
• Implemented search-and-focus and type-based filtering so any department, team, role or person can be located quickly.
• Built the node detail panel surfacing role, department, manager, direct reports, responsibilities and current projects.

What I Learned

Turning a hierarchy into an explorable graph is as much an information-design problem as an engineering one — the interesting work was in deciding what to hide by default, what to highlight on hover, and how to keep a data-dense visualisation legible at a glance.