OS Design Project: Understanding Coronavirus

Design Lounge
1

Just pushed an open source graphic novella on COVID-19:
understandingcoronavirus.org

Currently static.
CSS’ified at the end of this week.
GitHub will be expanded on here: https://github.com/goinvo/goinvo.com/tree/master/src/pages/vision

Need feedback, possible synthetic or near real-time data pushes on numbers effected (we’re not competing with WHO/Johns Hopkins dash/etc, and design of big poster versions or 8.5"x11" novellas.

Fire away,
Juhan, juhan@mit.edu

4 Likes
2

This sounds very cool! I’m sure there’s plenty of folks here that want to contribute (myself included)

1 Like
3

So it sounds like you’d like three things from designers:

  1. General feedback on: http://understandingcoronavirus.org/

  2. Specific designs/insight into how to visualise ‘near real-time data pushes on numbers ffected’ So this sounds like infographic style design. You want the numbers to be easily understandable by anyone viewing?

  3. Design of ‘big poster versions or 8.5"x11"’ using the current visuals? I assume the visuals currently used are somewhere in the repo?

2 Likes
4

Good breakdown, Eriol.

On #2, we need some assistance on How to See the real-time-ish numbers and How to Get the numbers from a reliable service (a CDC or WHO-based json service for example). The infographic style that embodies the current draft is the core direction (graphic medicine-ish, readable by someone with a 5th grade education, factually correct and corroborated by established health orgs, etc).

We will have the CSS-based version in GitHub by Friday, which should help lubricate assistance on the implementation-side.

2 Likes
5

Ok, site + github updated.

What would be hugely helpful is making the 1st graph of cases pseudo-dynamic… snagging a weekly or daily feed from a reputable source and injecting the latest numbers.

Static files (graphic novella, poster): https://github.com/goinvo/COVID19
The index.js file: https://github.com/goinvo/goinvo.com/tree/master/src/pages/vision/coronavirus

Otherwise, general concept feedback is always appreciated.

Best,
Juhan

6

Came across this extra source with 15 minute updates.
This article about mapping the outbreak also looks useful.

Loved your presentation and styling!

7

Hi @juhan!
This is an awesome project, I love the illustration and the way you’ve combined it with the text, it really breathes life into what could be a very dry topic and makes it much more memorable.

I had a bunch of fun yesterday afternoon remixing one of your diagrams - basically because I was disappointed to see that you had used a JPEG for the Timeline of the COVID-19 Outbreak, which is largely text-based diagram, and I wanted to make you an SVG version to show you how much better it could be if you tried using all the awesome power of SVG in future feature stories.

The original inaccessible JPEG image
The original inaccessible JPEG image2000×1327 194 KB

I know you’re familiar with all this already as you’ve already updated the site, but just a quick recap for anyone following along - what’s the problem with using a JPEG in this context?

  • Accessibility: the text content is completely inaccessible to screenreaders.
  • Mobile: the image cannot adapt to a smaller or portrait-oriented screen.
  • Crispness: when zoomed beyond 100%, in the compression is visible and the text is difficult to read.
  • Difficult to remix: (a problem for open source content like this!) JPEGs are not readily editable, and the public has no access to the image’s source files
  • Difficult to update or make/suggest improvements: Fixing a typo requires going back to the designer for a new export rather than just updating a text file. In the case of a historical timeline for an emergent and ongoing situation, I’m sure it’s in your interest to make updating as easy as possible.
  • File size: not really a problem in this case - the JPG is 172kb, which is totally acceptable. But as you’ll see, we can do far, far better than that.

I see that as of today, you have updated the diagram with CSS & HTML, which solves almost all of these issues… but it did mean compromising on your design layout.

Enter SVG!

Here’s a page containing an inline SVG version of the diagram:
Timeline of the COVID-19 Outbreak
The SVG maintains the original design and layout, but makes it…

  • Accessible: All text is actually text, ARIA roles have been applied, and screenreaders can navigate the content.
  • Mobile-friendly: well, this is just a quick proof-of-concept with only one breakpoint, so I don’t know if it will fit all devices, but if you rescale the image in a browser you’ll get the idea. With a little bit of javascript you can change the aspect ratio and layout of the image.
  • Crisp: it’s vector, you can zoom aaaaaaall the way in.
  • Remixable: the image is the source code is the image.
  • Updateable: typos etc can be fixed by anyone with access to the source code (this is a dat site, you can edit the source with Beaker)
  • Tiny: 7.4kb - and it could be smaller, but I prefer to optimize for human-readability :nerd_face:
  • Animated: see the little details on the last two timeline points. If you wanted to you could do an SVG draw-on animation of this diagram, maybe tied to the user’s scrolling, which reveals the points one-by-one. Is it a good idea? I don’t know, but you could do it if you wanted.

Looking through the feature article, there are a bunch more images combined with inaccessible text (also without any alt text descriptions!), and it seems that you could really benefit from using SVG in these cases. SVG is also a nice go-between format for designers and developers, as you can export it from Illustrator/Inkscape etc.
What do you think?

Signed, your friendly local SVG advocacy group :slight_smile:

1 Like
8

Agree 102% (make sure your temperature isn’t that high).
Sam, that’s an excellent recrafting as a SVG. Mind submitting it the github repo? Then you get credit, etc.

We updated the site last night with a few sections converted to css/html (vs just image/PDF). In our haste to get something out, we pushed a PDF. And as you correctly say, it ain’t the best mechanism for everyone to see/read/hear the goods.

Spot on feedback and edit. Keep it coming!

2 Likes
9

Sure!
I didn’t know where to put it to integrate with your site (I’m not experienced with React) so I just chucked the HTML, CSS & JS files in your design assets repo. I’m sure it will be trivial for you to grab what you need if you want to use it - there are a bunch of unused classes to group each text section with its timeline point, which will likely be useful if you want to animate or automate anything, otherwise you can happily delete them.

This kind of approach can be used on your comics content as well - you can embed an <img> in SVG, so you could maintain the beautiful sketchy texture of the drawing, but crop and layout the <img> and <text> content responsively in an SVG, so that each multi-panel scene can flow nicely in portrait and landscape settings.

10

Ok Sam, reviewed + merged.

Thanks a ton.

We’ll make sure to use this technique going forward.