Showing zero sized nodes with some minimum length arc

[Mahesha999]

I have some educational content. In this chapters have section, sections have subsections and subsections have video. All chapters have sections. But sections might not have subsections, but directly have videos. One the other hand some sections or subsections might not have any video at all. Such no-video sections and subsections get size calculated as zero and hense they are not shown in the sunburst diagram.

To fix this, "in input data", I create dummy attribute with displayVal with value of size attribute and added 20 seconds to each size value:

chapter["displaySize"] = chapter["size"];   // same for sections, subsections and video
chapter["size"] = chapter["size"] + 20;

With this, all sections and subsections get non-zero size and are shown in sunburst diagram. To show original value, I passed displaySize to tooltipContent function. During debugging, I realized that "inside tooltipContent function", for no-video sections / subsection, displaySize is set to 20, instead of 0. Q1. Why is it so?

To compensate this, inside tooltipContent function, I did following:

function getTooltip(d) {
    if (d === 20) {
        return "<i>No video</i>";
     }

     d = d - 20;
    //...
}

Q2. Is there any flag on Sunburst component which we can set so that sections with no video or zero length video are still shown with some minimum arc length and tooltip "No video"?

Q3. Regardless of any of above, no-video sections / subsections are not show at all in completely zoomed out diagram. No-video subsection is show only when I click its parent section, but not when I am in zoomed-out / chapter view, even I specify minSliceAngle={0}. Why is this so?

PS: When I added 20 to displaySize too in input data, inside tooltipContent function (during debugging), it shows 40 for displaySize for no-video sections / subsections.

[vasturiano]

@Mahesha999 the radial size of any node in the data tree is equal to: the node size + the combined size of all its children. Under this light what you've described above is totally expected.

I think the right thing to do for your use case is to add a size of 20 only to the nodes that don't have any children, as you're only interested in giving a minimum size to those.

Q3. Regardless of any of above, no-video sections / subsections are not show at all in completely zoomed out diagram. No-video subsection is show only when I click its parent section, but not when I am in zoomed-out / chapter view, even I specify minSliceAngle={0}. Why is this so?

Difficult to say without more context. Can you make a reduced example on https://codepen.io/?

[Mahesha999]

I think the right thing to do for your use case is to add a size of 20 only to the nodes that don't have any children, as you're only interested in giving a minimum size to those.

But that will change the relative sizes, right? I mean this will make nodes with no size to have same size as those nodes which really have size of 20.

This made me first copy size attribute values to displaySize attribute for all nodes and then add 20 to all nodes's size attribute:

chapter["displaySize"] = chapter["size"];
chapter["size"] = chapter["size"] + 20;

This can be seen in transformData function.

Now instead of displaying size in tooltip, I used displaySize as can be seen here:

tooltipContent={(d, node) => `${secondsToHms(d.displaySize)}`}

Inside secondsToHms(), I returned "No video" if displaySize===20:

function secondsToHms(d) {
  d = Number(d);

  if (d === 20) {
    return "<i>No video</i>";
  }
  //...
}

This is how it displays when zoomed in:

(Is above approach correct? Or is there any better way to achieve the same result?)

However, when zoomed out, it does not show those tiny arcs corresponding to no video (that is in above image there are 6 sections inside introduction, but in below image there are only 4):

Here is the sandbox. Also I guess I once saw those tiny no-video arcs with the exact same file as in this sandbox even in completely zoomed out view. But now not able to see them. So was just guessing if there is any other factor that will make those arcs show or hide.

[vasturiano]

@Mahesha999 from your sandbox I can see those small segments are there even when zoomed out. The issue is that their radial width is so small (sub-pixel) that you don't even see them. But if you hover carefully you'll find that they are in fact being rendered onto the DOM, albeit with a very small size, for example:

And zoomed in:

[Mahesha999]

Yes / no.

I increased the browser zoom by 500%, and I believe I can safely say it is not shown by the component. At least, I am not able to see it when completely zoomed out as can be seen below. But when I slide the mouse cursor slowly, it does show the tooltip when mouse if on empty space after crossing the last arc with some video.

Also when I zoom in to "Network Layer" section, I am still able to see no-video section even at 500% browser zoom:

May be my eyes are bad. But I honestly feel, am just expecting unnecessarily too much from such already beautiful component ! Its not allowing me to donate from India, says donations from this country is not supported !

And yes it does appear when I zoom in further to IPv6 section, as you shown in you last screenshot.

[vasturiano]

@Mahesha999 the reason why the segments are seemingly invisible is because each has a stroke-width: 1px. You see that style being applied here: https://github.com/vasturiano/sunburst-chart/blob/effb2c411d7e6bbcc019fc19574921aac3075e98/src/sunburst.css#L21-L22

Now, the color of the segments are applied as polygon fill. And the 1px stroke actually eats into the inner fill space of the segment. So, if a segment ends up having less than 1px of radial width, its representation is completely taken over by the stroke/border itself, which is set as white by default, but you can modify that via strokeColor.

So if you'd like to prevent these segments from "disappearing", and also get rid of the border between segments, I'd suggest to set strokeColor to the same logic as you have for color.

[Mahesha999]

I tried this and it works to some extent, but those white spacing between slices serve better purpose. Neverthless, I am wondering how arrows in your tool tip look so much cleaner than mine:

Does this depend on the fonts installed on the local machine?

[vasturiano]

Possibly. Or in the browser implementation of font-family: sans-serif (if not overridden by your app). Mine are taken on Chrome in Mac OS. Which browser/OS are yours?

[Mahesha999]

I tried on all edge, brave and chrome on Ubuntu 20.04 LTS. This is what it shows for tooltip:

And find websites used fonts lists following: