Hello,
I have done a lot of hard work to have an acceptable dataviz. D3.js is powerfull but really difficult to tweak when you want a perfect design. Hope you will find it interesting.
I wanted to use a Treemap because I love this dataviz but I should first found a good data for this. The budget data is perfect for this and Treemap is a great layout to have a quick and clear understanding where the budget is spend.
I have finally used the Paris (France) annual budget available here: http://opendata.paris.fr/explore/dataset/budget-votes-ap-autotrisations-de-programmes/?tab=metas
I had first to filter the data to keep only the expenditure then convert the CSV format to a nested JSON using the following code:
var root = {
"key": "Budget Paris 2015",
"values": d3.nest()
.key(function(d) {
return d["Mission (AP) - Texte"];
})
.key(function(d) {
return d["Mission-Activité (AP) - Texte"];
})
.rollup(function(v) {
return d3.sum(v, function(d) {
return +d["Crédits votés (eng)"];
});
})
.entries(data)
}
I successfully added the zoom / unzoom capability on nested data but also tooltip on block. Hover on any cell to see next level of detail, or click on a cell to zoom in. Click on the top label to zoom out.
Sadly I have not found a better solution that hide the name of block when this name is too long (cliping the text in SVG is very hard to do :( ). The user can use the tooltip mouseover to show information on the block of budget.