-
Notifications
You must be signed in to change notification settings - Fork 12
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
Data visualisation style guide #2
Comments
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. |
@hellais The style guide looks great! Thanks so much for working on this. Excited about the new graphs to come. :) |
@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:
|
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. :( |
Thanks for the detailed feedback! It's greatly appreciated.
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.
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.
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.
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 😛
I have tested all the scales, colors and charts in various combinations for color-blind safety using Color Oracle |
Wow, that's really an amazing guide. Really cool! Two ideas:
|
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! :) |
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. |
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.
I will think about maybe making some spark components if there are place in our UI that call for them. Thanks! |
@hellais do we plan this to be part of the design system and design.ooni.io ? |
yes |
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:
For the charts I also have made a dark iteration of them, of which you can see an example here:
@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
The text was updated successfully, but these errors were encountered: