Build Interactive Organization Charts with treeSpider JavaScript Library

Preview:

Description:

TreeSpider is a robust JavaScript library that helps you generate responsive, interactive organization charts, family trees, or any tree-like structure.

Features:

• Interactive Charts: Create zoomable and rotatable tree charts.
• CSS Customizable: Fully style the appearance to match your branding.
• Multiple Chart Types: Supports various chart types, e.g., default, cellar, goldenRod, hSpider, hSpiderWalk, radialSpiderLeg, vSpiderWalk.
• Data-Driven: Uses a simple, linear data structure (ID and parentID).
• No Dependencies: Lightweight and easy to integrate.
• API Control: Programmatically control zoom, rotation, and appearance.
• Event Handling: Listen for events like initialization, expansion, collapse, and zooming.
• Large Data Handling: Display a large amount of data in steps.
• D3.js Powered: Built using the D3.js library for robust visualization.
• TypeScript Based: Developed with TypeScript.

How to use it:

1. Install & download.

# NPM
$ npm install treespider
2. Import TreeSpider into your project.

// ES Module
import TreeSpider from 'treespider';
// Browser
<link rel="stylesheet" href="treeSpider.css" />
<script src="treeSpider.bundle.min.js"></script>

3. Create a container element where the tree chart will appear:

<div id="example"></div>

4. Prepare your data as an array of objects. Each object must include a unique id, a parentId for subordinates (except the overall head), and additional fields. For example:

const myData = [
  {id: "A1", name: "John Smith", role: "CEO", location: "New York, USA"},
  {id: "A2", parentId: "A1", name: "Alice Johnson", role: "VP of Marketing", location: "London, UK", image: "/path/to/image/"},
  {id: "A3", parentId: "A1", name: "Bob Williams", role: "VP of Engineering", location: "San Francisco, USA"},
  // ...
];

5. Initialize TreeSpider with your container and data:

const instance = new TreeSpider({
  targetContainer: '#example',
  tree_data: myData,
});

6. All available options to customize the tree chart.

dropshadow Option Details:

pallet Option Details:

const instance = new TreeSpider({
  targetContainer: '',
  width: '100%',
  height: '500px',
  placeEl: 'override',
  tree_data: undefined,
  color_range: [],
  /* default
  cellar
  goldenRod
  hSpider
  hSpiderWalk
  radialSpiderLeg
  vSpiderWalk */
  tree_type: 'default',
  chart_head_type: 'default', // 'default', 'landscape', 'rounded'
  show_tools: true,
  show_chart_head_border: false,
  animation_rotation_speed: 10,
  animation_rotation_interval: 1,
  backgroundPattern: 'default',
  backgroundSize: undefined,
  customBackground: undefined,
  backgroundPosition: undefined,
  head_linker_thumb_circle_radius: 8,
  linker_thumb_icon_color: 'bright500',
  /* symbolAsterisk
  symbolCircle
  symbolCross
  symbolDiamond
  symbolDiamond2
  symbolPlus
  symbolSquare
  symbolSquare2
  symbolStar
  symbolTriangle
  symbolTriangle2
  symbolWye
  symbolX */
  linker_thumb_shape: 'symbolCircle',
  /* symbolCircle
  symbolCross
  symbolDiamond
  symbolDiamond2
  symbolSquare
  symbolSquare2
  symbolStar
  symbolTriangle
  symbolTriangle2
  symbolWye */
  head_image_shape: 'symbolCircle',
  chart_head_bg: '#ffffff',
  auto_set_chart_head_bg: false,
  display_tree_in_step: false,
  auto_display_tree_in_step: true,
  tree_level_step: 2,
  pallet: {
    h: 10,
    s: 0.5,
    l: 0.5,
    darker: 3,
    brighter: 0.8,
    bright100: 0.5,
    dark100: 0.5,
    gray: 50,
    gray85: 85
  },
  tree_link_type: undefined,
  random_data_length: 200,
  // random_data_locale: window.navigator.language, // Suspended - the user's device's locale
  autoInitialize: true,
  zoom_in_distance: 1.5,
  zoom_out_distance: 0.5,
  verticalSpace: '120px',
  font_link: "https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap",
  font_name: "Lato",
  dropshadow: {
    x: "-50%",
    y: "-50%",
    width: "200%",
    height: "200%",
    dx: 1,
    dy: 1,
    stdDeviation: 4,
    floodColor: "rgba(91, 91, 91, 0.19)",
  }
})

7. API methods.

8. Event handlers.