TreeSpider: An Organization Structure Visualization Library

TreeSpider is a powerful library designed to display organizational structures in a visually appealing manner. Built with D3.js and TypeScript, it offers flexible customization options to suit the specific needs of any organization.

Key Features

• Stylish Representation: Create visually engaging organization charts that can be tailored to match the branding and aesthetics of your organization.
• Multiple Chart Types: Choose from various chart types and personalize the chart head for a distinctive look.
• Simple Data Integration: Easily integrate your organization's employee data with a straightforward data structure.

Example Usage

To get started with TreeSpider, the data structure required is simple and linear. Each employee is represented with an ID and a parent ID indicating the reporting structure. The data format is as follows:

{
    id: string;
    parentId: string;
    name: string;
    role: string;
    location: string;
    image: string;
}

Add your organization's employee data in this format:

const tree_data = [
    {id: "1", name: "Abayomi Amusa", role: "Manager", location: "Lagos, Nigeria"},
    {id: "2", parentId: "1", name: "Trey Anderson", role: "Product Manager", location: "California, United States"},
    ...
];

Create a TreeSpider instance and pass in the data:

const instance1 = new TreeSpider({
    targetContainer: '#container-1',
    tree_data: tree_data
});

Personalization Options

TreeSpider offers various options for customization, including:

• Tree Types: Choose from seven different tree types.
• Chart Head Types: Select from three distinct chart head styles.
• Color Palettes: Customize the appearance with a color palette for the chart head.

Example of setting custom options:

const chart = new TreeSpider({
    targetContainer: '#chart-container',
    tree_data: tree_data,
    chart_head_type: 'landscape',
    tree_type: 'hSpiderWalk',
    pallet: {
        darker: .8,
        gray: 10
    }
});

Interactive Features

TreeSpider allows programmatic interaction through methods, making it easy to initialize, manage and respond to events within the library:

const chart = new TreeSpider({
    autoInitialize: false
});

document.querySelector('#random-button').onclick = () => chart.initialize();

Subscribe to various events using either the addEventListener method or the on method:

chart.on('library.init', (e) => {
    console.log("The library has been initialized", e);
});

Conclusion

TreeSpider provides an intuitive and flexible solution for visualizing an organization’s structure, making it an essential tool for anyone looking to enhance their organizational chart presentation.