Dendogram

data
L0 L1 L2 L3 L4
x a a1
x a a2 a2a
x a a3
x b b1 b1a b1a1
x c c1
x c c2 c2a
x c c3

x d


script
#dataTable and ta (text area) are script parameters

#settings
delim = ","
cr = "\n"

#get list of filtered rows
rows = Document.ActiveFilteringSelectionReference.GetSelection(dataTable).AsIndexSet()

#generate tree
html = "<div class='tree'>"+cr # rendering text
r=0 # row #
l=0 # level
ll=0 # previous level
D=-1 # delta level change 
cc=[""]*(dataTable.Columns.Count+1) # previous level value


for row in rows:
c=0
for column in dataTable.Columns:
#get a cell value
v =  column.RowValues.GetFormattedValue(row) 
v = v if v!="(Empty)"  else ""

#is a node
isNode=v<>""

# record previous level and previous level value
if(isNode):
l=c+1

#calculate delta between levels
isBranch =v<>cc[l]
D=l-ll

if isBranch:

#construct text
if D>0 : html +=  "<ul>" * D + "<li><a>"+v+"</a>"+cr
if D<0 : html += "</ul>" * abs(D) + "<li><a>"+v+"</a>"+cr
if D==0 : html += "       <li><a>"+v+"</a></li</ul>"+cr


#record previous level and previous column value
ll=l
cc[l]=v

#increment col index
c+=1

#new row
#increment row index
r=0
#print cr + html + "</ul></div>"


#render results to a target textArea
from Spotfire.Dxp.Application.Visuals import HtmlTextArea
vis = ta.As[HtmlTextArea]()
vis.HtmlContent = html 

javascript (optional to make nodes collapsible)
//place this in the target textarea

$(function () {
    $('.tree li').hide();
    $('.tree li:first').show();
    $('.tree li').on('click', function (e) {
        var children = $(this).find('> ul > li');
        if (children.is(":visible")) children.hide('fast');
        else children.show('fast');
        e.stopPropagation();
    });

});


css (horizontal) 
/*Place this style in a different text area other than the target text area*/

<style>
* {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 {
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;
}

.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;
}

.tree li:only-child::after, .tree li:only-child::before {
display: none;
}

.tree li:only-child{ padding-top: 0;}

right connector from last child*/
.tree li:first-child::before, .tree li:last-child::after{
border: 0 none;
}

.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;
}


.down-connector {
  position: absolute; top: -100; left: 50%;
border-left: 1px solid #ccc;
width: 0; 
  height: 20px;
}

.connector{
  position: absolute; 
  left: 50%;
border-left: 1px solid #ccc;
width: 0; 
  height: 20px;
}

.tree li a{
border: 1px solid #ccc;
padding: 5px 10px;
text-decoration: none;
color: #666;
font-family: arial, verdana, tahoma;
font-size: 11px;
display: inline-block;

border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;

transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}

.tree li a:hover, .tree li a:hover + ul li a {
background: #c8e4f8; color: #000; border: 1px solid #94a0b4;
}

.tree li a:hover+ul li::after, 
.tree li a:hover+ul li::before, 
.tree li a:hover+ul::before, 
.tree li a:hover+ul ul::before{
border-color:  #94a0b4;
}

/*Time for some hover effects*/
/*We will apply the hover the the lineage of the element also*/
.tree li a:hover, .tree li a:hover + ul li a {
background: #c8e4f8; color: #000; border: 1px solid #94a0b4;
}

.tree li a:hover, .tree li a:hover + ul li a {
background: #c8e4f8; color: #000; border: 1px solid #94a0b4;
}

.tree li a:hover+div+ul li::after, 
.tree li a:hover+div+ul li::before, 
.tree li a:hover+div+ul::before, 
.tree li a:hover+div+ul ul::before{
border-color:  #94a0b4;
}


.tree li a:hover, .tree li a:hover + div+ ul li a {
background: #c8e4f8; color: #000; border: 1px solid #94a0b4;
}
</style>


css vertical (one or the other)
<style>
.tree li {
    margin: 0px 0;
    list-style-type: none;
    position: relative;
    padding: 20px 5px 0px 5px;
}
.tree li::before {
    content:'';
    position: absolute;
    top: 0;
    width: 1px;
    height: 100%;
    right: auto;
    left: -20px;
    border-left: 1px solid #ccc;
    bottom: 50px;
}
.tree li::after {
    content:'';
    position: absolute;
    top: 30px;
    width: 25px;
    height: 20px;
    right: auto;
    left: -20px;
    border-top: 1px solid #ccc;
}
.tree li a {
    display: inline-block;
    border: 1px solid #ccc;
    padding: 5px 10px;
    text-decoration: none;
    color: #666;
    font-family: arial, verdana, tahoma;
    font-size: 11px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}
 .tree > ul > li::before, .tree > ul > li::after {
    border: 0;
}
 .tree li:last-child::before {
    height: 30px;
}

 .tree li a:hover, .tree li a:hover+ul li a {
    background: #c8e4f8;
    color: #000;
    border: 1px solid #94a0b4;
}
 .tree li a:hover+ul li::after, .tree li a:hover+ul li::before, .tree li a:hover+ul::before, .tree li a:hover+ul ul::before {
    border-color: #94a0b4;
}

</style>