DEAR-DATA RECONSTRUCTION

date Spring 2017
course Information Design Studio 2 | Northeastern University
professor Mauro Martino

THE PROJECT

As a part of my masters program, I digitally recreated one of Giorgia Lupi's data drawings from the dear-data project. The goal of this project is two-fold: to better understand a data visualization through its deconstruction and reconstruction, and to increase my proficiency with D3.js.  I reconstructed Giorgia's week 08 drawing: phone addiction. Each line represents an instance she used her phone, grouped by the place or situation in which her phone was used. As a part of my reconstruction, I enhanced some elements of the design and added some animations and interactions. I find this project exciting and empowering due to the opportunity to delve into a project I admire and the amount I've been learning with D3.

To view this project, click here.

Giorgia's postcard:

DATA COLLECTION AND THE DESIGN PROCESS

In my Studio 2 course, my classmates and I split up the 52 weeks of data drawings and I focused on weeks 01–10. Out of this set, I chose week 08: phone addiction for four reasons: I was attracted to its radial forms, I wanted to learn how to implement this design in D3, extracting the data appeared manageable, and I had a similar project of tracking my media usage for one week.

I decoded Giorgia’s data using the key on the back of her postcard and created a dataset in Excel. Every row within the dataset was an instance Giorgia used her phone. I manually measured the circle locations on the postcard and recorded these locations with x and y variables. Although their locations aren't particularly meaningful (they were roughly ordered left to right by size), I initially aimed to recreate Giorgia’s exact drawing.

When implementing this visualization in D3, I learned how to radially place objects and how to create non-linear paths. The first phase of this project resulted in a digital replica of Giorgia’s work, from colors to symbols (see top-right image). The second phase aimed to enhance the visual and take advantage of its new digital form with animations and interactions. Some of my enhancements include:

  • implementing a more distinguishable color scheme
  • replacing the group symbols with more intuitive icons
  • highlighting elements when hovered over
  • adding an interactive key
  • introducing the visual information in waves with animations

AREAS FOR IMPROVEMENT

I ideally would like less text surrounding the visualization, which means I need to incorporate clearer explanations within the visual. On the same note, the attribute information has a lot of potential for enhancement. Currently, the attributes are explained when their text is hovered over. The explanation is a line of text that says how the attribute is displayed visually. I think this information could be placed inside the visual and can be better introduced with the initial animation. This project would also benefit from a responsive design for varying screen sizes.