How to visualize a Decision Tree using JointJS+?

A decision tree is a special tree graph representation of an algorithm. The main goal of such a representation is to create a model of decisions and their possible consequences, including chance event outcomes, resource costs, and utility. You can display any algorithm which uses only conditional statements using decision trees.

In a decision tree each node represents a conditional statement on an attribute (e.g. the result of a coin flip or other event outcome), each branch represents the outcome of the event, and each leaf node represents a decision which should be taken in the case of each event resolution. The paths from root to leaf represent the rules by which the algorithm should process the input data.

The JointJS+ library makes it possible to build a comprehensive representation of a decision tree. Using our plugins and tools you can visually differentiate node types (such as making end-nodes different), highlight the link based on the value and even make a detailed subgraph of a particular node. The decision tree demo application is implementing several techniques, such as defining your own Link type or making new shapes to represent decision tree nodes. The decision tree application above is written using JavaScript, but can be easily integrated using TypeScript or a wide range of web application frameworks such as React, Angular, Vue or Svelte.

Integration 

Are you using TypeScript and want to use JointJS+ with it? You can build a decision tree application using TypeScript or the framework of your choice. We support React, Vue, Angular or Svelte. JointJS+ is a framework-agnostic JavaScript library which allows possible integration with any stack or frameworks. We can assure that integrating JointJS+ into your workflow would be as smooth as possible.

TypeScript Decision Tree

Do you like using TypeScript? We are providing types for all JointJS and JointJS+ entities and you can easily make your own links and shapes using TypeScript inheritance powers. While our decision tree demo is currently written in plain JavaScript, it can be easily updated to TypeScript in terms of minutes, ensuring type safety and increased code readability and resilience. You can read more about ways to create custom shapes as the node shape in the tutorial here.

React Decision Tree

React is known for its flexible component-based architecture and powerful rendering and integrating JointJS+ is fantastically simple. To properly implement a decision tree demo in React for example you can incorporate the node and edge cells declaration into the React app. You will need to describe new shapes and links and then incorporate them into the app. Here is what part of such an app can look like:

-- CODE language-js --
import { useEffect } from 'react';
import { dia } from '@clientio/rappid';

class Node extends dia.Element {
    defaults() {
        return {
            ...super.defaults,
            type: "Node",
            //...
        };
    }
    //...
}

const DecisionTreeApp = () => {
    const paperContainer = useRef(null);
    //...
    useEffect(() => {
        const cellNamespace = {
            Node,
            //...
        }

        const graph = new dia.Graph({}, { cellNamespace });
        const paper = new dia.Paper({
            model: graph,
            cellViewNamespace: cellNamespace,
            //...
        });
        paperContainer.current.appendChild(paper.el);

        //...
        return () => {
            paper.remove();
        };
    }, []);
    //...
    return (
        <div className="paperContainer" ref={paperContainer}/>
    );
}

🔗 Interested in a step-by-step guide on how to integrate JointJS+ with your React application? Follow our tutorial on React and JointJS+ integration. For more examples, check out our Github repository.

Vue Decision Tree

Vue also is a very flexible and powerful framework which integrates greatly with JointJS+. By using Vue's declarative syntax and component-based approach, developers can easily build decision tree applications using Vue. Such integration allows developers to create highly interactive and convenient interfaces, allowing users to visualize and look at complex algorithms in a simple way by the means of decision trees. Here is a small example of a custom shape declaration (such as a node in a decision tree) using Vue and JointJS+:

-- CODE language-js --
<template>
    <div id="decision-tree-app" ref="paperContainer"></div>
</template>

<script lang="ts">
import { Options, Vue } from 'vue-class-component';
import { dia } from '@clientio/rappid';

class Node extends dia.Element {
    defaults() {
        return {
            ...super.defaults,
            type: "Node",
            //...
        };
    }
    //...
}

@Options({})
export default class DecisionTreeApp extends Vue {
    declare public $refs: {
        paperContainer: HTMLDivElement;
    }

    private graph: dia.Graph;
    private paper: dia.Paper;
    private cellNamespace = {
        Node,
        //...
    }

    //...
    public created(): void {
        const graph = this.graph = new dia.Graph({}, { cellNamespace: this.cellNamespace });

        const paper = this.paper = new dia.Paper({
            model: graph,
            cellViewNamespace: this.cellNamespace,
            //...
        });
    }

    public mounted(): void {
        const { paper, $refs : { paperContainer } } = this;
        paperContainer.appendChild(paper.el);
    }
‍
}
</script>

🔗 Interested in a step-by-step guide on how to integrate JointJS+ with your Vue application? Follow our tutorial on Vue and JointJS+ integration. For more examples, check out our Github repository.

Angular Decision Tree

Angular, with its powerful components hierarchy provides the best possibilities for integrating JointJS+ into your application. Using Angular you can specify new custom shapes and links to represent nodes and edges. Here is the example of how you can define an Angular app which will use our custom edge and node cells:

-- CODE language-js --
import { Component, OnInit, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
import { dia } from '@clientio/rappid';

class Node extends dia.Element {
    defaults() {
        return {
            ...super.defaults,
            type: "Node",
            //...
        };
    }
    //...
}

@Component({
    selector: 'app-root',
    templateUrl: './decision-tree.component.html',
    styleUrls: ['./decision-tree.component.scss']
})

export class DecisionTreeApp implements OnInit, AfterViewInit {
    @ViewChild('paperContainer') paperContainer: ElementRef;
    private cellNamespace = {
        Node,
        //...
    }
    private graph: dia.Graph;
    private paper: dia.Paper;
    //...
    ngOnInit() {
        const graph = this.graph = new dia.Graph({}, { cellNamespace: this.cellNamespace });

        this.paper = new dia.Paper({
            model: graph,
            cellViewNamespace: this.cellNamespace,
            //...
        });
        //...
    }

    ngAfterViewInit(): void {
        const { paper, paperContainer } = this;
        paperContainer.nativeElement.appendChild(paper.el)
    }
    //...
}

🔗 Interested in a step-by-step guide on how to integrate JointJS+ into your Angular application? Follow our tutorial on Angular and JointJS+ integration. For more examples, check out our Github repository.‍

Svelte Decision Tree

In addition, JointJS+ nicely integrates with Svelte, famous for its revolutionary compiler-based approach. With this approach, Svelte produces efficiently optimized code, helping developers to build powerful web applications. Using functionality of our JointJS+ library you can easily create decision tree applications. Here is an example on how you can specify custom shape for node representation in a tree using Svelte and JointJS+:

-- CODE language-js --
<script lang="ts">
    import { onMount } from 'svelte';
    import { dia } from '@clientio/rappid';
    import '../node_modules/@clientio/rappid/rappid.css';

    let ref;

    class Node extends dia.Element {
        defaults() {
            return {
                ...super.defaults,
                type: "Node",
                //...
            };
        }
        //...
    }

    onMount(() => {
        const cellNamespace = {
            Node,
            //...
        }

        const graph = new dia.Graph({}, { cellNamespace });
        const paper = new dia.Paper({
            model: graph,
            cellViewNamespace: cellNamespace,
            //...
        });

        ref.appendChild(paper.el)
    });
</script>

<main bind:this={ref} class="decision-tree-app"></main>

🔗 Interested in a step-by-step guide on how to integrate JointJS+ into your Svelte application? Follow our tutorial on Svelte and JointJS+ integration. For more examples, check out our Github repository.

Salesforce Lightning Tree Graph

As a standalone JavaScript library, JointJS+ allows easy integration with multiple JavaScript frameworks including Salesforce Lightning. Using JointJS+ you can build flexible decision tree applications in your Salesforce Lightning environment.

🔗 Interested in a step-by-step guide on how to integrate JointJS+ into your Lightning application? Follow our tutorial on Lightning and JointJS+ integration.

Ready to take the next step?

Modern development is not about building everything from scratch. The JointJS team equips you with plenty of ready-to-use features and demo apps that can serve as a boilerplate and radically reduce your development time. Start a free 30-day JointJS+ trial to check their source code and develop your next application with ease and confidence.