Visualizing… stuff

This post is a little ranty as I think things through…

My copy of Visualize This by Nathan Yau came almost too late. I cracked open the book, with a growing interest in creating better visuals. And there it was: a common mistake that’s made in visuals, and I’d just made it.

I thought maybe I was really clever, but no… so, I had to go back and re-do my visual. Looking through Nathan’s website, I came across this project, with visuals covering the sale of wines. I wanted things to have a purpose in my own visual, but I found these wine graphics… interesting.

Before I get back to my own project, I have questions about these examples.

Let’s go, graphic by graphic. I won’t copy the content from Dr. Howard’s website, but feel free to look it through then come back.

  1. Wine Industry Structure ([link]( Why are those designs the way they are? They’re pretty, like little flowers, but I’m not sure I understand the arrangement or patterns. I’m suspecting Tufte would be critical.
  2. US Wine Market Share ([link]( This one is really nice and visually says something: It shows the breakdown of brands by larger firms. While Constellation has a lot of brands, The Wine Group has more of the market share.
  3. Top 10s Good old bar charts work here to show us percentages, but the scale has to be taken into account. Why not use pie charts? And why not offer more information, per chart, which I think would be interesting? For instance, in the top 10 wine firms, could we use color to denote their earnings (if known)? That would be interesting, if the top producer wasn’t the top earner. As a case in point, [Apple by far make more profit than other phone makers](, but not necessarily the most number of phones. For the 10 varieties, why not color the bars to represent red/white wine? You have to know the varietal colors by name in order to answer the question: what sells more, white or red? And for places of origin, is it fair to count one state versus another country? Michigan looks big in that graph, say, versus Australia. It would be interesting to add another element which showed that region’s total world output, so we could see how Michigan’s sales were skewed (by Michigan wines, I presume).
  4. Top Wine Firms and Brands. ([link]( I cannot find an explanation of the colors used in the grape clusters. This is an interesting way to present the information, but so much more could be done. For instance, we could scale the grape size by the percentage of the firm’s total output. What do the color differences mean (please, don’t tell me it was aesthetic!)? If we’re going with grape and wine shapes, we could show the percentage of the firm’s output in comparison, by dripping wine into glasses of the same size, and use the amount of wine in the glass to draw comparisons.

I guess my own aesthetic is closer to the style we see in infographics. I have used the Cool Infographics website for inspiration before, but now thinking about large pools of data, I’m more inspired to see what I could come up with. One interesting graphic because of its density is the History of Prime Time Television. While so many examples are examples of good, approachable graphic design, many devote more space than necessary to a limited set of data. My aim is to show more information in less space.

So what was I trying to do?

I had this idea to try and visualize some data I’ve been keeping on the sidebar on my blog: places I’ve either spoken or presented. There’s several data points there:


  • location of event,
  • size of audience,
  • topic,
  • kind of audience,
  • date of event.

How could I show these?

I decided the topic wasn’t up for graphical display, each one was unique. This example does call-outs, but most are very short. In the back of my mind I remember Tufte telling us that sometimes, a table is the best tool to show data. So I accepted the fact I might include a table.

Screen Shot 2013-03-11 at 9.06.58 PM

But the rest of the information might be ripe for visualizing. My tool is Adobe Illustrator. Two years were represented in my data, as my 2013 event was canceled due to snow. So I had two years to show. The kinds of audiences were either parents or educators. For dates, I either had specific dates or month and year. I could lose the date if I still had the months. Location suggest a geographic map, but then I began thinking about these locations. Was the actual location important? Or how far away they were from my home?

So I collected:

  • size of audience (people),
  • type of audience (parents/educators),
  • distance of location from home (in miles),
  • month and year of event.

For the months, I divided my visual in half; on the top represented 2011, and on the bottom, it represented 2012. I used 24 “wedges” by creating a pie chart with different colors. I expanded these so that 12 appeared on the top for the 12 months. 12 appear on the bottom of the same months in 2012.

For the size of the audience, say it was 25. I made my bubble 25px by 25px in size. This is where I went wrong. Yau suggests making the area of the bubbles related to the variable, not the diameter. When I did this, I took the square root of my audience sizes, but then the resulting bubbles were too small. I scaled them all by 4, and I could have gone farther.

For the distance, this is how far away from the center point the bubble is placed. I created a scale and did my best to eye-ball and use rotation of the scale to get things right.

Screen Shot 2013-03-11 at 10.18.37 PM

I’m looking forward to feedback on my visual. It appears on pp 18-19 of my leadership report. I think the solution I came up with uses several axes without using 3D and without getting too cluttered. The use of transparency was required due to the close proximity of several bubbles. To make this stronger, I think making it interactive would be the next step: hover over a bubble and it will give you more data about the event: title, actual number in the audience, and physical location. The need for an additional table would be moot.

To do this, the easiest tool might be Flash to keep the vector-art aesthetic, although it’s been too many years for me to be conversant right away on doing this. The modern way would be to put this all together using CSS (cascading style sheets) and to use a little Javascript (read: HTML5) to create the animation and interactive components. This tool makes the animation simple enough but I am not confident the interactive components are as simple. Another method using the same tools would be to “flip” the bubbles over, to see the titles written on the backs.

At the end of the day, the creation of infographics continues to interest me. I look forward to seeing what might be worthy of presentation in my analysis of my project in EDLP 713 and seeing how I can improve my first go at visualizing data.


Leave a comment

Filed under Learning Reflections

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s