Visualization of direction and chronological order of movement on the map

[matt]

@nirix

Out of curiosity I did try out a few different configurations with these limitations.

Very cool experiment! Thanks for this

My preference from those is 5, because to my eyes it’s the most readable. Arc’s map also has the concept of active/selected path lines, which are currently shown in opaque colour, while inactive/unselected paths are shown in reduced opacity grey. (Can see this in item details views, where the segments for the selected item are active/selected while segments for the other items in the day are inactive/unselected and greyed out). I could see a combination of 5 for actives/selected and 3 for inactive/unselected working well.

[nirix]

@matt

And I disagree with almost all of them By my measure, they’re almost universally terrible.

Leaving aside the issues of red/green colour blindness and culturally different meanings for red and green, a multi step gradient is always going to be more challenging for the mind to interpret than a two step gradient. That extra cognitive burden has to pay for itself by providing extra information, otherwise it can’t be justified.

I think the only viable exceptions are when there is more than one ontological category represented in the gradient, for example below sea level / sea level / above sea level; below freezing / freezing point / above freezing; low pressure (rain) / high pressure (dry). (Though that last one is still better represented with a two step gradient, to show a spectrum from no rain to lots of rain).

For a spectrum of speed, I can’t see any justification for going to multi step gradient. You can’t go slower than zero - there are only positive numbers. It’s one ontological category: speed. You go from no speed to high speed.

I could see an argument for claiming multiple ontological categories if gradient steps were bounded to the crossover speed points between walking and running and running and sprinting, but I doubt that’s what either Apple Workout app or Runtastic are doing, and even if they were I still don’t think it would justify the extra cognitive load and decreased readability. That’s better represented by discrete steps, as Arc already does with solid green for walking and solid orange for running. (Aside: I’ve long wanted to add another activity type and colour for sprinting, because the activity types classifier absolutely can detect sprinting as a separate activity).

Data visualisation is difficult to do well, and Arc doesn’t do some of it as well as it should, but I do try to stick to one basic rule as often as I can: Only show the data you’re trying to communicate and nothing more. Anything extra you add should only be there because it increases understanding and readability of the intended data. Beyond that point, all you end up doing is increasing the cognitive load and reducing readability and understandability.

If your visualisation needs a key, you have to step back and question whether there’s a better way to display it that wouldn’t need a key. Maybe the key is ultimately unavoidable, but you still have to step back and think it through, to make sure you’re not unnecessarily complicating the visualisation, adding more but communicating less.

It does make sense to have different colour gradients/discrete jumps for visualizing speed across different activity types/several categories together, if you don’t want to see them as one unified thing (however it would be interesting to only see the speed/elevation aspect visualized on the map for several activity types without indicating the activity type itself). If there are several different categories that have similar speed properties you might not want to use separate gradients for them if you want to compare them with/see them relative to each other. In the end it does depend on what your goal is, see the speed/elevation relative to that specific activity type, or all activities shown together on the map. Also you might limit the available colour range for the gradient too much this way (I think that’s the main reason for multi-colour gradients) which could lead to differences in data not emphasized well enough visually.

[nirix]

@matt

Very cool experiment! Thanks for this

My preference from those is 5, because to my eyes it’s the most readable. Arc’s map also has the concept of active/selected path lines, which are currently shown in opaque colour, while inactive/unselected paths are shown in reduced opacity grey. (Can see this in item details views, where the segments for the selected item are active/selected while segments for the other items in the day are inactive/unselected and greyed out). I could see a combination of 5 for actives/selected and 3 for inactive/unselected working well.

In an ideal scenario you could combine 5 and 3 together, if you can have white outlines with 100% opacity and opaque activity coloured lines without having the same solid white layer behind it. (Maybe with using three different lines for each path, two of them being the solid white outlines on two sides with dynamically changing positioning next to the opaque activity coloured line based on the direction of the current path on the map or some other trick for calculating their placement. )

Here is how it looks like if I remove the white layer behind the opaque activity coloured line:

Activity coloured lines with 50% opacity + White outlines with 100% opacity

Activity coloured lines with 75% opacity + White outlines with 100% opacity

I guess the latter one is preferable here because of the higher contrast while still being transparent enough. (Maybe you could increase the opacity of the activity coloured lines even more to something like 80% opacity while still preserving enough details in this case.)

Another thing is that of course these images use the current colour scheme, but some adjustments could be useful for better differentiation/contrast/visibility with different opacity levels/outlines from the current one.

[nirix]

Actually, just for comparison here are the other similar combinations with the white layer removed behind the opaque activity coloured lines, but with different opacity levels for the remaining white outlines around:

Activity coloured lines with 50% opacity + White outlines with 50% opacity

Activity coloured lines with 50% opacity + White outlines with 75% opacity

Activity coloured lines with 75% opacity + White outlines with 50% opacity

Activity coloured lines with 75% opacity + White outlines with 75% opacity