cyipt / actdev

ActDev - Active travel provision and potential in planned and proposed development sites
https://actdev.cyipt.bike
7 stars 3 forks source link

Switch mode-split chart to horizontal stacked bar chart #111

Closed Siequnu closed 3 years ago

Siequnu commented 3 years ago

mode-split-base

It's currently a vertical stacked bar chart — can we change this to horizontal? This will increase the legibility in horizontal layouts and allow me to expand the size.

Screenshot 2021-02-25 at 23 52 30
Robinlovelace commented 3 years ago

It's currently a vertical stacked bar chart — can we change this to horizontal?

Could do but I'm not convinced, easier to interpret as vertical stacked graph. Also I want to focus on MVP issues and this isn't one so skeptical that this is a good use of time at this stage. Good to see updated colours, which is MVP:

image

Although I think the colourscheme needs a bit more thinking: motorised modes tending towards red and active modes towards cooler blue/green colour and some grouping would work well I think.

Siequnu commented 3 years ago

This isn't an updated colour scheme — it's simply an inverted image to match the white background with the site background, until the graphs can be produced with the background and colour I mentioned here.

Background colour should be #434343, or transparent which would be even better. Text colour ideally white as we will be predominantly using a darker background. I am currently using a few tricks with the auto generated graphs (see the updated site) to make them fit better into the colour scheme by inverting the colours, but that of course flips the colour scales as well.

Robinlovelace commented 3 years ago

This isn't an updated colour scheme — it's simply an inverted image to match the white background with the site background, until the graphs can be produced with the background and colour I mentioned here.

OK but you see the need to decide colours for each mode before generating the plots?

Of the colourschemes I've seen so far of plots generated using code in this project I think these two are the most viable (I have a mild preference for the top one but imagine we can do better than that):

image

image

Robinlovelace commented 3 years ago

Moving discussion of colourschemes for modes to a new issue, this is going off topic.

mvl22 commented 3 years ago

Could do but I'm not convinced, easier to interpret as vertical stacked graph.

Bear in mind that we have a landscape-shaped space to put a chart in. Therefore, the bars will be flattened downwards, meaning that e.g. 10% cycling will appear with a very thin bar, making differences hard to see. A left/right chart would probably show the differences more clearly.

I'd welcome at least seeing an example of the chart to understand why a vertical chart is supposedly better. To me that third example just above shows exactly the problem - all I can tell is that walking and cycling is vaguely not really present.

Robinlovelace commented 3 years ago

If the proposal is to change the pngs, which are planned to be implemented as JS vector graphics in any case, I think the onus is on the person proposing the change to provide a good reason. More important and much close to MVP territory is aspect ratios. What is best: 4:3, 1:1, or what? Numbers and images can speak louder than words at this stage. Mock-ups and info on pixels/sizes v. welcome..

Siequnu commented 3 years ago

Generally, we have landscape screens, and landscape spaces in our design for charts, so creating the chart in some kind of landscape format is fine. Especially the legend should be on one of the sides, rather than at the bottom.

Robinlovelace commented 3 years ago

More specific guidance on the graphics such as aspect ratios and pixel counts would be appreciated. Given plans to generate vector versions of the graphs closing here in favour of https://github.com/cyipt/actdev-ui/issues/29. Happy to revisit this if a firm decision is made. Generally best to keep issues specific and actionable.