Revisit visualization colors

[olafgrabienski]

Current implementation: Full color version

The red text and the green text indicate content relations on hover. Green and red are not very readable on some of the circle sector background colors, due to lack of contrast.

First ideas to improve readability:

• combine the full color version (see above) and the outline stroke version (see next comment), i.e. make the outline stroke thicker; update: there's a new draft by Jan with a thicker outline stroke, see next comment
• replace the full colors in the circles with gradients, starting fully colored at the outer and fading into less opacity in direction of the inner parts of the circle sectors.

[olafgrabienski]

Current alternatives

(1) Outline stroke version, by Marco:

(2) Suggestion / draft by Jan:

[olafgrabienski]

After discussion in the forTEXT team, that's the current state of the graphic (screenshot from https://olafgrabienski.github.io/vega-fortext/view-api.html):

Looks overall good! Two suggestions:

• Under "Kategorie", I'd suggest to fill the outlined circles with color.
• Let's find another colour for Yellow.

[olafgrabienski]

Here are some color ideas from https://material.io/design/color/the-color-system.html#tools-for-picking-colors:

red

D50000

blue / light blue

2962FF or #0091EA

green / light green

00C853 or #64DD17

purple / deep purple

AA00FF or #6200EA

orange

FF6D00

yellow / amber

FFD600 or #FFAB00

I guess, the Yellow and Amber are better visible than the Yellow used so far. When we use Amber, we might also adjust the Orange. I've added the other colors for reference, in case it looks better when they are from the same palette.

[janhorstmannn]

It's a good idea to fill the outlined circles with color.

I also like that you get tooltips when hovering over the colours in the circle. Would it be possible to add links to the overview pages of these categories in the circle?