D3.js TreeLayout with Boxes

D3.js with Rectangles appended as well as text. Using nodeSize, we can specify how big the rectangles are and make the TreeLayout separate accordingly.

HTML

<div id="body"></div>

CSS

.node {
    cursor: pointer;
}
.node circle {
    fill: #fff;
    stroke: steelblue;
    stroke-width: 1.5px;
}
.node text {
    font: 10px sans-serif;
}
.link {
    fill: none;
    stroke: #ccc;
    stroke-width: 1.5px;
}

body {
    overflow: hidden;
}

JavaScript

var margin = {
    top: 20,
    right: 120,
    bottom: 20,
    left: 120
},
width = 960 - margin.right - margin.left,
height = 800 - margin.top - margin.bottom;

var root = {

    "name": "Total claims",
        "children": [{
                "name": "January 2015",
                "children": [{
                        "name": "MOTOR CYCLE",
                        "children": [{
                            "name": "Hiring"
                           
                        }, {
                            "name": "Private"
                            
                        }, {
                            "name": "Rent"
                            
                        }]
                    }, {
                        "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":...