Old school D3 from simpler times

All examples By author By category About

ggwp-1994

Full window Github gist

TreeMap trial

Built with blockbuilder.org

<!DOCTYPE html>
<html>
<meta charset="utf-8">

<head>
<title> Dota FTW</title>
</head>

<body>
<script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
<script>

// Define margins
var margin = {top: 40, right: 20, bottom: 60, left: 90},
    width = 560 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var color = d3.scale.category20();

var div = d3.select("body").append("div").style("position","relative");

var treemap = d3.layout.treemap()
				.size([width,height])
				.value(function(d)
				{
					return d.size;
				});
				
			d3.json("dotaData.json", function(data) 
			{
				
				var node = div.datum(data).selectAll(".node")
							.data(treemap.nodes)
							.enter()
							.append("div")
							.attr("class","node")
							.style("position","absolute")
							.style("left", function(d) { return d.x + "px"; })
							.style("top", function(d) { return d.y + "px"; })
							.style("width", function(d) { return d.dx - 3 + "px"; })
							.style("height", function(d) { return d.dy - 3 + "px"; })
							.style("background-color", function(d)
							{
								return color(d.name); 
							})
							.on("mouseover",function(d)
							{
		
								div.append("text")
								.attr("id","tip")
								.attr("x",470)
								.attr("y",50)
								.attr("fill","red")
								.attr("font-size","20px")
								.text(d.name+", "+d.value);
		
								d3.select(this)	.attr("fill","red");
		
								})
	  
								.on("mouseout",function(d)
								{
									d3.select("#tip").remove();
								})
							
							
							.append('div')
							.text(function(d) { return d.name; })
							.style("font-size", "15px");
							
			});

</script>

</body>

</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js