kirantemojo/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
	<title>Dsnap - Charts</title>
    <style>
    body {
          margin: auto;
          position: relative;
        }

        .node {
          border: solid 1px white;
          font: 14px sans-serif;
          line-height: 12px;
          overflow: hidden;
          position: absolute;
          text-indent: 2px;
          font-weight: bold;
          color:#fff;
        }
    </style>
</head>
<body>
	<div id="wrapper">

	</div>
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<script>
		var root = {
                 "name": "HMM",
                 "children": [
                  {
                   "name": "Alcohal Abuse",
                   "children": [
                    {
                     "name": "cluster",
                     "children": [
                      {"name": "Liver Disease", "size": 3938},
                      {"name": "Obesity", "size": 3812},
                      {"name": "Neurologic", "size": 6714},
                      {"name": "Heart", "size": 743}
                     ]
                    },
                    {
                     "name": "graph",
                     "children": [
                      {"name": "Paralysis", "size": 3534},
                      {"name": "Asthma ", "size": 5731},
                      {"name": "Periculas", "size": 7840},
                      {"name": "Anaemia", "size": 5914},
                      {"name": "Peptic Alcer", "size": 3416}
                     ]
                    },
                    {
                     "name": "graph",
                     "children": [
                      {"name": "Paralysis", "size": 3534},
                      {"name": "Asthma ", "size": 5731},
                      {"name": "Periculas", "size": 7840},
                      {"name": "Anaemia", "size": 5914},
                      {"name": "Peptic Alcer", "size": 3416}
                     ]
                    }
                    ]
                  }]
                };

        var margin = {top: 0, right: 10, bottom: 20, left: 10},
                      width = 960 - margin.left - margin.right,
                      height = 400 - margin.top - margin.bottom;

        //var color = d3.scale.category10();
        color = d3.scale.linear().domain([0,15]).range(['hsla(195, 100%, 50%, 1)','hsla(195, 100%, 31%, 1)']);

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

        var div = d3.select("#wrapper").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,i) { return d.children ? color(i) : null; })
              .text(function(d) { return d.children ? null : d.name; });

            node
                .data(treemap.value(function(d) { return d.size; }).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"; });
            }

        d3.selectAll('.node').on('mouseover',function(){
          d3.select(this).style('box-shadow','3px 0px 30px #fff');
        });
        d3.selectAll('.node').on('mouseout',function(){
          d3.select(this).style('box-shadow','none');
        });
	</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Dsnap - Charts</title>
	<style>
	body {
	margin: auto;
	position: relative;
	}

	.node {
	border: solid 1px white;
	font: 14px sans-serif;
	line-height: 12px;
	overflow: hidden;
	position: absolute;
	text-indent: 2px;
	font-weight: bold;
	color:#fff;
	}
	</style>
	</head>
	<body>
	<div id="wrapper">

	</div>
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<script>
	var root = {
	"name": "HMM",
	"children": [
	{
	"name": "Alcohal Abuse",
	"children": [
	{
	"name": "cluster",
	"children": [
	{"name": "Liver Disease", "size": 3938},
	{"name": "Obesity", "size": 3812},
	{"name": "Neurologic", "size": 6714},
	{"name": "Heart", "size": 743}
	]
	},
	{
	"name": "graph",
	"children": [
	{"name": "Paralysis", "size": 3534},
	{"name": "Asthma ", "size": 5731},
	{"name": "Periculas", "size": 7840},
	{"name": "Anaemia", "size": 5914},
	{"name": "Peptic Alcer", "size": 3416}
	]
	},
	{
	"name": "graph",
	"children": [
	{"name": "Paralysis", "size": 3534},
	{"name": "Asthma ", "size": 5731},
	{"name": "Periculas", "size": 7840},
	{"name": "Anaemia", "size": 5914},
	{"name": "Peptic Alcer", "size": 3416}
	]
	}
	]
	}]
	};

	var margin = {top: 0, right: 10, bottom: 20, left: 10},
	width = 960 - margin.left - margin.right,
	height = 400 - margin.top - margin.bottom;

	//var color = d3.scale.category10();
	color = d3.scale.linear().domain([0,15]).range(['hsla(195, 100%, 50%, 1)','hsla(195, 100%, 31%, 1)']);

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

	var div = d3.select("#wrapper").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,i) { return d.children ? color(i) : null; })
	.text(function(d) { return d.children ? null : d.name; });

	node
	.data(treemap.value(function(d) { return d.size; }).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"; });
	}

	d3.selectAll('.node').on('mouseover',function(){
	d3.select(this).style('box-shadow','3px 0px 30px #fff');
	});
	d3.selectAll('.node').on('mouseout',function(){
	d3.select(this).style('box-shadow','none');
	});
	</script>
	</body>
	</html>