Tree Map

Tree Map

by Sajeetharan Sinnathurai

HTML

<div id="graph"></div>

CSS

body {
    font: 10px sans-serif;
}
.link {
    fill: none;
    stroke: #000;
}
.sibling {
    fill: none;
    stroke: blue;
}
.border {
    fill: none;
    shape-rendering: crispEdges;
    stroke: #aaa;
}
.node {
    stroke: red;
    fill:white;
}

JavaScript

var margin = {
    top: 10,
    right: 10,
    bottom: 10,
    left: 10
},
width = 840,
    height = 600;
var kx = function (d) {
    return d.x - 20;
};
var ky = function (d) {
    return d.y - 10;
};
//thie place the text x axis adjust this to center align the text
var tx = function (d) {
    return d.x - 3;
};
//thie place the text y axis adjust this to center align the text
var ty = function (d) {
    return d.y + 3;
};
//make an SVG
var svg = d3.select("#graph").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");


//My JSON note the 
//no_parent: true this ensures that the node will not be linked to its parent
//hidden: true ensures that the nodes is not visible.
var root = {
    name: "",
    id: 1,
    hidden: true,
    children: [ {
            name: "Q",
            id: 16,
            no_parent: true
        },{
        name: "",
        id: 2,
        no_parent: true,
        hidden: true,
        children: [{
            name: "J",
            id: 12,

        }, {
            name: "L",
            id: 13,
            no_parent: true
        }, {
            name: "C",
            id: 3
        }, {
            name: "",
            id: 4,
            hidden: true,
            no_parent: true,
            children: [{
                name: "D",
                id: 5,
            }, {
                name: "",
                id: 14,
                hidden: true,
                no_parent: true,
                children: [{
                    name: "P",
                    id: 15,
                }]
            }, {
                name: "E",
                id: 6,
            }]
        }, {
            name: "K",
            id: 11
        }, {
            name: "G",
            id: 7,
            children: [{
                name: "H",
                id: 8,
            }, {
      ...