Update colourscheme for cohesive network to allow more groups

[Robinlovelace]

As illustrated below most groups are now grey. Not sure how many groups there will be in the final version, there are 12 currently, maybe worth adding a colour ramp, pending feedback from @anguscalder and others. Thoughts on this welcome.

[mvl22]

New colours just need to be defined in the definitions file, i.e. at: https://github.com/nptscot/nptscot.github.io/blob/refactor/src/datasets.js#L137-L141

and currently also at: https://github.com/nptscot/nptscot.github.io/blob/refactor/index.html#L310-L313

[Robinlovelace]

New colours just need to be defined in the definitions file, i.e. at: https://github.com/nptscot/nptscot.github.io/blob/refactor/src/datasets.js#L137-L141

and currently also at: https://github.com/nptscot/nptscot.github.io/blob/refactor/index.html#L310-L313

Are you happy to give that a go? Happy for you to take the initiative, do you know any good colourschemes?

[Robinlovelace]

Nudge on this @mvl22. Let me know if you'd like to discuss, keen to resolve this as the biggest visual issue with the test website.

[mvl22]

My immediate thought is that this probably should be a single colour scale gradient. If the intention is that this is a single network and you are representing phasing, having wildly different colours or even a scale like red-blue doesn’t seem to represent that. The gradient is really just representing what has mor effectiveness but there could easily be funding or whatever constraints that mean a different order. So I think we just pick a colour and make 12 gradients of it.

[Robinlovelace]

Sounds good. If there's a way to generalise it so that it can take any number of groups that could be good. As a starter for 10 how's some light and cool colours like these?

Code that generated that:

    const color1 = '#ADD8E6';
    const color2 = '#006400';

    const colors = [
        interpolateColor(color1, color2, 0.25),
        interpolateColor(color1, color2, 0.5),
        interpolateColor(color1, color2, 0.75)
    ];

    let networkColors = [
        color1, // Light Blue
        colors[0], //
        colors[1], //
        colors[2], //
        color2 //
    ];

Source: https://github.com/cruse-bike/cruse/blob/main/src/routes/%2Bpage.svelte

[Robinlovelace]

But more blue and less green would be my thinking.

[mvl22]

If there's a way to generalise it so that it can take any number of groups that could be good.

Yes; generic function implemented for this in 3e0de10dc4a5231ee62345c1a46088ce76f8ad04, and used in 254f736490031d71b0d4e1035e723f91add7cf8b.

[mvl22]

Just to say, I'm a bit surprised on the analytic side, that the network order is seeing clumps of areas first, rather than the main routes between areas. Is that as expected, or is this work in progress? Let me know if there's a better place to ask this question about the underlying assessment on.

[Robinlovelace]

Just to say, I'm a bit surprised on the analytic side, that the network order is seeing clumps of areas first, rather than the main routes between areas. Is that as expected, or is this work in progress? Let me know if there's a better place to ask this question about the underlying assessment on.

Work in progress. Cc @wangzhao0217