Dynamic level color change v2

Excellent, the connection is working. Now for the next logical step.

Our Next Goal: The selected node will still be red, but all other nodes will become white with a grey border. The path of lines leading to the selected node will also turn red, while all other lines will become grey. This will make your selection stand out even more.

The Power BI setup is already perfect. We only need to make small changes to the Deneb JSON.

---

Deneb JSON Modifications

Step 1: Add a Signal to Trace the Path

To make the connecting lines red, the visual needs to know the entire path of ancestors leading to your selection. We'll add a signal for that.

1. Open the Deneb editor.

2. Find the "signals": [...] array.

3. Add the following signal inside the array, right after the slicerSelection signal you added before.

JSON

    {
      "name": "slicerHighlightPath",
      "value": [],
      "update": "slicerSelection ? pluck(treeAncestors('treeCalcs', slicerSelection), 'id') : []"
    }

Step 2: Modify the Node Colors

Now we'll tell the nodes to turn white instead of their original color when a selection is made.

1. Scroll down to the "marks": [...] array.

2. Find the group mark with "name": "node".

3. Inside that mark's "encode": { "update": { ... } } block, replace the fill and stroke properties with these new ones:

JSON

          "fill": {
            "signal": "slicerSelection && slicerSelection !== '' ? (datum.id === slicerSelection ? '#ffcccb' : '#ffffff') : merge(hsl(scale('colour', datum.treeParent)), {l:0.94})"
          },
          "stroke": {
            "signal": "slicerSelection && slicerSelection !== '' ? (datum.id === slicerSelection ? '#e60000' : '#d3d3d3') : merge(hsl(scale('colour', datum.treeParent)), {l:0.79})"
          },

What this code does:

• It first checks if anything is selected (slicerSelection && slicerSelection !== '' ?).

• If YES: It then checks if the current node is the selected one. If it is, the node is colored red. If not, it's colored white (#ffffff) with a light grey border (#d3d3d3).

• If NO selection is made: The nodes will show their original default colors.

Step 3: Modify the Link Colors

Finally, let's update the lines (paths) to match.

1. In the "marks" array, find the first mark, which has "type": "path".

2. Replace its "stroke" property with the following code:

JSON

          "stroke": {
            "signal": "slicerSelection && slicerSelection !== '' ? (indexof(slicerHighlightPath, datum.target.id) > -1 ? '#e60000' : '#d3d3d3') : scale('colour', reverse(pluck(treeAncestors('treeCalcs', datum.target.id), 'id'))[1])"
          }

What this code does:

• It also checks if a selection has been made.

• If YES: It checks if the link is part of the ancestor path (slicerHighlightPath). If it is, the line is colored red. All other lines become light grey.

• If NO selection is made: The lines show their original default colors.

Step 4: Apply Changes

Click the "Apply" button in the Deneb editor.

Your visual will now highlight the selected node in red, show the path leading to it in red, and turn everything else a neutral white and grey.