data = d3.group(desiredData, d => d.Department, d => d.Appropriation)
d3.hierarchy(data)
chart = {
const root = icicle(data);
const svg = d3.create('svg')
.attr('viewBox', [0, 0, width, height])
.style('font', '10px sans-serif');
const cell = svg
.selectAll('g')
.data(root.descendants())
.join('g')
.attr('transform', d => `translate(${d.y0},${d.x0})`);
cell.append('rect')
.attr('width', d => d.y1 - d.y0)
.attr('height', d => d.x1 - d.x0)
.attr('fill-opacity', 0.6)
.attr('fill', d => {
if (!d.depth) return "#ccc";
while (d.depth > 1) d = d.parent;
return color(d.data[0]);
})
const text = cell.filter(d => (d.x1 - d.x0) > 15).append('text')
.attr('x', 4)
.attr('y', 13);
text.append('tspan')
.text(d => d.data[0] || d.data['Category']);
/*function(d) {
if (d.depth = 1) {
return d.data['Department'];
} else if (d.depth = 2) {
return d.data['Appropriation'];
} else if (d.depth = 3) {
return d.data['Category'];
}});
*/
text.append('tspan')
.attr('fill-opacity', 0.7)
.text(d => ` ${format(d.value)}`); //{console.log(d);
//cell.append('title')
//.text(d => `${d.ancestors().reverse().map(d => d.data['Category']).join('/')}\n${format(d.value)}`);
return svg.node();
}
color = d3.scaleOrdinal(d3.schemePastel2)
d3.schemePastel2
icicle = data => d3.partition()
.size([height, width])
.padding(1)
(d3.hierarchy(data)
.sum(d => d.Amount)
.sort((a, b) => b.height - a.height || b.value - a.value))
format = d3.format('$s')
format(1500000)
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
