Previous chart color and style easier to read?

[miragecraft]

Just speaking for myself, but I much prefer the previous chart colors and style - bright, pastel colors with clear differentiation between different items, with the addition of highly visible black outline and clearly denoted data points.

I feel I need to work harder to read the chart in the new version.

[Daandelange]

Hey, thanks for your feedback, I was hesitating to add some visual appearance options. I personally didn't like the previous pastel/washed-out colors anymore. But anyways, it's always nice to have pleasant default ones so let's discuss this topic.

Right now the colors are generative: The root pages determines the hue and then subpages change the saturation and lightness a little, I like this feature a lot and would like to keep it (sub-pages have identical hue). That means that more/less pages in the root will change the color palette, which makes it difficult to control the final hue exactly.

How much user-control should there be over the colors ? Just some thresholds, or something more customisable ? Some people might want greyscale colors (there's already a vue component prop setting for that), others might just want to provide a few predetermined colors, grabbing one per label. (The previous version worked like that and would not be too much work to re-enable.) One of the reasons I removed this "static palette" is because with a lot of pages, the same color could appear for multiple labels, creating less readable charts.

I tried with strokes too but I couldn't find a pleasant combination, maybe you can play around with some Chart.js appearance settings and post parameters that you like ?
Same for the points, I felt it was visually too heavy, so I reduced them and finally I preferred the charts without.
They could become options.

How much "periods" do you have in your database and what is your TimeFrameUtility ?
The compactness of the charts changes a lot with strokes and 2 years of weekly stats really doesn't look good with points and strokes.

[miragecraft]

In my opinion having subpages being shades of the parent page do not provide any practical benefit in most cases and actually harms readability.

Because ideally you want to be able to at a glance, for example, that the "Trees" subpage of "Photography" is really popular.

However with there being 9 shades of purple it makes it really hard to...

1. Distinguish subpages between each other
2. Be able to tell if a specific subpage is really popular, because it's buried within the all the other shades of purple

So the new color scheme looks really good if you just want to just admire the chart, but if you want to gain actionable insights it would give you headaches.

There certainly are special cases where you want to group multiple signals/pages together as a single trackable category, but that should be a user-customizable setting rather than the default behavior (group by parent page, custom grouping etc.).

In addition, I feel that beyond 10-15 items the chart becomes increasingly unreadable regardless of whether the outlines and data points are shown. You would want to look at the actual data shown below the chart anyways at that point.

So my preference would be to put a hard limit on the max number of pages/items gets charted depending on when the usability breaks down ( there could be an "Other" category to keep the Y-axis accurate). It would also solve the color scheme problem as you can just hard code the max number possible and know it won't grow beyond that.

[miragecraft]

When thinking about it further, the usability challenge of the chart completely changes when you start to have hundreds of pages.

If you only show 10-15 top pages in the chart, the "Other" category would grow hilariously large and it would become pointless. But going by the current chart style, would you even have enough shades to display a few hundred subpages?

Or would you only show the parent page at a certain cut-off point?

I think this is the reason that other web analytics don't even try to separate out the pages in their chart. They only show the total count and break them out in the data table. If you want more insight you'd filter the data being charted, instead of adding extra lines/shades in the chart itself.

[doup]

I agree with miragecraft, I liked more the previous palette. I'm not sure how to improve it by keeping the same information density though.

[Daandelange]

So the new color scheme looks really good if you just want to just admire the chart, but if you want to gain actionable insights it would give you headaches.

Lol, that's definitely true, while I think in some scenarios it's also useful to have subpages in similar shades, for example to visualise that "Photography" entries are generally more popular then "Blog" entries; I find that useful too. Your example of viewing which one of the "photography" pages is the most popular is probably more common, but that would also be something to rather visualise in the scope of the "photography" page rather then the "global site stats". Still that wouldn't solve "How popular is "photography/himalaya" vs "notes/my-awesome-essay".

Also, in this scenario, you didn't mention the existing chart feature where you can hover charted data to know its associated label, quickly indicating that "photography/himalaya is way more popular then notes/my-awesome-essay". Similarly, chart data can be filtered. (re-computing chart colors based on filtered items could be a solution too?).

You also have some good points concerning the amount of items displayed in charts, thanks for your valuable feedback on this.

So the scope of this issue is bigger then simply color schemes, more globally thinking on how to visualise the collected data (which I haven't spent much time on yet). I think there can be multiple approaches to this issue.

• Temporary solution:
  Theming: Implement some settings to customise color schemes.
• Complementary solution:
  GUI features: Implement new interface components that could filter-out data to provide more specific insights.
• Long-term solution:
  Stats Widgets: Make various widgets and allow users to choose which ones are displayed, eventually with options (limits, colors, etc). This could be done using Kirby's blueprints, similar to how sections are configured.

I'll let this sudder on a low flame for a while.
Everybody, please feel free to comment in this thread on what is useful to visualise your collected data.