CODEWITHSUNDEEP
d3.jsdiagramsankey-diagramobservablehq
brunurb
brunurb

Reputation: 43

Brighter node color in D3 sankey diagram

I wanted the blue color in this sankey diagram to be brighter than the links color, but for some reason its working for all other colors and not the blue. Noob here, thanks in advance for your help.

Upvotes: 1

Views: 87

Answers (1)

brunurb
brunurb

Reputation: 43

The reason from not working is because calling brighter on RGB blue (0, 0, 255) just makes the blue channel even higher — but it can’t go higher than 255, so it comes out the same.

The solution is to use HSL (which is as easy as adding .formatHsl() after .brighter(0.5)

so instead of:

return d3.color(d.targetLinks[0].color).brighter(0.5);

it should be

return d3.color(d.targetLinks[0].color).brighter(0.5).formatHsl();

and it worked.

Complete solution and more info here https://talk.observablehq.com/t/flow-o-matic-brighter-nodes/4856/2

Upvotes: 2

Related Questions