What do you get when you mix memories and feelings from your life with Silverlight 2? … a personalized data visualization experiment that you can learn from. "40 – My Life in Silverlight 2" is a unique memory map of my first 40 years. It's difficult to capture in words what the application is, so the easiest thing to do is to watch the 2 and a half minute video that I created for it. For those of you with more time on your hands and who want a bit more detail, continue reading!
When celebrating my 40th birthday late last year I was reminiscing with my family about the things that have happened to me, the people I've met, etc. I wanted to capture that moment of remembering, of feeling. Each time I thought of something that had happened in my past I felt something. Some memories made me happy … others made me sad. It felt real. It felt authentic. It felt like me.
A couple of months later I found myself needing/wanting to learn Silverlight 2. My company has been doing a lot of Silverlight work lately and I always learn better when I have something to work on. And the only time I really find the time to work on something outside of work is when I'm interested in it. These things came together in the "40" application.
Each circle represents a specific memory … when I met my wife, when we got our new puppy, when I went to London, etc. For each memory I keep track of the basics: title, story (more detail of the memory), month, year, etc. I don't keep track of a day because, frankly, for most of my memories I don't remember exact dates. Perhaps that's part of turning 40. J
I do keep track of one more thing for each memory … how I feel about the memory now when I think of it. I also keep track of how strong the feeling is. I think this is one of the unique parts of the application and makes the visualizations more compelling. I like to think it adds some depth to the data. In the timeline visualization above, each the color of each memory represents the feeling (happy, sad, or neutral). The size of the circle shows how strong the feeling is; the larger the circle, the stronger the feeling.
The circular timeline shows the same data but in a different way. The center of the circle represents the year I was born and the outside is today. Going around the circle are the months of the year … 12 at the top, then 3, 6, 9, etc … like a clock. Because of that, I was able to loosely associate each quadrant with a season (winter, spring, summer, and fall). It's this circular view that surprised me the most. Once I added the memories to the application, I found that I tend to have a lot of memories that occurred during the summer. Learning more about myself was one of my goals in building the application.
Before this app my experience with XAML was with WPF. I was fortunate enough to do some development on the Family.Show application that Vertigo built. WPF is so feature rich that I was reluctant to use Silverlight at first. After building 40, I'm impressed. While the features in Silverlight 2 are a subset of what is in WPF, it's a pretty nice subset … built-in controls, styles, data binding, etc.
The part I wasn't sure about was creating the visual representation of each memory. Creating visual elements dynamically in WPF is easy, but doing the same in Silverlight 1.0 wasn't so great. I wasn't a fan of creating large strings of XAML in Javascript. In Silverlight 2 I create the ellipse objects that represent the memories in C# when I load the form. To display them, I animate the opacity of each one. I created a storyboard in XAML and then use that same storyboard to animate each ellipse sequentially. I could have dynamically created a storyboard for each ellipse but because I wanted the animations to run sequentially, one storyboard was enough. In the storyboard completed event, I start the animation for the next ellipse. Memories fade in one at a time, just like they happened in my life.
I just started reading Ben Fry's new book, "Visualizing Data." In it he talks about the seven stages to visualizing data: acquire, parse, filter, mine, represent, refine and interact. While the stages themselves are new to me, I realize that I went through a similar process in building 40. The refine stage really stands out to me. It was a very iterative process, adjusting and tweaking how I represent each memory, the timelines themselves, etc. At one point I also showed how well I remembered something by adjusting the opacity of the ellipse. In the end it seemed like this was just too much to take in and I thought it detracted from the display so I made the opacity of each ellipse the same.
While my data set was small and at first glance appears to be without much depth, I believe the personal nature of it provided depth. The visualizations are meaningful to me because the memories are mine. Applications I've built in the past are not usually for me. 40 is an application for me. I built it so I could learn about technology and learn more about myself. Once I finished it, I discovered something else. I wanted to share this personal map of my life with others. If you've watched the video and read this post, thank you. Creating 40 was a lot of fun. It looks like I have another memory to add to my timeline!