JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/lagodiuk/decision-tree-js/master/decision-tree-min.js"></script>
<div class="tree" id="displayTree"></div>

CSS

/*
 Transforming nested lists to pretty tree
 
 <div class="tree">
    <ul>
        <li>
            <ul>
            ...
            </ul>
        </li>
        ...
    </ul>
 </div>
 
Source: http://thecodeplayer.com/walkthrough/css3-family-tree

Some other advices about displaying trees: http://stackoverflow.com/questions/1695115/how-do-i-draw-the-lines-of-a-family-tree-using-html-css
*/

* {
    margin: 0;
    padding: 0;
}

.tree ul {
	padding-top: 20px;
    position: relative;
	
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
}

.tree li {
    white-space: nowrap;
	float: left;
    text-align: center;
	list-style-type: none;
	position: relative;
	padding: 20px 5px 0 5px;
	
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
}

/*We will use ::before and ::after to draw the connectors*/

.tree li::before, .tree li::after{
	content: '';
	position: absolute;
    top: 0;
    right: 50%;
	border-top: 1px solid #ccc;
	width: 50%;
    height: 20px;
}
.tree li::after{
	right: auto;
    left: 50%;
	border-left: 1px solid #ccc;
}

/*We need to remove left-right connectors from elements without
 any siblings*/
.tree li:only-child::after, .tree li:only-child::before {
	display: none;
}

/*Remove space from the top of single children*/
.tree li:only-child{
    padding-top: 0;
}

/*Remove left connector from first child and
 right connector from last child*/
.tree li:first-child::before, .tree li:last-child::after{
	border: 0 none;
}
/*Adding back the vertical connector to the last nodes*/
.tree li:last-child::before{
	border-right: 1px solid #ccc;
	border-radius: 0 5px 0 0;
	-webkit-border-radius: 0 5px 0 0;
	-moz-border-radius: 0 5px 0 0;
}
.tree li:first-child::after{
	border-radius: 5px 0 0 0;
	-webkit-border-radius: 5px 0 0 0;
	-moz-border-radius: 5px 0 0 0;
}

/*Time to add downward connectors from parents*/
.tree ul ul::before{
	content: '';
	position: absolute;
    top: 0;
    left:...

JavaScript

// Training set
var data = 
    [{x1: '1', x2: '1', x3: '1', x4: '0', x5: '0', label: 1},
     {x1: '0', x2: '0', x3: '0', x4: '1', x5: '1', label: 2},
     {x1: '0', x2: '0', x3: '0', x4: '1', x5: '0', label: 3},
     {x1: '0', x2: '0', x3: '0', x4: '0', x5: '1', label: 4},
     {x1: '0', x2: '0', x3: '0', x4: '0', x5: '0', label: 5}];

// Configuration
var config = {
    trainingSet: data, 
    categoryAttr: 'label', 
};

// Building Decision Tree
var decisionTree = new dt.DecisionTree(config);

// Displaying Decision Tree
document.getElementById('displayTree').innerHTML = treeToHtml(decisionTree.root);


// Recursive (DFS) function for displaying inner structure of decision tree
function treeToHtml(tree) {
    // only leafs containing category
    if (tree.category) {
        return  ['<ul>',
                    '<li>',
                        '<a href="#">',
                            '<b>', tree.category, '</b>',
                        '</a>',
                    '</li>',
                 '</ul>'].join('');
    }
    
    return  ['<ul>',
                '<li>',
                    '<a href="#">',
                        '<b>', tree.attribute, ' ', tree.predicateName, ' ', tree.pivot, ' ?</b>',
                    '</a>',
                    '<ul>',
                        '<li>',
                            '<a href="#">yes</a>',
                            treeToHtml(tree.match),
                        '</li>',
                        '<li>', 
                            '<a href="#">no</a>',
                            treeToHtml(tree.notMatch),
                        '</li>',
                    '</ul>',
                '</li>',
             '</ul>'].join('');
}