Edit in JSFiddle

var root = {
    "name": "Renewables",
        "children": [{
        "name": "Wind",
            "children": [{
            "name": "Onshore wind",
                "size": 362.8256,
                "new": 5523.35308958831

        }, {
            "name": "Offshore wind",
                "size": 8.7646,
                "new": 2902.3152601205

        }]
    }, {
        "name": "Water",
            "children": [{
            "name": "Tidal",
                "size": 0.5338,
                "new": 23.3110107839216

        }, {
            "name": "Hydroelectric",
                "size": 1143.439567215,
                "new": 1143.439567215

        }, {
            "name": "Wave",
                "size": 0.0,
                "new": 292.082153497401
        }]
    }, {
        "name": "Geothermal Electricity",
            "size": 12.5859000000058,
            "new": 99.6342000000038
    }, {
        "name": "Solar",
            "children": [{
            "name": "Photovoltaic",
                "children": [{
                "name": "Rooftop PV",
                    "children": [{
                    "name": "Commercial/Gov rooftop PV",
                        "size": 59.48898499,
                        "new": 4183.037518
                }, {
                    "name": "Residential rooftop PV",
                        "size": 39.78914233,
                        "new": 4538.086158
                }]
            }, {
                "name": "Utility PV",
                    "size": 74.09941968,
                    "new": 11398.12543
            }]
        }, {
            "name": "Concentrated Solar power",
                "size": 5.68159,
                "new": 779.3799997
        }]
    }]
}





var margin = {
    top: 40,
    right: 10,
    bottom: 10,
    left: 10
},
width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var color = d3.scale.category20c();

var treemap = d3.layout.treemap()
    .size([width, height])
    .sticky(true)
    .value(function (d) {
    return d.size;
});

var div = d3.select("body").append("div")
    .style("position", "relative")
    .style("width", (width + margin.left + margin.right) + "px")
    .style("height", (height + margin.top + margin.bottom) + "px")
    .style("left", margin.left + "px")
    .style("top", margin.top + "px");

var node = div.datum(root).selectAll(".node")
    .data(treemap.nodes)
    .enter().append("div")
    .attr("class", "node")
    .call(position)
    .style("background", function (d) {
    return d.children ? color(d.name) : null;
})
    .text(function (d) {
    return d.children ? null : d.name;
});

d3.selectAll("input").on("change", function change() {
    var value = this.value === "2050" ? function (d) {
            return d.new;
        } : function (d) {
            return d.size;
        };

    node.data(treemap.value(value).nodes)
        .transition()
        .duration(1500)
        .call(position);
});

function position() {
    this.style("left", function (d) {
        return d.x + "px";
    })
        .style("top", function (d) {
        return d.y + "px";
    })
        .style("width", function (d) {
        return Math.max(0, d.dx - 1) + "px";
    })
        .style("height", function (d) {
        return Math.max(0, d.dy - 1) + "px";
    });
}
<title>Types of Renewables</title>
<h1>Hierarchy of Renewables</h1>

<aside>Click button to toggle between installed 2014 and proposed 2050 renewable energy capacity.</aside>
<form>
    <label>
        <input type="radio" name="mode" value="2014" checked>2014 Distribution</label>
    <label>
        <input type="radio" name="mode" value="2050">2050 Distribution</label>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
body {
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
    margin: auto;
    position: relative;
    width: 960px
}
form {
    position: absolute;
    right: 10px;
    top: 10px;
}
.node {
    border: solid 1px white;
    font: 10px sans-serif;
    line-height: 12px;
    overflow: hidden;
    position: absolute;
    text-indent: 2px;
}