Visualize Hierarchical Tree Structures Using D3.js – d3-mitch-tree

The d3-mitch-tree JavaScript library lets you render an interactive diagram from JS objects/arrays to visualize the hierarchical tree structures in an elegant way.

Built with the d3.js library and supports zoom, panning, centering, and AJAX loading.

How to use it:

Load the d3-mitch-tree’s core JavaScript and Stylesheet in the document.

<script src="dist/js/d3-mitch-tree.min.js"></script>
<link rel="stylesheet" href="dist/css/d3-mitch-tree.min.css">

Load the default theme in the document. You can also create your own themes just like the d3-mitch-tree-theme-default.css.

<link rel="stylesheet" href="dist/css/d3-mitch-tree-theme-default.min.css">

Define your tree data in the JavaScript objects/arrays as follows:

// flat data
var data = [
    {
      "id": 1,
      "name": "Animals",
      "type": "Root",
      "description": "A living organism that feeds on organic matter"
    },
    {
      "id": 2,
      "parentId": 1,
      "name": "Carnivores",
      "type": "Type",
      "description": "Diet consists solely of animal materials"
    },
    // more data here
]
// nested data
var data = {
    "id": 1,
    "name": "Animals",
    "type": "Root",
    "description": "A living organism that feeds on organic matter",
    "children": [{
        "id": 2,
        "name": "Carnivores",
        "type": "Type",
        "description": "Diet consists solely of animal materials",
        "children": [
          {
            "id": 3,
            "name": "Felidae",
            "type": "Family",
            "description": "Also known as cats",
          }]
    }]
};

Create a new d3.mitchTree object and set the data source.

var treePlugin = new d3.mitchTree.boxedTree()
    .setData(data)

Specify the container element to hold the tree structures.

var treePlugin = new d3.mitchTree.boxedTree()
    .setData(data)
    .setElement(document.getElementById("container-element"))

Initialize the d3.mitchTree.

var treePlugin = new d3.mitchTree.boxedTree()
    .setData(data)
    .setElement(document.getElementById("container-element"))
    .setIdAccessor(function(data) {
      return data.id;
    })
    .setChildrenAccessor(function(data) {
      return data.children;
    })
    .setBodyDisplayTextAccessor(function(data) {
      return data.description;
    })
    .setTitleDisplayTextAccessor(function(data) {
      return data.name;
    })
    .initialize();

Alternative Options Object Syntax, opposed to the Fluent Interface Above.

var options = {
    data: data,
    element: document.getElementById("example"),
    getId: function (data) {
      return data.id;
    },
    getChildren: function (data) {
      return data.children;
    },
    getBodyDisplayText: function (data) {
      return data.description;
    },
    getTitleDisplayText: function (data) {
      return data.name;
    }
};
var treePlugin = new d3.MitchTree.BoxedTree(options).initialize();