Skip to content

Instantly share code, notes, and snippets.

@Rnhatch

Rnhatch/Service Treemap

Created February 13, 2012 21:19
Show Gist options
  • Save Rnhatch/1820583 to your computer and use it in GitHub Desktop.
Save Rnhatch/1820583 to your computer and use it in GitHub Desktop.
Download ZIP
Working Treemap
Raw
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Treemap</title>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js"></script>
<style type="text/css">
body {
font: 12px sans-serif;
}
svg {
shape-rendering: crispEdges;
}
#stackedbudget-chart line {
stroke: #000;
}
.rule line {
stroke: #eee;
}
#histogram-trellis-chart rect {
fill: darkblue;
stroke: white;
}
#histogram-trellis-chart line {
stroke: black;
}
#treemap-transition .cell {
border: solid 1px grey;
font: 16px;
color:black;
line-height: 12px;
overflow: hidden;
position: absolute;
text-indent: 2px;
text-align: center;
vertical-align: middle;
}
table {
border-collapse: collapse;
border: 2px solid #FFFAFA;
}
td {
padding: 10px;
}
</style>
</head>
<body>
<h3><a name="s9">Basic Treemap - iServices Activity and Performance</a></h3>
<br/>
<div class='gallery' id='treemap-transition'>
<button class='first active' id='evotes'>
Error Rate
</button><button class='last' id='pop'>
Context
</button><p />
</div>
<script type="text/javascript">
d3.json("service-json.txt", function(json) {
var w = 960,
h = 600,
// color = d3.interpolateRgb("rgb(0,255,0)", "rgb(255,0,0)");
// color = d3.interpolateHsl("hsl(2,50%, 50%)", "hsl(70,50%, 50%)");
color = d3.scale.linear()
// .domain([0, d3.max([json], function(d) { return d.roc2; })])
.domain([0,0.05])
.range(["rgb(255,255,255)", "rgb(255,50,50)"]).interpolate(d3.interpolateRgb);
x = d3.scale.linear().domain([-26,13]).range([0, 1]),
stepsize = [2.46, 1.66],
minval = [-16.28, -16.67];
var treemap = d3.layout.treemap()
.size([w, h])
.sticky(true)
.value(function(d) { return d.roc2; });
var div = d3.select("#treemap-transition").append("div")
.style("position", "relative")
.style("width", w + "px")
.style("height", h + "px");
//initial display
div.data([json]).selectAll("div")
.data(treemap.nodes)
.enter().append("div")
.attr("class", "cell")
.style("background", function(d) { return color(d.roc2); })
// .style("background", function(d) { return treemap_color(d.roc2, 2.5, 10); })
.call(cell)
.attr("text-anchor", "middle")
.text(function(d) { return d.children ? null : d.name; });
//display on click evotes (error rate)
d3.select("#evotes").on("click", function() {
div.selectAll("div")
.data(treemap.value(function(d) { return d.pop100k; }))
.style("background", function(d) { return color(d.roc2); })
.transition()
.duration(1500)
.call(cell);
d3.select("#evotes").classed("active", true);
d3.select("#pop").classed("active", false);
});
//Display on click pop (context)
d3.select("#pop").on("click", function() {
div.selectAll("div")
.data(treemap.value(function(d) { return d.size; }))
.style("background", function(d) { return d.colorgrp; })
.transition()
.duration(1500)
.call(cell);
d3.select("#evotes").classed("active", false);
d3.select("#pop").classed("active", true);
});
function cell() {
this
.style("left", function(d) { return d.x + "px"; })
.style("top", function(d) { return d.y + "px"; })
.style("width", function(d) { return d.dx - 1 + "px"; })
.style("height", function(d) { return d.dy - 1 + "px"; })
.style("text-anchor", "middle");
}
/* two dimensional color scale process (have to comment out color scales above, and change color selection in each display section
function treemap_color(value, stepsize, steps) {
var y = Math.round( 255 - (value * 5400) );
return 'rgb(255' + y + ',0,0)'; //INCREASE in unemployment => red
}
function treemap_color(value, stepsize, steps) {
if (value == 0) {
return "rgb(0,0,0)";
} else if (value < 0 ) {
//steps = 10 stepsize = 2.5 value = roc2 (0 - 0.04)
// 255/10 (25 * 0.04/2.5
var x = Math.round( (255/steps) * value/stepsize );
return 'rgb(0,' + x + ',0)'; //DECREASE in unemployment => green (value is roc2)
} else {
var y = Math.round( (255/steps) * value/stepsize );
return 'rgb(' + y + ',0,0)'; //INCREASE in unemployment => red
}
}
*/
});
</script>
</body>
</html>
Raw
Service Treemap
This is a test treemap. See it live http://bl.ocks.org/1820583
Raw
service-json.txt
{
"name": "tree-votes",
"children": [
{
"name": "Employers (Classic)",
"children": [
{"name":"Premium Statement", "colorgrp":"royalblue" , "roc2":0.006, "roc3":-0.82, "pop100k":46273, "size":55},
{"name":"EE Add", "colorgrp":"royalblue" , "roc2":0.008, "roc3":-0.82, "pop100k":15386, "size":55},
{"name":"EE Changes", "colorgrp":"royalblue" , "roc2":0.003, "roc3":-0.82, "pop100k":39159, "size":55},
{"name":"MY Forms", "colorgrp":"royalblue" , "roc2":0.014, "roc3":-0.82, "pop100k":5349, "size":55},
{"name":"E of I Reporting", "colorgrp":"royalblue" , "roc2":0.026, "roc3":-0.82, "pop100k":5426, "size":55},
{"name":"ER Claims Status", "colorgrp":"royalblue" , "roc2":0.047, "roc3":-0.82, "pop100k":3409, "size":55},
{"name":"Tax Reporting", "colorgrp":"royalblue" , "roc2":0.029, "roc3":-0.82, "pop100k":1423, "size":55}
]
},
{
"name": "Employers (Simply Unum)",
"children": [
{"name":"Statement Summary", "colorgrp":"lawngreen" , "roc2":0.014, "roc3":-0.82, "pop100k":19695, "size":55},
{"name":"EE Add", "colorgrp":"lawngreen" , "roc2":0.03, "roc3":-0.82, "pop100k":5728, "size":55},
{"name":"EE Change", "colorgrp":"lawngreen" , "roc2":0.027, "roc3":-0.82, "pop100k":14174, "size":55},
{"name":"Case Setup", "colorgrp":"lawngreen" , "roc2":0, "roc3":-0.82, "pop100k":475, "size":55},
{"name":"Plan Documents", "colorgrp":"lawngreen" , "roc2":0, "roc3":-0.82, "pop100k":1473, "size":55},
{"name":"ER Claim Status", "colorgrp":"lawngreen" , "roc2":0.022, "roc3":-0.82, "pop100k":2276, "size":55}
]
},
{
"name": "Sales Partners",
"children": [
{"name":"IIP App Status", "colorgrp":"crimson" , "roc2":0.005, "roc3":-0.82, "pop100k":4038, "size":55},
{"name":"E-Statements", "colorgrp":"crimson" , "roc2":0.016, "roc3":-0.82, "pop100k":13017, "size":55},
{"name":"SPR Forms Wizard", "colorgrp":"crimson" , "roc2":0, "roc3":-0.82, "pop100k":2551, "size":55},
{"name":"Multi Life Add- on", "colorgrp":"crimson" , "roc2":0, "roc3":-0.82, "pop100k":258, "size":55}
]
},
{
"name": "Claimant",
"children": [
{"name":"Claim Status", "colorgrp":"orange" , "roc2":0.011, "roc3":-0.82, "pop100k":65519, "size":55},
{"name":"Payment", "colorgrp":"orange" , "roc2":0.003, "roc3":-0.82, "pop100k":24142, "size":55},
{"name":"File a Claim", "colorgrp":"orange" , "roc2":0.016, "roc3":-0.82, "pop100k":6863, "size":55},
{"name":"Items Missing from Form", "colorgrp":"orange" , "roc2":0.015, "roc3":-0.82, "pop100k":9493, "size":55},
{"name":"Info Requested", "colorgrp":"orange" , "roc2":0.001, "roc3":-0.82, "pop100k":13135, "size":55},
{"name":"Policy Documents", "colorgrp":"orange" , "roc2":0.003, "roc3":-0.82, "pop100k":7372, "size":55}
]
}
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment