Decision Tree - OrgChart JS | BALKANGraph

OrgChart JS decision trees are commonly used in operations research, specifically in decision analysis, to help identify a strategy most likely to reach a goal, but are also a popular tool in machine learning. author(s): BALKAN Software Plamen Peshev

by Sajeetharan Sinnathurai

HTML

<script src="https://balkangraph.com/js/latest/OrgChart.js"></script>

<div id="tree"></div>

CSS

html, body {
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
    font-family: Helvetica;
    overflow: hidden;
}

#tree {
    width: 100%;
    height: 100%;
}
/*partial*/

[level='0'] path {
    stroke-width: 16;
}

[level='1'] path {
    stroke-width: 11;
}

[level='2'] path {
    stroke-width: 7;
}

[level='3'] path {
    stroke-width: 4;
}

[level='4'] path {
    stroke-width: 2;
}

[level='5'] path {
    stroke-width: 1;
}

.link path {
    stroke: #F57C00;
}

.link.no path {
    stroke: #FFCA28;
}

.node.yes, .node.no {
    cursor: pointer;
}

#tree {
    background-color: #f1f1f1;
    border-radius: 40px;
}

JavaScript

window.onload = function () {
    OrgChart.templates.belinda.plus = "";
    OrgChart.templates.belinda.minus = "";
    OrgChart.templates.belinda.img_0 = '<clipPath id="{randId}"><circle cx="90" cy="60" r="40"></circle></clipPath><image preserveAspectRatio="xMidYMid slice" clip-path="url(#{randId})" xlink:href="{val}" x="50" y="20" width="80" height="80" ></image>';
    OrgChart.templates.belinda.field_0 = '<text width="170" class="field_0" style="font-size: 14px;" text-anchor="middle" fill="#ffffff"  x="90" y="130">{val}</text>';
    OrgChart.templates.yes = Object.assign({}, OrgChart.templates.belinda);
    OrgChart.templates.yes.size = [60, 60];
    OrgChart.templates.yes.node = '<circle cx="30" cy="30" r="30" fill="#F57C00" stroke-width="1" stroke="#aeaeae"></circle>';
    OrgChart.templates.yes.minus = "";
    OrgChart.templates.yes.plus = "";
    OrgChart.templates.yes.rippleRadius = 15;
    OrgChart.templates.yes.field_0 = '<text class="field_0" style="font-size: 18px;" text-anchor="middle" fill="#ffffff"  x="30" y="37">{val}</text>';
    OrgChart.templates.no = Object.assign({}, OrgChart.templates.yes);
    OrgChart.templates.no.node = '<circle cx="30" cy="30" r="30" fill="#FFCA28" stroke-width="1" stroke="#aeaeae"></circle>';

    var chart = new OrgChart(document.getElementById("tree"), {
        enableSearch: false,
        template: "belinda",
        nodeMouseClick: BALKANGraph.action.expandCollapse,
        mouseScrool: BALKANGraph.action.yScroll,
        showYScroll: BALKANGraph.scroll.visible,
        nodeBinding: {
            field_0: "text",
            img_0: "img"
        },
        tags: {
            yes: {
                template: "yes"
            },
            no: {
                template: "no"
            }
        },
        collapse: {
            level: 2,
            allChildren: true,
        },
        onClick: function (sender, data) {
            return data.text == "YES" || data.text == "NO";
        },
       ...