Studio Session: Wireframing the components of your story

We have by now (a) critiqued a webpage, (b) generated an interactive info vis for the web, and (c) thought a little bit about the aims, section structures, and text component of our stories. Let's outline again the main components of the whole story:

For this week, let's start to develop ideas for items 4 and 5 on that list, and wireframe the whole story.

General feedback from Assessment 1: Anatomy of an infographic

In order to plan, wireframe and then prototype your items 4 and 5 above, we will need to spend some time going through the main points of improvement that the teaching team identified from your Assessment 1. By Anatomy of an Infographic, we mean all those components that absolutely must be present in any infographic or info vis story or composition. Making it aesthetically pleasing is a good aim, but the primary aim, and indeed the highest priority aim is to have an infographic that is not only easy to understand, but conveys complex information with the utmost clarity. Don't produce clutter, but sacrifice minimalism when there is a tradeoff between providing important information versus taking it away to make it all look pretty. That is the design challenge! Here is the anatomy (we take the graphic/representation elements for granted here - that is the core of an infographic of course, here we look at every other important component that also is of utmost importance):

  1. Mention data sources: All the data sources that you use must be explicitly mentioned in the infographic. Anyone looking at the infographic must be able to exactly identify where they can get the data from. For example, if you use ABS data, don't just say in the infographic "ABS Census Data", say "Catalogue No. XXXX, Australian Bureau of Statistics, 2011 Census". Provide a link. Sometimes the catalogue will have 20 tables of data. Say which table you used.
  2. Mention data building process: If you have generated your own data, the same principle holds - you must describe somewhere in the infographic, in your story text, or as a separate static infographic embedded in your text, how you obtained, cleaned or built your data. Its part of the hard work you are doing, it should shine, and not be hidden. It also provides data transparency, which implies that if someone else wants to reproduce the work, they can, and reach the same conclusions. It also shows you are confident about the conclusions you are presenting from the data. For example, if you're scraping data from social media or a website, explicitly provide every search parameter (like #hashtags), amount of data, where you mined it from, how you mined it, time stamps, any important aspects that you can think of as relevant.
  3. English, English: The text of your story, or the text annotations on your infographics, should be formal, grammar-checked, spelling-checked English. Aim for finesse of expression, not a nonchalant casual approach. Even when you're aiming for a target crowd of children or teenagers. My favorite example would be J.R.R. Tolkein's Hobbit: it is written for children, young adults, and adults alike, is fun (serious does not have to mean boring), is interesting, but also has a certain standard to it. For academic writing, ask for feedback constantly from us, in class or over email. The aim is build something that conveys information, it is a serious aim, the presentation must be professional. Aim to not use slangs or sloppy levels of English, instead aim for elegance. Make it classy.
  4. The importance of the process: Whenever you treat or change the data in any way, that process must be explicitly described. By explicitly described, we again mean that a reader should know exactly what you did, and given the data, should be able to reproduce your method. For example, given a data set if you compute an average, understand that the average can be constructed in several possible ways. Tell us exactly how you did it. For example, if I take income distribution data, and say I performed an average over the areas. This is half-information. I can mean either (i) I summed the incomes in one income category over all the areas and then divided by the number of areas, giving me the average income in each category or (ii) I summed the incomes in one area and divided by the number of income categories, giving me the average income for one particular area. Both will give you very different things. Therefore, be explicit about your process description. Even when you think it's obvious to you, it won't be obvious to another person who does not know anything about your work.
  5. The legend: This should describe what the visual representations mean, what line lengths mean, what line thicknesses mean, what colours mean, what anything visual means, how does it map to the numbers, how does it map to units of measurement. Again, aim for clarity. If you have three colours, and say "Highest", "Middle" and "Lowest", understand that it can actually mean anything. Instead be specific: "Density of population: highest X to Y persons/sq km., middle: ..." and so on.
  6. Text annotations and labels in the infographic: Highlight important parts of the infographic by putting in descriptive text labels and annotations. Use this feature to attract attention to important messages. When you're writing results, let the data and the info vis clearly support the claim you're making, and make the claim relating it back to the info vis. For example, from our tutorial today, we say "The figure above shows that rents have been increasing faster than incomes in the lower quintiles, thereby lowering the disposable income for poorer people. This can imply reduced access to other basic amenities and services like education, health or recreation, and therefore a lower quality of life."
  7. Focussing on the main trends and outliers: Discuss the main results, in short, precise and punchy bursts within an infographic. This does not have to mean sentences - you have the story text to do exactly that. This could mean just bullet points, or similar structures to bring out the main points. But, present the main trends. Present the outliers. Present what was expected. Present also what was surprising and unexpected. Not just in words, but with your data, process, and clarity doing the talking.

With those elements in place, we are now ready for some wireframing. Play with your data, and produce the following:

We are still not thinking at the code or the implementation details level. We are continuing to learn D3 and JavaScript in the background. But, we can use our existing knowledge of R (for data) and Illustrator (for layouts). We can do lots of sketching, rough sketching, develop to detailed sketches, and then to formal wireframes.


Sarkar, S. and Hussein, D.A., 2017, D3 Tutorials for Information Visualisation Design Studio, University of Sydney.
Email: somwrita.sarkar@sydney.edu.au, dhus4848@uni.sydney.edu.au