Treemap with D3plus
HTML
<script src="http://d3plus.org/js/d3plus.js"></script>
<link rel="stylesheet" href="http://d3plus.org/css/d3plus.css">
<div id="viz"></div>
JavaScript
// sample data array
var min_size = 20;
var sample_data = [
{"value": 100, "name": "alpha", actualValue: 100},
{"value": 70, "name": "beta", actualValue: 70},
{"value": 40, "name": "gamma", actualValue: 40},
{"value": 15, "name": "delta", actualValue: 15},
{"value": 5, "name": "epsilon", actualValue: 5},
{"value": 1, "name": "zeta", actualValue: 1}
]
// instantiate d3plus
var visualization = d3plus.viz()
.container("#viz") // container DIV to hold the visualization
.data(sample_data) // data to use with the visualization
.type("tree_map") // visualization type
.id({"solo" : [5]}) // key for which our data is unique on
.size({
value: function(res) {
debugger;
if(res.value < min_size) {
return min_size;
}
return res.value
}
}) // sizing of blocks
.format({
number: function(a,b) {
debugger;
if(b.key == 'size') {
return b.data.actualValue
}
return a;
// if(b )
}
})
.draw()