What Am I Reading?

Following a legacy of turning everyday activities into data art

Final print layout of my data viz on tracking reading lists

I started from a fairly traditional technology and engineering background, nothing particularly head-turning. However, I have recently ventured into the world of design, by way of a Masters Program at the National Institute of Design in India. Both of my backgrounds ask for copious amounts of research and reading in order to stay up to date with highly competitive and ever growing fields of study. All that inherent need for staying on top of literature in my academic life, paired with my undying love for fiction, specifically thrillers (thanks to Agatha Christie and J.K. Rowling), means that I read about 3–4 books simultaneously.

With so many open threads, sometimes it gets out of hand to keep track of not only what I am reading, but also where I am (progress in terms of chapters, how much I have finished), different genres (which to pick next, What I have just read), etc. There are plenty of apps out there, sure, to record the progress a reader is making (Goodreads being one them) but I wanted to use this opportunity to push my design background to the fore and develop a creative framework that encapsulated an efficient and beautiful visual representation of my reading habits, with the depth to back. However, this idea first led to an existential question …

Can we, (or more importantly) should we, create a viz out of everything we see or do?

Well … I guess it’s a bit of a complex question, and I’m not sure I still have an answer. I went in thinking, “Here goes nothing.” I really wanted to combine my freshly learnt information design and D3.js knowledge in tandem with a topic close to my heart — reading — and see what came out as a product. Being unsure of how to handle this question, and seeing as I’m a mere mortal (read: beginner) in the realm of Information Design, I decided to go research what experts of the field were doing.

Giorgia Lupi is where I started. Her data visualization works are a visual treat:

• Nobels No degrees highlights Nobel prize winners, their age, and time they were awarded, as well as graduations and university affiliations.
• Painters in the making highlights the ages of famous painters when they created their masterpieces.
• From first Published to masterpieces highlights the time span between an author’s first publishing to their Modern Library rankings of their best novels.

I found inspiration in how clearly her work demonstrates the ability for a visual medium to convey thorough, extensive research. Along with the above selected works, I found this:

Giorgia Lupi’s Data Portraits at TED

Giorgia created this fun questionnaire that was to be answered by folks who attended TED, at the conclusion of which they would get a customized data viz badge that represented them.

I also wanted to look into the data sketches of Shirley Wu and Nadieh Bremer, two other inspirations. Nadieh Bremer’s visualization on Cardcaptor Sakura highlights the colors used in the Manga covers and the relationship between each character, their appearances throughout etc. Shirley Wu’s Four Years of Vacations in 20,000 Colors logged her own holidays, including who she spent time with as well as the colors in the photos she captured over time.

It’s here that I realized data was being used in many ways other than “capital-S Serious,” wide-scoped projects. I was convinced seeing the above that yes, one can have visualizations that channel a more fun energy borne from any data source, not all of which necessarily have to “change the world” or achieve some other grandiose objective. Data viz can sometimes just be for us or those around us, and that’s okay too.

So it was decided then — I too would foray into the world of information design through everyday activities and create a visualization of my reading lists at any given time.

After couple of hours into the topic, I quickly realized that what I was pursuing need not just be for me. It could be extended to see what my friends, family and colleagues were reading at a moment as well, turning our reading logs into a collaborative process. I decided I would use D3.js to make the visualization modular and dynamic enough for anyone to submit their data (what they were reading, plus progress and ratings) and convert their submissions into data sketches too.

I started my design process by looking for visual cues and parameters (such as length, progress, ratings, genres, types and status) that I would cover in this visualization. I’ve mapped out a rough model of my thinking below:

Parameters for the visualization

I needed to also order my data fields from most important to least in order to figure out what aspects to highlight and bring to the forefront in my viz. In my own reading experience, I sometimes (actually mostly) pick a book based on how long it is. Because of my commitments with other assignments and work, clear representations of page numbers and length are a must for me. More often than not, I also bias my picks on the ratings given to the book, whether from my friends or simply from online sources like Goodreads and Google Reviews.

I started to collect data from my friends, family and my own, and stored them in JSON/List format as shown below:

A sample data set

After the data parameters were finalized, I moved onto seeking out visual metaphors. I experimented with variations on a book shape, beginning with just the standard book spine, which resembles little more than a plain rectangle and a bar graph. As this was a project with a more personal and creative inspiration though, I was trying to move away from more conventional archetypes and geometries. I wanted to seek out true creative impact that would leave a lasting imprint on the audience, and for myself.

That being said, the key element of my visualization now hinged on highlighting the length, the summary of the ratings, and the progress made on the book by the individual reader. I settled on the following form factor, drawn in not by a closed book tucked away in a bookshelf but rather an open world that we as readers can explore:

An Opened book viewed from an angle as shown in the above picture, makes an Interesting Form.

So what happened next?

1. I thought the covers (both the front and the rear) can be played for their thickness, which could be loaded with what the user is rating it and what the Google/ Goodreads score is
2. Pages of the book were drawn as SVG lines, whose length and number would come together to represent the actual page length of the book.
3. I drew inspiration (imitation is the best form of flattery, I’ve heard) for color codes used to represent genres from Shirley Wu’s Film Flowers, where utilized the same technique.
4. I added a Semi-Pie-Chart at the convergence of the book’s spine to mark the reader’s progress.
5. A bookmark sticking out could represent the type of the book (i.e. traditional novel, graphic novel, other).
6. Lastly, I would need some sort of way to show the reader’s status (reading, finished, abandoned) on the book.

It all came together to produce this end product (and I must say that I’m proud of how it turned out, given my relative inexperience!):

Final Visualization

The visualization is combination of many elements, as I highlighted in my design process above:

1. The lines represent the pages in the book. A line at its maximum length represents 25 pages.
2. Below the lines, the spine of the book which is a half-cut-pie chart, shows the progress made.
3. Genres are color coded.
4. I used the idea of front and rear covers of the book to represent the ratings by the personal reader and by Goodreads, respectively.
5. The type of book is represented by the shape of the bookmark
6. Lastly a small dot next to the bookmark shows the status of the read-through, an idea I borrowed from Facebook’s online/offline chat status.

You can see an individual book’s pictorial representation in closer detail below:

Graphic for Woman in the window

As with any information design process, the next step was arguably the most critical of all, gathering feedback. I quickly generated the viz for a few of my friends who were available and discussed the outputs with them. Happily, feedback was mostly positive. Some even went on to say that this would function well as an in-app feature on Goodreads or Google Books itself, where a user could have a quick glance of their own and their followers’ picks. (I was honored by the very suggestion.) Another idea which came from feedback, in the spirit of what you’d expect from design students, was to have an A3 poster which would be pinned up in the studio I was a part of, every month, so all of us could follow and discuss each other’s picks.

However, it was not all positive. I realized the next step for me would be how I interfaced this viz with users, as the crude form of data collection was a sticking point in negative feedback. I do realize that the JSON structure can be initially confusing to folks who aren’t familiar with coding. As a part of the next iteration, I would like to develop a simple web based, form UI for easy entry and consumption of data.

But ultimately, this was still one of the very first steps in my foray into the world of data visualization (second, if I had to count). Is it useful to you? Does it inspire? Do you find it silly or frivolous, maybe? Whatever your thoughts, I would love to hear your views and suggestions.

The full size version of the visualization can be seen here.

Thank-you for going all the way through. I’m Abhilash, a student of National Institute of Design, Bengaluru. I’ve been learning Data Visualization and Design as a part of Information Design discipline. Some of my works can be found on my Behance folio.