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="riz"></div>
JavaScript
// sample data array
var sample_data = [
{"value": 100, "name": "alpha"},
{"value": 70, "name": "beta"},
{"value": 40, "name": "gamma"},
{"value": 15, "name": "delta"},
{"value": 5, "name": "epsilon"},
{"value": 1, "name": "zeta"}
]
// instantiate d3plus
var visualization = d3plus.viz()
.container("#riz") // container DIV to hold the visualization
.data(sample_data) // data to use with the visualization
.type("tree_map") // visualization type
.id("name") // key for which our data is unique on
.text(function(d){
return d.name +'\n' + d.value
})
.size("value") // sizing of blocks
.draw() // finally, draw the visualization!