Tweaks to time-trend chart presentation

[annemariebrook]

1. Quality of Life time-trend charts:
   • In both v3.0 and v3.1, most Quality of Life right time trends are available for 11 years (2006 - 2016). However, for some the data are only available for 2 years. e.g. see the right to food for any high income country (e.g. the United States). This also means that the category scores are also only available for 2 years for these countries.

Solution: Can we please keep the dates along the x-axis the same for all QoL charts, and if there are only 2 years of data available, please only show those two data points, with the rest of the chart empty. I think this is how it used to be done. Thank you!

2. Civil and Political Rights (CPR) time-trend charts For these, we have either 2 data points (most Pacific countries) or 3 (all the rest). Right now these points are spread out across a chart the same width as the QoL charts which makes it difficult to see if the line is trending up or down.

Solution: a) Can we please shrink the CPR charts horizontally so that the x and y axes are approximately the same length. Show three years on the x-axis (2017, 2018 and 2019), with the first date (2017) not positioned directly on the y-axis, but out one place, so that it is clear that there is no data prior to 2017. For Pacific countries (except Fiji where we have 3 data points) the chart will show 2017 as empty. b) Can we also show (on hover) the number representing the top and bottom of the uncertainty bands, as well as the mean. i.e. similar to how we do it on the CPR rights pages.

Any questions please let me know. I am assuming this will be assigned to Iain. We would like it completed for v3.1 please. Thank you!

[tmfrnz]

@annemariebrook please see my comments below

1. Quality of Life time-trend charts:

• In both v3.0 and v3.1, most Quality of Life right time trends are available for 11 years (2006 - 2016). However, for some the data are only available for 2 years. e.g. see the right to food for any high income country (e.g. the United States). This also means that the category scores are also only available for 2 years for these countries.

Solution: Can we please keep the dates along the x-axis the same for all QoL charts, and if there are only 2 years of data available, please only show those two data points, with the rest of the chart empty. I think this is how it used to be done. Thank you!

I am not sure I understand. The range of the date axis is currently determined by the available ESR data for any country. Are you suggesting to only look at the data available for each country (also for current assessment standard? (this will very often coincide with any country as very often a full data set will be available for at least one indicator)

Also note that there is a full range of scores available for USA's at for some indicators (eg age 65 survival)

1. Civil and Political Rights (CPR) time-trend charts For these, we have either 2 data points (most Pacific countries) or 3 (all the rest). Right now these points are spread out across a chart the same width as the QoL charts which makes it difficult to see if the line is trending up or down.

Solution: a) Can we please shrink the CPR charts horizontally so that the x and y axes are approximately the same length.

Are you suggesting to shrink the data within the chart or the entire chart?

Show three years on the x-axis (2017, 2018 and 2019), with the first date (2017) not positioned directly on the y-axis, but out one place, so that it is clear that there is no data prior to 2017.

This I do not understand and suggest a mock-up.

For Pacific countries (except Fiji where we have 3 data points) the chart will show 2017 as empty.

I believe this is currently the case https://rightstracker-v3-1.web.app/en/country/ASM?as=core&tab=report-empowerment

b) Can we also show (on hover) the number representing the top and bottom of the uncertainty bands, as well as the mean. i.e. similar to how we do it on the CPR rights pages.

This should not be too hard

Any questions please let me know. I am assuming this will be assigned to Iain. We would like it completed for v3.1 please. Thank you!

Actually I believe chart-level design changes should ideally first be prepared by an information designer

[annemariebrook]

Hi Timo, Thanks for the questions. Quick responses below, as I’m not sure how to include images in github. A-M

From: Timo Franz [mailto:notifications@github.com] Sent: Tuesday, 9 June 2020 8:19 PM To: HumanRightsMeasurementInitiative/hrmi-dataportal hrmi-dataportal@noreply.github.com Cc: Anne-Marie Brook Anne-Marie.Brook@motu.org.nz; Mention mention@noreply.github.com Subject: Re: [HumanRightsMeasurementInitiative/hrmi-dataportal] Tweaks to time-trend chart presentation (#170)

@annemariebrookhttps://github.com/annemariebrook please see my comments below

1. Quality of Life time-trend charts:

   • In both v3.0 and v3.1, most Quality of Life right time trends are available for 11 years (2006 - 2016). However, for some the data are only available for 2 years. e.g. see the right to food for any high income country (e.g. the United Stateshttps://rightstracker.org/en/country/USA?as=hi&tab=report-esr). This also means that the category scores are also only available for 2 years for these countries.

Solution: Can we please keep the dates along the x-axis the same for all QoL charts, and if there are only 2 years of data available, please only show those two data points, with the rest of the chart empty. I think this is how it used to be done. Thank you!

I am not sure I understand. The range of the date axis is currently determined by the available ESR data for any country. Are you suggesting to only look at the data available for each country (also for current assessment standard? (this will very often coincide with any country as very often a full data set will be available for at least one indicator)

Sorry for the confusion. I am suggesting exactly the same number of years marked on all QoL charts. i.e. 11 years – as in the chart below. The chart below also shows 11 data points, but as you point out, in some cases there are less data points. In that case, the years for which data are not available would just not have associated data points.

[cid:image005.jpg@01D63EAD.61032A30]

e.g. The right to food would be a much shorter line, showing data points only for the final 3 years of the chart, instead of as shown currently (below).

[cid:image006.jpg@01D63EAD.61032A30]

Also note that there is a full range of scores available for USA's at for some indicators (eg age 65 survival)

1. Civil and Political Rights (CPR) time-trend charts For these, we have either 2 data points (most Pacific countries) or 3 (all the rest). Right now these points are spread out across a chart the same width as the QoL charts which makes it difficult to see if the line is trending up or down.

Solution: a) Can we please shrink the CPR charts horizontally so that the x and y axes are approximately the same length.

Are you suggesting to shrink the data within the chart or the entire chart?

Show three years on the x-axis (2017, 2018 and 2019), with the first date (2017) not positioned directly on the y-axis, but out one place, so that it is clear that there is no data prior to 2017.

This I do not understand and suggest a mock-up.

The idea is something like this, although I think it would look better to have a smaller gap between the y-axis and the 2017 data point than shown here.

[cid:image007.jpg@01D63EAD.61032A30]

For Pacific countries (except Fiji where we have 3 data points) the chart will show 2017 as empty.

I believe this is currently the case https://rightstracker-v3-1.web.app/en/country/ASM?as=core&tab=report-empowerment (I’m not sure what you are illustrating with this example)

b) Can we also show (on hover) the number representing the top and bottom of the uncertainty bands, as well as the mean. i.e. similar to how we do it on the CPR rights pages.

This should not be too hard

Any questions please let me know. I am assuming this will be assigned to Iain. We would like it completed for v3.1 please. Thank you!

Actually I believe chart-level design changes should ideally first be prepared by an information designer. Do you mean e.g. Adina?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://github.com/HumanRightsMeasurementInitiative/hrmi-dataportal/issues/170#issuecomment-641116246, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AF3BASP6BH2GP73NX73LGDDRVXV7VANCNFSM4NY4NDKA.

[tmfrnz]

@annemariebrook sorry i can neither see the images here nor in the email. you can simply drag and drop them onto the GitHub comment field, click the "Attach files..." bar below this editor , or copy and paste images right into it

[tmfrnz]

@annemariebrook sorry i can neither see the images here nor in the email. you can simply drag and drop them onto the GitHub comment field, click the "Attach files..." bar below this editor , or copy and paste images right into it

you can also quote reply =)

[annemariebrook]

OK, let me try again.

1. for the ESR time trend charts I am suggesting that we show exactly the same number of years marked on all ESR charts. i.e. 11 years – as in the chart below. The chart below also shows 11 data points, but as you point out, in some cases there are less data points. In that case, the years for which data are not available would just not have associated data points.

e.g. The right to food would be a much shorter line, showing data points only for the final 3 years of the chart, instead of as shown currently (below).

2. for the CPR time trend charts the idea is something like the chart shown below, although I think it would look better to have a smaller gap between the y-axis and the 2017 data point than shown here. For Pacific countries (except Fiji where we have 3 data points) the chart will show 2017 as empty.

Please let me know if that is now clear. Thanks!

[tmfrnz]

Thanks for providing these additional details @annemariebrook. This is very interesting as this appears to be a browser issue. For me on Chrome the charts are showing up as follows (and as intended):

US - Right to Food

US - Right to Education

ASM - Empowerment

FJI - Empowerment

[tmfrnz]

In the first instance I would suggest to fix these browser-inconsistencies and then consider tweaking them further

[annemariebrook]

@tmfrnz - you are right. The problems i was encountering are all on firefox. I just checked on Chrome instead, and the charts are all showing up as intended. So - to summarise:

1. We need to fix the browser-inconsistencies. Is this something you want to do or @iainkirkpatrick?
2. I would still like to make the CPR charts more narrow. i.e. rather than being the same width as the ESR charts i propose they be closer to a square shape, in recognition that the time series are much shorter.
3. For the CPR charts I would still like to have all three numbers appear on hover (as on the CPR rights pages), rather than just the mean. Both #2 and #3 above will make it easier for people to interpret changes over time.

[iainkirkpatrick]

From a brief look it looks like our charting library react-vis might have a bug in how it's handling data between browsers - also worth noting that react-vis is currently unmaintained and it sounds like Uber have moved on to other solutions https://github.com/uber/react-vis/issues/1303

[annemariebrook]

Thanks @iainkirkpatrick - it would be great if you can fix these issues ASAP. Let me know if you have any questions or need anything from me.

[iainkirkpatrick]

OK, update: I think I figured out the browser inconsistency, Firefox was parsing dates differently to Chrome for our dataForceYRange data (which looks like it was implemented to always plot these time-trend charts from 0 on the y-axis, but was also doing the job of plotting data from the minimum year on the x-axis). Have pushed a branch 170-fix-time-trend-presentation which I will open a PR for.

I would still like to make the CPR charts more narrow. i.e. rather than being the same width as the ESR charts i propose they be closer to a square shape, in recognition that the time series are much shorter.

This feels fine to do, but

For the CPR charts I would still like to have all three numbers appear on hover (as on the CPR rights pages), rather than just the mean.

This I'm not 100% on so want to check in - @annemariebrook when I look at how (what I understand to be) CPR time-trend charts are presented, they show the confidence band, but don't show the upper and lower figures of the band on hover. Do we want to match this, or show the figures on the QOL charts? Screenshot attached of hovering on a CPR chart (is this right?):

(you can't see the mouse in the screenshot, but it's hovering over the leftmost data point). So to be clear on my ask - do we want to just show the bands, or additionally show 3 separate tooltips when you hover over a point on the chart? (i'm not 100% on how 3 separate tooltips would work / not clash...)

[annemariebrook]

@iainkirkpatrick - yes, i would like us to show the upper and lower figures of the band, as well as the means (i.e. 3 figures visible at the same time).

e.g. here's an image from the freedom of opinion and expression rights page, showing the three figures that appear on hover:

[iainkirkpatrick]

@annemariebrook sorry to be pedantic, just want to make sure I'm clear - that chart example shows the confidence band horizontally, is the intention that we show the figures at the same time for the time-trend charts but in a vertical manner? If so, I don't think there is currently an existing example of how that looks / functions in the current app (that I've seen) - and I think the current tooltips that show up for the mean are too large to simply display 3 at the same time in a vertical manner.

That's not to say that it can't be done of course - I'm sure it's straightforward to decrease the size of the tooltips and show them. But just wanting to be clear before I go ahead and action that :)

[annemariebrook]

@iainkirkpatrick, agreed that we don't already have an existing example of exactly what we are after. And yes i can imagine that the font size may need to change in order to display 3 numbers vertically. If you can see what you can do, that would be great!

[tmfrnz]

the closest thing we have is the multiple (3) tooltips for metrics that have sex breakdown (eg primary school enrolment) however the tooltips do overlap when values are close (which is not too bad for sex breakdown I guess as (a) users can determine which line to show and (b) differences in value will be small when overlapping)

agree though that it might need some design thinking for optimal placement of multiple labels

[iainkirkpatrick]

OK, updated with work addressing points 2 and 3 @annemariebrook outlined above. Charts are narrower (can check it out once this PR is merged in and we can make adjusments going forward), and there are 3 tooltips on hover for the mean and confidence band figures. Again, these are just a quick spacing / implementation from me, can adjust from feedback.

[annemariebrook]

Thanks @iainkirkpatrick. Where can I see the updates?

[annemariebrook]

@iainkirkpatrick, we have spotted a bug in some of the time trend charts, where all the dates seem to be overlaid on one another near the 0%. e.g. here's an example for Tuvalu. Can you please fix? Thank you.

[tmfrnz]

Thanks @iainkirkpatrick. Where can I see the updates?

You can't as I have yet to review and deploy them to the v3.1 development site - will do so in due course

[tmfrnz]

@iainkirkpatrick, we have spotted a bug in some of the time trend charts, where all the dates seem to be overlaid on one another near the 0%. e.g. here's an example for Tuvalu. [...] Can you please fix? Thank you.

Again, this appears to be related to Firefox - not sure if this has been addressed in the proposed fix

[tmfrnz]

@annemariebrook @iainkirkpatrick this has now been deployed to the v3.1 dev site. I am still not entirely convinced of limiting the horizontal width for both ESR and CPR charts however (also see https://github.com/HumanRightsMeasurementInitiative/hrmi-dataportal/pull/174#discussion_r442909948)

[annemariebrook]

@tmfrnz and @iainkirkpatrick The firefox issues all seem to have been fixed - thank you!

[annemariebrook]

@iainkirkpatrick - one small requested change for the 3 tooltips on hover for the mean and confidence band figures. Can you please make the mean figure bolded, and the other two numbers unbolded.

We may need to look at adding an explanatory tool tip as well, once we've had a chance to do some user testing, but for now i think just 'unbolding' the confidence band figures will help with reading the numbers, and also be more consistent with the presentation on the rights pages. Thanks!

[annemariebrook]

@iainkirkpatrick - just a friendly reminder about the changes requested on this issue:

• restore the width of the ESR charts to full width (it was only the CPR charts that we requested be made narrower)
• reimplent the x-axis 'padding' that was somehow lost when the CPR charts were made narrower (see discussion with timo on issue #174). The padding is especially important on the CPR charts as it helps to indicate that there is no earlier data. (OK to have the padding on the ESR charts also, but less important as these data series can be extended backwards in time).
• 'unbold' the confidence band figures (leaving the mean figure bolded)

Thank you!

[annemariebrook]

Hi @iainkirkpatrick Susan and I just noticed a slightly unusual chart - it's the secondary education time trend for UAE. https://rightstracker.org/en/country/ARE?as=hi&tab=report-esr

As you will see, there are open circles for the years 2007 and 2008 and solid circles for 2016 and 2017, and although there are no data points in between the 2008 and 2016 points are connected by a solid line.

Our preference would be to have no line connecting the 2008 open circle and the 2016 closed circle.

Is this a tweak you can make relatively easily?

[iainkirkpatrick]

@annemariebrook just getting back to you on the above issue re UAE chart - I think this would likely not be a simple change, as we'd still want a line if the data was only a year or two apart, right? So there would need to be some 'cut-off' we decide for when not to draw a line. If possible, I think it'd be good to look at this with the 3.2 change list :)

[annemariebrook]

@iainkirkpatrick, i think it's simpler than that. Even if the open dots and solid dots were only one or two years apart we would not want a line connecting them. In practice, I think there are very few examples of this, and it's certainly not urgent. So if you want to put it off til the 3.2 change list that is fine with me. But unless I have misunderstood something, i think it should be a pretty simple task?