a treemap prototype where the
is used to scale the color on an orange to lightgray colorscale.
the size variable is double-encoded as cell area and cell color.
I extend d3.layout.treemap
to calculate the maxArea across a set of sibling nodes and call the extended layout d3.layout.treemap2
the sort property of the treemap2 layout positions the largest area cell in the top-right of the group.
.sort(function(a, b){ return a.value - b.value })
an iteration on http://mbostock.github.io/d3/talk/20111018/treemap.html
and this StackOverflow Answer
forked from micahstubbs's block: treemap2
xxxxxxxxxx
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<link type="text/css" rel="stylesheet" href="style.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<script src="d3.layout.treemap2.js" type="text/javascript"></script>
<style type="text/css">
.chart {
display: block;
margin: auto;
margin-top: 40px;
}
text {
font-size: 11px;
}
rect {
fill: none;
}
</style>
</head>
<body>
<div id="body">
<div id="footer">
d3.layout.treemap2
<div class="hint">click or option-click to descend or ascend</div>
<div><select>
<option value="size">Size</option>
<option value="count">Count</option>
</select></div>
</div>
</div>
<script type="text/javascript">
// an iteration on
// https://mbostock.github.io/d3/talk/20111018/treemap.html
var w = 1280 - 80,
h = 800 - 180,
x = d3.scale.linear().range([0, w]),
y = d3.scale.linear().range([0, h]),
root,
node,
maxArea;
// ************************************************
var materialOrange = "#FC582F"
// https://stackoverflow.com/questions/21734017/d3-js-how-to-decide-both-the-area-and-the-color-of-each-square-by-the-size-of-e
var colorLinearScale = d3.scale.linear()
.range([0,1]);
// wait to set the domain until we know
// the maxArea for the current child node
// and it's siblings
//colors can be specified as any CSS color string
var colorInterpolator = d3.interpolateHsl("lightgray", materialOrange);
// ************************************************
var treemap = d3.layout.treemap2()
.round(false)
.size([w, h])
.sticky(true)
.sort(function(a, b){ return a.value - b.value })
.value(function(d) { return d.size; });
var svg = d3.select("#body").append("div")
.attr("class", "chart")
.style("width", w + "px")
.style("height", h + "px")
.append("svg:svg")
.attr("width", w)
.attr("height", h)
.append("svg:g")
.attr("transform", "translate(.5,.5)");
d3.json("flare.json", function(data) {
node = root = data;
var nodes = treemap.nodes(root)
.filter(function(d) { return !d.children; });
var cell = svg.selectAll("g")
.data(nodes)
.enter().append("svg:g")
.attr("class", "cell")
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
.on("click", function(d) { return zoom(node == d.parent ? root : d.parent); });
cell.append("svg:rect")
.attr("width", function(d) { return d.dx - 1; })
.attr("height", function(d) { return d.dy - 1; })
.style("fill", function(d) {
colorLinearScale.domain([0, d.maxArea]);
return colorInterpolator(colorLinearScale(d.area));
});
cell.append("svg:text")
.attr("x", function(d) { return d.dx / 2; })
.attr("y", function(d) { return d.dy / 2; })
.attr("dy", ".35em")
.attr("text-anchor", "middle")
.text(function(d) { return d.name; })
.style("opacity", function(d) { d.w = this.getComputedTextLength(); return d.dx > d.w ? 1 : 0; });
d3.select(window).on("click", function() { zoom(root); });
d3.select("select").on("change", function() {
treemap.value(this.value == "size" ? size : count).nodes(root);
zoom(node);
});
});
function size(d) {
return d.size;
}
function count(d) {
return 1;
}
function zoom(d) {
var kx = w / d.dx, ky = h / d.dy;
x.domain([d.x, d.x + d.dx]);
y.domain([d.y, d.y + d.dy]);
var t = svg.selectAll("g.cell").transition()
.duration(d3.event.altKey ? 7500 : 750)
.attr("transform", function(d) { return "translate(" + x(d.x) + "," + y(d.y) + ")"; });
t.select("rect")
.attr("width", function(d) { return kx * d.dx - 1; })
.attr("height", function(d) { return ky * d.dy - 1; })
t.select("text")
.attr("x", function(d) { return kx * d.dx / 2; })
.attr("y", function(d) { return ky * d.dy / 2; })
.style("opacity", function(d) { return kx * d.dx > d.w ? 1 : 0; });
node = d;
d3.event.stopPropagation();
}
</script>
</body>
</html>
https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js