search

ooni / design-system

OONI Components design system
https://design-system-ooni1.vercel.app
Other
14 stars 12 forks source link

Data visualisation style guide #2

Open hellais opened 7 years ago

hellais commented 7 years ago

I have started working on a style guide for the data visualisations to be used in our reports, blogs as well as the rest of the online content. Some minor tweaking to the charts and style will probably be needed, depending on whether the content needs to be used online or for publication, but the general guidelines should stay true.

Motivation

As OONI one of the core "products" we produce is data. In order for this data to be meaningful and understood by a wider audience it needs to be visualised and presented in some way.

The goal of this style guide is to declinate our brand and identity inside of all visualisations we produce.

Style Guide

Below is the actual style guide. Feedback and comments on it are greatly appreciated:

ooni-datavizstyle guide

For the charts I also have made a dark iteration of them, of which you can see an example here:

ooni-datavizchart asn coverage-dark

@bnvk @elioqoshi @lindanlee @ebdet2002 I would really appreciate your input and feedback on this too! 🐙

PS. In case you are wondering what Osterlich and Bacteria are I recommend you watch the amazing 1940 Chaplin flick The Great Dictator

hellais commented 7 years ago

This article is an interesting read on data visualisations: An Economist's Guide to Visualizing Data and includes some of the rationale why Pie charts are bad. More on why Pies are bad here:

agrabeli commented 7 years ago

@hellais The style guide looks great! Thanks so much for working on this. Excited about the new graphs to come. :)

lindanlee commented 7 years ago

@hellais, the colors look really great. I love the fact that the colors are in theme with the OONI colors, and that the colors look fine to me with the charts that you have shown.

My initial impression is that it's really great that OONI has a strong brand presence and a great color scheme. I love the fact that you guys have a style guide. Overall, I think that the style guide is pretty strong. Anything that I'm saying below will be to make something already great really great, and to ensure that you're considering all the possible conditions where color will be used.

Some thoughts:

lindanlee commented 7 years ago

P.S.: I agree that pie charts are not bad, but often badly used. ;) I think the second link says, "The one single thing pie charts are good at is when you're comparing 2-3 different data points with very different amounts of information."-- which is totally true. My opinion is that the strength of pie charts are the fact that you can't really see the data, and it is the least distracting when all you want to convey is the fact that X was more than Y, without numbers everywhere.

P.S.S.: My least favorite chart in the world are word clouds. You need to filter out a lot of words out to get a good word cloud (i.e. a, the, I, to,..), but it's not standardized. It's never clear if the size of the space taken up or the size of the font indicates the importance/prevalence of the word--longer words look more important, or you need to distort shorter words. It's just never a win win. People argue the same point I made with pie charts and say "it's not distracting people with the numbers and conveys the general idea," but I can't get over wordclouds. :(

hellais commented 7 years ago

Thanks for the detailed feedback!

It's greatly appreciated.

Show examples of how to use colors to display different data. You did a great job of saying sequential and divergent, but explaining the two can help, and showing examples and counterexamples. Reiterate that the use of color should reflect what type of data you are trying to represent.

Yes, I agree that maybe adding some extra examples of usage of the colors (and charts) would be useful and also adding some examples of what is bad vs what is good.

I think though I will probably make more of these once I have built all the tooling around the charts as I am currently building them "by hand" in Sketch.

Data is commonly split into three categories: a) increasing values along a single dimension (sequential), b) diverging values around the center of a scale (diverging), c) discrete categories (qualitative). This color picker illustrates them.

I tried to explain this in simple words in the colors, section, but you did much of a greater job at it. I will maybe use some of your text for that.

I think it's good to have a third palette for discrete data with lots of categories (think of me trying to show 20 categories with only blue and/or orange--it's hard to tell because there's so many shades, and using only one color will make it look sequential when it's not, and using two will make it look divergent when it's not).

One of the points I was trying to make with the color palette is that if you need more than 5 colors to show different categories, then you should probably be re-evaluating the data visualisation and consider if colors are even needed.

I would argue that using colors to distinguish 5+ categories of things is not the best strategy, but maybe using just text or iconography is preferred. An example of this is the Bar chart with the blocked websites per categories. There iconography and text is used instead of colors.

The problem also becomes harder when you need to make them accessible for the color-blind for example.

But when it is necessary, guidance on how to pick additional divergent colors

I will consider this, though I would say that the current best practice should be that people planning on using different colors from these contact me 😛

be careful how colors interact with the background color (the example you have is fine, but maybe you can show examples where it is not), ensure it's colorblind friendly, and that the colors are distinguishable when you convert them to greyscale to print them out

I have tested all the scales, colors and charts in various combinations for color-blind safety using Color Oracle

kloesing commented 7 years ago

Wow, that's really an amazing guide. Really cool! Two ideas:

  1. In your color palettes for 2, 3, or 5 discrete values you have gray as one value. But gray stands out from the other colors, which is not always what you want to show. If you want to display, say, written and read bytes, you'd rather want to show them as light blue and orange. Whereas if you have OONI clients on 4 different operating systems and 1 line for "others", you'd want to pick for non-gray colors for the different systems and gray for "others". Maybe this means you need to find non-gray colors for the 2, 3, and 5 palettes and provide gray as optional color with special meaning as needed.
  2. Use more spark charts (http://www.fusioncharts.com/chart-primers/spark-charts/)! For example, each cell in your tables could contain a single colored bar with the length corresponding to the shown value.
lindanlee commented 7 years ago

Oh, sorry guys. I commented and didn't respond back to you guys.

Arturo: After reading your comment, I think that we were on the same page, and I'm not worried about the style guide. It's great that you checked the colors. The only thing I would reiterate I do think that you may want to pick some additional colors, for reasons that karsten's 1 reasons and my aforementioned above.

Karsten: thanks for your feedback! :)

hellais commented 7 years ago

Yeah, on the topic of colors I actually think I am going to go for another approach in that. I did a bit of study on the colors and developed something to programmatically create a color palette. I am not super convinced of the results (after having done some tweaking of various parameters) and may end up tuning some of them manually.

In any case the result of these experimentations can be seen here: http://openobservatory.github.io/design/ (click on the colors tab).

This data viz style guide is going to actually be part of the larger effort of coming up with a living style guide for OONI.

hellais commented 7 years ago

@kloesing

In your color palettes for 2, 3, or 5 discrete values you have gray as one value. But gray stands out from the other colors, which is not always what you want to show. If you want to display, say, written and read bytes, you'd rather want to show them as light blue and orange. Whereas if you have OONI clients on 4 different operating systems and 1 line for "others", you'd want to pick for non-gray colors for the different systems and gray for "others". Maybe this means you need to find non-gray colors for the 2, 3, and 5 palettes and provide gray as optional color with special meaning as needed.

This is a very good suggestion. I will probably add a note somewhere in the guide mentioning the special uses and meaning that is implicitly part of using the color grey.

Use more spark charts (http://www.fusioncharts.com/chart-primers/spark-charts/)! For example, each cell in your tables could contain a single colored bar with the length corresponding to the shown value.

I will think about maybe making some spark components if there are place in our UI that call for them. Thanks!

elioqoshi commented 6 years ago

@hellais do we plan this to be part of the design system and design.ooni.io ?

hellais commented 6 years ago

do we plan this to be part of the design system and design.ooni.io ?

yes