-
-
Notifications
You must be signed in to change notification settings - Fork 171
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Embed data visualizations in chapters #237
Comments
Edit: See #237 (comment) above for steps to embed data viz |
After copy-editing is done I'll help out with this. Regarding improving the mobile UX, I'm leaning towards the route of generating static images that display the individual values when possible (e.g., bar graphs). They'd resize well, may be quicker to implement, and give the benefit of being highly shareable. |
Also assigning @paulcalvano to help with the data viz (thanks Paul!). Some chapters rely only on images and/or data tables, so there might not be any charts to generate/embed but we still need to ensure that they use the |
Yes I noticed tables in my chapter overflow on mobile whereas wrapping in a |
@colinbendell FYI about our data viz process |
I attempted to convert two static images using this process, but the embedded images don't display in markdown. The test I made was to use the following:
You can see this at the end of the "Compression Algorithms" section in this fork - https://github.com/paulcalvano/almanac.httparchive.org/blob/master/src/content/en/2019/compression.md Any idea what I'm doing wrong here? |
After making changes to the markdown file you need to convert them to markup by running Also your visually-hidden div is missing an ID corresponding to the aria-labelledby above. This was my fault, I omitted it from the example code. I've updated it and also added an example of an image figure. |
I've updated #237 (comment) with canonical steps for data viz. This is a mobile view of the old and new data viz processes. On top it's the iframe overflowing and on the bottom it's the image fallback for mobile. Much more legible!! |
I can handle some of this tomorrow morning
…On Fri, Nov 8, 2019, 18:16 Rick Viscomi ***@***.***> wrote:
I've updated #237 (comment)
<#237 (comment)>
with canonical steps for data viz.
—
You are receiving this because you were assigned.
Reply to this email directly, view it on GitHub
<#237?email_source=notifications&email_token=AAFHFS5M5PDH3NCOU4OU6ODQSX6N5A5CNFSM4JFHGAO2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEDTXMZY#issuecomment-552040039>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AAFHFS5DZGZTZMPSZ4FCG7TQSX6N5ANCNFSM4JFHGAOQ>
.
|
Hey everyone, I was able to finish adding data viz to the JavaScript chapter but sadly wont have time to help add the other chapters. Got to catch a flight in about 10 hours 💦 |
FYI noticed the fallback images for Security chapter don’t exist yet. It’s not ticked as done in first comment so may already be on your to do list, but it is published so thought best to comment in case you thought done. |
Who could pick up the SEO chapter? |
The format of these might be changing if #491 is accepted. So might be better to wait for a decision on that? Could do with more eyes on that if anyone else wants to help code review too? Then again it's backwards compatible and easy to convert from old format to new so could just work on visualisations and then convert later depending on decision on #491? |
@rviscomi any reason this is still open? Third Party chapter looks done, or are you planning on adding more to this? |
@bazzadp many of the data viz placeholders for the 3P chapter are commented out, but still outstanding. I need to chat with @patrickhulce about the data first. |
@rviscomi / @patrickhulce gentle nudge. Only see two comments about graphics for 5_11 and 5_12. We ever going to add those or shall we just say the chapter is as complete as it's going to get and close this issue? |
Sorry, this slipped me. I would still love to resolve the data viz for this chapter. @patrickhulce let me know if you have time to chat. Or if you're happy leaving it as-is we can close this out. |
Should we not at least add Figure 6 so the figure numbering is correct? Currently we jump straight from Figure 5 to Figure 7. |
I'd still like to get the data viz resolved but the results don't align with the analysis AFAICT, so we need to chat with Patrick to get that resolved before we're able to add new figures. I closed this since there was no activity and it's about 6 months overdue. |
All graphics in a chapter (charts, images, etc) should be manually wrapped in a
figure
element with a unique ID that is sequentially numbered. Allfigure
elements have afigcaption
that describes the contents of the figure, prefixed by the figure number.Interactive figures (embedded charts from Sheets)
Interactive figures should have a
visually-hidden
element for screen reader users. Level of detail here should be to convey the main visual takeaways of the chart but not overly descriptive. Add thearia-labelledby="fig1-caption"
attribute to theiframe
element and create a corresponding element to describe the figure.These figures must also have a corresponding anchor/image linking to a static version of the figure. They can reuse the same
visually-hidden
element for screen reader users. Images should have an explicit width equivalent to the iframe width.CSS will be used to ensure the interactive figure is shown to desktop users and the static figure is shown to mobile users.
Static figures (images)
Static images should be wrapped in an anchor tag to be expandable for users on small screens. Rather than a visually hidden descriptor images can simply use the
alt
attribute for screen reader users. Images should have an explicit width when possible.The text was updated successfully, but these errors were encountered: