CODEWITHSUNDEEP
javascriptd3.jsdata-visualization
max
max

Reputation: 4521

Add size to icicle visualization

I'm working off this D3 visualization here: https://bl.ocks.org/mbostock/4347473

How could I add the size of each box next to the label as done here: https://observablehq.com/@d3/zoomable-icicle?

I don't understand the code well enough to know where to append the code. I'm assuming it's this line:

cell.append("title")
      .text(d => `${d.ancestors().map(d => d.data.name).reverse().join("/")}\n${format(d.value)}`);

But the Observable format is throwing me off.

Upvotes: 0

Views: 83

Answers (1)

Gerardo Furtado
Gerardo Furtado

Reputation: 102188

If you want to add a <title> element with the value (which you called "size") of each box, all you need is:

selection.append("title")
    .text(d => d.value);

Regarding that line in the Observable...

.text(d => `${d.ancestors().map(d => d.data.name).reverse().join("/")}\n${format(d.value)}`);

... you cannot use it because ancestors() is a method of D3 v4/v5, and the bl.ocks you linked use v3. Besides that, what this...

d.ancestors().map(d => d.data.name).reverse().join("/")

... does is getting the name of all parents and reversing it (if you look at the observable you'll see that above the value you have the sequence, from the root to the current box. Therefore, you don't need it, all you need is the second line in the template literal:

format(d.value)

Here is the bl.ocks you linked with that change: https://bl.ocks.org/GerardoFurtado/3bc4b6c7260d131ed78a5922700fc633/5ba087da8a55063c58a66314dadafd06585b1329

Upvotes: 1

Related Questions