Almanac.httparchive.org: Top HTML elements plot is hiding y-axis labels

[ibnesayeed]

In the Markup chapter under the "Perspective on value and usage" section, the "Top HTML elements" plot hides important y-axis labels. These labels are not sequential that can be inferred from the values above and below. While the the plot on the page is interactive and one can hover over any bar to see the corresponding label, I still think it is important to make them all visible in src/static/images/2019/03_Markup/fig7.png at the cost of smaller font size of labels and taller graph.

/cc @rviscomi @bkardell

[rviscomi]

Thanks @ibnesayeed that's a valid concern. I'm hesitant to change the UI of the chart because if it's tall enough to show each row's label, it will be extremely tall and require a lot of scrolling. The benefit of having it compact like this is that you can read any row and still see the x axis markers. As a compromise, maybe one option is to add a link in the figcaption to the full results in the corresponding Google Sheet so people who really want to dig in can do so.

[ibnesayeed]

The issues is, most of the time people are interested in the top of the list, but the Y-axis shows html, meta, script... hiding many of the important elements and suggesting meta to be the second most popular tag for someone who is casually looking at the plot. I understand the height issue, but is aesthetics more important than usability? I realized that for every visible Y-axis label there are two hidden labels, which means to accommodate every label, we only need to make the figure three times as tall, which is not that bad. Also, if the height is such a big concern, I would shrink the graph to only show top 100 or 50 elements instead of 150 and link to a comprehensive data table for those who are interested in knowing the 149th item.

[rviscomi]

Also, if the height is such a big concern, I would shrink the graph to only show top 100 or 50 elements instead of 150 and link to a comprehensive data table for those who are interested in knowing the 149th item.

I think that's a great point. The need to show 150 items is the underlying issue. I wouldn't want to change that now as it's ingrained in the chapter prose but definitely something we need to keep in mind for future visualizations.

As for how to handle it now, I made the height adjustments to this example graphic and it came out to be 2256px tall. Each row is clearly legible but I do think the height makes it less usable. WDYT?

[bazzadp]

My view is that is better and we should switch to it - despite being quite long.

[rviscomi]

cc @bkardell

[bkardell]

Yeah, I saw this and was considering how to reply... I actually kind of like the idea of linking to a full page like your example, but leaving the inline visualization as is.

[rviscomi]

Oh interesting idea. So rather than linking the figcaption to the Sheet we link to the new graphic, with some verbiage like "full size" or "show all". I like it. Other ideas/thoughts?

[ibnesayeed]

Each row is clearly legible but I do think the height makes it less usable. WDYT?

This new one looks good to me. I tried replacing this image inline on the page which only increased the overall vertical page scroll height by less than 4% (this number will be different for different viewport sizes). To be honest, the new image is only slightly taller than the follow up figure (i.e., Figure 8. Element popularity categorized by standardization) on the same page.

It is possible to only show a fraction of the top portion of tall images and expand inline on user action, but I would really not go that route unless I have to deal with very tall images that are a significant fraction of the over all page height.

[bkardell]

which only increased the overall vertical page scroll height by less than 4%

I mean - a few things here... you are saying 1 graph alone does that, and this is already a long piece. Long pieces are kind of hard to consume in general imo - if people see a lot of scroll is necessary they are less likely to read - so I'd rather not add to it if we can avoid it. In terms of necessary scrolling just to consume that image, on my laptop this image is ~3x the height fully expanded. Again, that will depend, but I expect it will add to the pain and speculate that that seems not very friendly either. But... if you can click into it and see it as @rviscomi has created, it's actually a lot more readable and with bigger targets for hover and stuff too, but doesn't 'get in the way' as much if you are just trying to consume the page. Seems like the best of both worlds?

This all said, I am tbh not exceptionally adamant about anything here...