Capturing People Through Data
As part of a recent hackathon organised around storytelling and data at Gramener, we thought it would be interesting to create personalised bookmarks that capture the unique interests and personality of our audience.
Data portraits are a well-trodden territory with many works from designers like Giorgia Lupi and Nicholas Felton setting a solid foundation to build upon. Giorgia’s Data Portraits project for TED is particularly inspiring and gave us the idea of creating a visual system that captures and reveals an evocative portrait of the participants.
This post will attempt at conveying the process behind creating a personalised data art piece and communicate the merit of sketching with code, particularly for creating live and interactive tools. A playable example along with its source code is provided as a starting point to explore and extend.
Process(ing)
Creative coding, or using programming for creative expression, is a particularly fruitful way for designers to create data-driven visual designs. The classic tool used by creative coders is Processing, a Java-based platform by Casey Reas and Ben Fry that allows rapidly iterating on graphics with code. Recently, the folks behind Processing have pooled in their efforts to create p5.js, a JavaScript library, similar in spirit to the original Processing platform, but web-based and thus easily sharable. p5.js was used for this exploration primarily to create a web-based data art tool.
One crucial aspect of in-person, creative coding is that the interactivity of the ideation process between the developer and the users results in iterations and increased engagement. The rapid cycle of iterations coupled with constant feedback allows for much more breadth of exploration that is challenging to imitate in a static medium.
The first ingredient is Data
In its essence, data art starts with data and creates a system of rules to generate aesthetically appealing patterns and visuals from the data. This is different from generative art which may or may not begin with real-world data. Using data as an essential component allows designers to tap an entirely new aspect of visual design where the focus shifts from creating one-off visuals to creating a process for generating a coherent set of visuals from data.
Our process began with listing down various sets of questions we could ask our audience. Given that the hackathon caters to a diverse audience with numerous interests and experience levels, we chose to keep the questions light-hearted and broad but unique enough to elicit varied responses. Some obvious choices were the name of the person, their interests, questions regarding the number of unread emails in their inbox, how often have they tweeted today and how comfortable they are in a social setting.
Sketching with code
After selecting the data, a simple sketch was set up to quickly try out various visual encodings for each piece of data. This phase took a bit of trial and error to arrive at something that was visually engrossing yet easy to comprehend.
For instance, the name is encoded as a triangular strip based on the ASCII value of the characters in the name. Each letter is translated to its ASCII value, placed on an x-axis position and connected together to create a strip. The color of the gradient is calculated based on the length of the name using the HSB color model.
Another example of visual encoding is the use of polygons to map the scale for different interests such as art, science or politics. The mapping is fairly straight forward, with the number of sides of the polygon corresponding to the selected value on the scale. Different colored polygons are used to distinguish different interests and laid out on a row under the person’s name.
Crafting it together
After iterating through the various visual encodings and finalising on a set that worked well together, the last challenge left was composing these pieces into something visually coherent and appealing. Spacing out the elements well, creating a hierarchy and avoiding clutter were key to creating a successful composition.
The final piece consists of a form on the left with the set of questions, a live canvas on the right which changes as the user enters and selects values on the form and a download button to download an image of the final bookmark. There’s a section with a description and legends on the side to set the context and help users decode the bookmark.
Outcome
You can play around with the final piece at gramener.com/dataimprint. The code for the project is available at github.com/gramener/dataimprint. Give it a whirl and let us know if you have any feedback or suggestions in the comments section. Don’t forget to share your unique data imprint with us on Twitter.
Storylabs at Gramener is an R&D space pushing boundaries to deliver data-driven story experiences you will cherish.
