Hidding hover effect in sunburst chart

Community Help
1

Dear All,

I need help from you guys. I have 2 questions.

1st question
How can I hide the hover effect of sunburst chart?
I provided the screenshot and highlight portion in which I would like to remove hover effect for all sections of sunburst chart.

2nd question
In JSON file, what does “value” mean? I tried to change some value to 1 or 2 from their original value, then I noticed that those data cannot be displayed already.

“name”: “operator”,
“children”: [
{
“name”: “distortion”,
“children”: [
{“name”: “BifocalDistortion”, “value”: 4461},
{“name”: “Distortion”, “value”: 6314},
{“name”: “FisheyeDistortion”, “value”: 3444}
]
},

Thank you very much for your help,
Ye

observable
observable2007×1866 463 KB

2

Your screenshot appears to be of some notebook. It would certainly help, if you included a link to that notbook.

1 Like
3

Hello @mcmcclur ,

Here is the link: Zoomable sunburst / Ye Kyaw Tun's Workspace | Observable

Thank you very much,
Ye

1 Like
4

The tooltip is implemented as an SVG title element. If you search for the word “title” in your notebook, you’ll find these lines:

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

The tip will disappear if you remove those lines

As for the other question, I guess I don’t know what the value “means”, since I don’t know anything about the data. I can see that it’s used twice in the code, though:

  1. to set the hover value and
  2. also in these lines:
const hierarchy = d3.hierarchy(data)
  .sum(d => d.value)
  .sort((a, b) => b.value - a.value);

That sum statement assigns values to all the nodes (not just the leaves), which is then used by sort to set the layout. You can read more about it here:

1 Like