D3 Tree Map
D3 Tree Map with tile arrangement in ascending order of size.
by Vikram Deshmukh
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
CSS
rect {
fill: none;
stroke: #fff;
}
text {
font: 10px sans-serif;
}
JavaScript
USA = {
'name': 'data',
'children': [{
'name': 'A',
'desc': "Communicable, maternal, perinatal and nutritional conditions",
'children': [{
'name': 'A01',
'desc': "Tuberculosis",
'90FE': 0,
'90FL': 0,
'90FP': .000484,
'90F1': .000857,
'90F5': .000954,
'90F10': .000915,
'90F15': .000679,
'90F20': .001865,
'90F25': .002201,
'90F30': .002423,
'90F35': .001872,
'90F40': .001363,
'90F45': .001124,
'90F50': .000934,
'90F55': .000866,
'90F60': .000818,
'90F65': .000846,
'90F70': .00086,
'90F75': .000809,
'90F80': .000549,
'00FE': 0,
'00FL': 0,
'00FP': .000539,
'00F1': .001017,
'00F5': .000981,
'00F10': .000816,
'00F15': .000609,
'00F20': .001216,
'00F25': .001175,
'00F30': .001267,
'00F35': .000935,
'00F40': .000713,
'00F45': .000735,
'00F50': .000596,
'00F55': .000584,
'00F60': .000544,
'00F65': .000565,
'00F70': .000608,
'00F75': .000603,
'00F80': .000399
}, {
'name': 'A02',
'desc': "HIV/AIDS",
'90FE': .023124,
'90FL': .002457,
'90FP': .023525,
'90F1': .098902,
'90F5': .103213,
'90F10': .06633,
'90F15': .078107,
'90F20': .142801,
'90F25': .114696,
'90F30': .122893,
...