How can i fill only a portion of a sunbust node 3d js

I'm trying to create a chart similar to this what I want to create

I'm using this https://observablehq.com/@d3/zoomable-sunburst as a starting point but I'm having a hard time figuring out how to fill only a portion of a node according to his value. im trying to create the gradient using this

 let lg = svg.append("defs").append("linearGradient")
    .attr("id", idname)//id of the gradient
    .attr("x1", "0%")
    .attr("x2", "0%")
    .attr("y1", "100%")
    .attr("y2", "0%")//since its a vertical linear gradient 
    ;
  
     lg.append("stop")
    .attr("offset", "0%")
    .style("stop-color", color(d.data.name))//end in red
    .style("stop-opacity", 1)
  
    lg.append("stop")
    .attr("offset", `${p}%`)
    .style("stop-color", color(d.data.name))//end in red
    .style("stop-opacity", 1)

   lg.append("stop")
    .attr("offset", `${p}%`)
    .style("stop-color", "#E5E5E5")//end in red
    .style("stop-opacity", 1)

    lg.append("stop")
    .attr("offset", "100%")
    .style("stop-color", "#E5E5E5")//start in blue
    .style("stop-opacity", 1)

I would really appreciate any kind of guidance, thank you