Visualisation Online Tools
1. Datawrapper
I opted for the colour blue trying to make the chart as simple as possible and cleaned the dataset. The X axis showcases the year whereas the y axis indicates the number of operational nuclear reactors. Additionally, if the user hovers over the chart they should be able to locate specific dates and numbers. Since it is a line chart, therefore harder to distinguish, I opted for a black background. Finally, I added an alternative screenreader description for maximum accessibility.
I chose countries with major differences between them from all over the world to showcase the variety. I also added the source, with the link as well as choosing the same colour used in the chart above.
2A. Infogram
For a better viewer experience I added interactivity hints, opted for a dark background that emphasises the bright blue. Following the blue dot the user may obtain more specific information.
Again, bright blue colour to be easily distinguishable, more specific information available once hovering over the chart and caption added for screen readers.
2B. Flourish
Throughout creating all of the graphs I tried choosing simple colours, creating a contrast between the brightest blue available and a grey-black background making it more accessible to people with visibility issues. Last but not least, I added an alternative hidden screenreader description and label to ensure accessibility.
2C. Comparison
- Smartphone: How do the charts from the different tools appear on your smartphone? Are there any problems?
All of the column charts appear correctly on a smart device. Flourish has the best presentation available for smartphones. On the other hand the other two web apps, Datawrapper and Infogram although they showcase all of the information, it is not as aesthetically pleasing as it appears to be clattered. When turned vertical on a smartphone, all the information is showed in a better form.
- Colours: How easy/difficult is it to change colours with the different tools?
Infogram had the best options and the most user friendly platform. Flourish was harder to work with because different colour options where found in different places depending on which part of the chart was targeted, making the process more confusing than necessary. Datawrapper, was somewhat easy lying somewhere in the middle.
- Text/labels: How easy/difficult is it to work with text/labels in the different tools?
Adding text and labels was relatively easy in all of the tools. The were all quite similar to use.
- Flexibility: How flexible are the tools? Can you make the changes you want to do?
They are all flexible, with Datawrapper being the most limited one in my opinion.
- Accessibility: Which different options for accessibility do the tools have?
Screenreader description and label are available but generally Infogram does not provide as many options for accessibility as the others.
Conclusion
What are the main benefits of:
- Datawrapper?
It is a good option for creating simple graphs, it does not offer as many options but is easy to use.
- Infogram?
Infogram had a variety of templates ready to use and easier to adjust to our needs. The graphs were easier to make since we only needed to click on the area we wanted to edit whereas on Flourish we needed to scan through the settings and test out which one fitted our intentions.
- Flourish?
Flourish offers clear instructions on how to use the website, providing a more user friendly experience. Additionally, the HTMLs published are smaller thus taking up less space when creating the final article.
Which one of the tools do YOU prefer, so far?
Infogram
Checklist – visualizations
All numbers double checked Done.
Headline/title Done.
Spell check Done.
Axis and legend titles Done.
Units Done.
Y-axis starts at 0 Done.
Conscious choice of colors – (explained on request) Done.
Source Done.
Instructions for use (when needed) Done.
Context or explanation (when needed) Done.
Byline Done.
Accessibility (contrast, caption for screen readers, attached table etc)(explained on request) Done.
Understandable for someone who sees the visualization for the first time (show it to someone outside the newsroom) Done.
Url with the visualization checked on a mobile device Done.
Geovisualization and maps
1A. Google My Maps
1B. Datawrapper
Again, used a shade of green/blue that provides contrast and can be seen even in black and white (for people with visibility issues such as achromatopsia). Also, I added the names of some countries in order for the data to be more easily understandable.
Google My Maps
I went for dark mode for greater contrast and added the description.
2A. Datawrapper
In both maps I provided a summary of what the map showcases in the description as well as an alternative description for screen readers. I chose a colour palette with bright colours so that it could be easily visible for all readers.
2B. Datawrapper
I chose a high contrast understandable colour gradient and provided a detailed description of the map. As always, an alternative description was added for screen readers.
2C. Flourish
I chose to display both the ages 0-14 and 65 +, added a hidden screenreader description and a thorough explanation of the map and how to interact with it.
2D. Maps/smartphone
Open the site (MIJ22) in your smartphone. Look at all the maps you have published:
Are they ok? Yes.
Can you see the tooltips for example? Yes.
Is there anything you have to change? Not as far as I am aware.
Describe your experience and how you solved the problems (if there were any) in your post at the website.
Although every map is responsive on a smartphone and the tooltips are visible, the interaction with the maps is not as easy as it is on a computer. Moreover, I had some issues displaying the percentages on the "Global population between 0-14 years old in 2021" map using Datawrapper, but I ended up fixing the issue manually. Every map follows the checklist.