Marimekko: Labels take up too much space (esp on smaller screens)

[sophiamersmann]

Description

In this chart, it just so happens that the label on the very left is quite long. As a result, the chart area gets squished into a small space.

Expected behaviour

Wrapping long labels might help.

Steps to reproduce

Steps to reproduce the behavior:

1. Go to this https://ourworldindata.org/grapher/share-living-on-less-than-190-marimekko
2. Note how the label on the left squishes the chart area

[danyx23]

We seem to have short name and variant name in regions.json, so we could add some logic to fall back to either of those if the label is very long we should switch to those if they are shorter.

Before shipping this we should probably ask someone from the data team to have a look at regions.json to see if those other names need a bit of love before we want to show them on charts.

[toni-sharpe]

I will note that "DR" is a well-used abrrev. for "Democratic Republic". DPR North Korea and DR Congo are two examples that would think are understood by almost everyone who uses the sort of graphs presented by OWID.

And there's been a PR, should this issue still be open?

[sophiamersmann]

Hey Toni, we merged a PR that uses country short names like "DR Congo". I want to keep this issue open, though, because although using short names is an improvement, Marimekko charts are still difficult to read on smaller screens.

[toni-sharpe]

@sophiamersmann I wondered about a tiled solution?

There's already label measurement code and a mechanism to reduce the number of added labels, and there's logic to draw angled arrows which can be seen in the initial issue text

The diagnonal design might not be the most efficient space-filling option? It relies on bars being as wide as text is high for there not to be an overlap and also cuts off two corners of the oblong space for labels (and it's harder to read, at least in English). Plus some letters must take up more space, even if the labels can teselate. In any case, if diagonal writing used a block shaped page most efficiently, wouldn't books be written that way (Western ones, at least)?

=================

Here's a couple of rough mock-ups I hacked together in GIMP. 25 bars at 320px by 600px. 14px font. I've tried to be awkward with the country selection and with the widths of the bars. This is just really a bit of food for thought, you can close it off if it's already getting discussed.

Tiles labels as defined

Toggle orientation making room for longer list

Could allow for the full 200 or so countries to fit on scroll.

I do not know how difficult the lines would be to draw, but colour connection might work (I do it on the line graph I made). Accessibility not perfect though.

=================

If you want an extra level of challenge with this one, go check out my choropleth map and toggle language to "DE" ...