Tree Chart - D3js

Foldable D3js tree chart.

by Sajeetharan Sinnathurai

HTML

<div id=tree></div>

CSS

html{
    font: 10px sans-serif;
}

svg{
    border: 1px solid silver;
}

.node{
    cursor: pointer;
}

.node circle{
    stroke: steelblue;
    stroke-width: 1.5px;
}

.link{
    fill: none;
    stroke: lightgray;
    stroke-width: 1.5px;
}

JavaScript

var json = 
{
     

    "name": "Total claims",
        "children": [{
                "name": "January 2015",
                "children": [{
                        "name": "MOTOR CYCLE",
                        "children": [{
                            "name": "Hiring",
                           
                        }, {
                            "name": "Private",
                            
                        }, {
                            "name": "Rent",
                            "size": 0
                        }]
                    }, {
                        "name": "MOTOR CAR",
                        "children": [{
                            "name": "Hiring" 
                            
                        }, {
                            "name": "Private" 
                           
                        }, {
                            "name": "Rent" 
                            
                        }]
                    }, {
                        "name": "THREE WHEELER",
                        "children": [{
                            "name": "Hiring" 
                           
                        }, {
                            "name": "Private" 
                        }, {
                            "name": "Rent" 
                        }]
                    }, {
                        "name": "DOUBLE CAB",
                        "children": [{
                            "name": "Hiring" 
                        }, {
                            "name": "Private" 
                        }, {
                            "name": "Rent" 
                        }]
                    }, {
                        "name": "BACHOE",                        
                        "children": [{
                            "name": "Hiring" 
                        }, {
                            "name": "Agricultural usage",
                             
                        }, {
                 ...