Richie Lionell
Jul 31 · 6 min read

By Richie & Pratap

‘The Humans of the Hackathon’ — created by Pratap, Richie & Sainath is a physical visualization of participation at the July
‘The Humans of the Hackathon’ — created by Pratap, Richie & Sainath is a physical visualization of participation at the July
‘The Humans of the Hackathon’ — created by Pratap, Richie & Sainath is a physical visualization of participation at the July hackathon conducted at Gramener, Inc

We’ve had the luxury of hosting a hackathon every month at Gramener (a data storytelling company) and in July we tried our hands at creating physical data visualization outputs. We’ve been wanting to create physical visualizations just for fun, for we believe that these often frowned upon “fun” activities could just produce the seed for your next big idea. A well-wisher on being told of our latest experiments wants us to plan for the installation of a physical visualization at their premises to create awareness on social issues. See? Anyone still complaining?

“The creation of something new is not accomplished by the intellect but by the play instinct.” — Jung

The benefits that come from creating physical data viz outputs are immense. We are accustomed to creating web visuals using libraries like D3.js & often get carried away by technical milestones. The creation of physical outputs, on the other hand, compel us to focus a lot more on the larger goal. Web or hand-sketched prototypes help identify patterns and give an early indication of which storylines would work as a physical output. The available resources & physical space help in making quick feasibility decisions & plan for alternatives. A physical visualization will have to speak for itself without the presence of a human narrator. That is why planning for text is crucial, else the physical visualization would end up looking pretty but meaningless.

Be clear with your goals

Like in any other visualization journey, setting a clear goal is crucial before creating a physical output. When you see a physical visualization, the natural tendency is to look for significance or ‘the story behind it’.

We wanted to tell a story about participation levels in the hackathon across different teams & locations. The data was available in csv format with the basic information — name, team, designation, role, date of joining, business unit, date of birth, reporting manager & location. A basic analysis of the data using Python Pandas & Excel conditional formatting gave us the high level summary we were looking for. We found that close to 45% of participants at the hackathon were colleagues who joined us in the last two years. Interestingly, we had more participation from the leadership team than from the managers (Perhaps they were busy with deadlines). Here comes the decision making part. What do we show? Just the summary? Or plot all the data points? Instead of showing only a summary of the numbers we wanted to tell a story by visually representing every participant in the physical output, plotting their location, gender, job title, team & tenure.

Richie walking through the ‘Humans of Hackathon’ story. 60% of the participants were from Hyderabad, India.
Richie walking through the ‘Humans of Hackathon’ story. 60% of the participants were from Hyderabad, India.
Richie walking through the ‘Humans of Hackathon’ story. 60% of the participants were from Hyderabad, India.

Create a rough plot as a precursor to the physical output

Once we had the clarity on the content, the next step was to choose a visual representation. A parallel coordinates visual seemed apt for the task, given its ability to display individual data points. Moreover, the parallel coordinates representation generally is a good fit as a physical output. Wanting to make sure we had a decent visual pattern, we created a parallel coordinate plot using Vega, chopping redundant variables & rejigging the order until we had what we thought was an impactful narrative flow. You can afford to change the order of attributes of a parallel coordinate in a web visual any number of times. Perhaps it’s a piece of cake using D3.js or Vega, but try changing the order half way through your physical output and you will end up frustrated, demotivated and tired. Therefore it was crucial that we got the order of attributes absolutely right before laying our hands on the physical resources.

Parallel Coordinates plot created using Vega
Parallel Coordinates plot created using Vega
Parallel Coordinates plot created using Vega

Customize your output based on resources & space available

Parallel coordinates was certainly a good choice, but did we have the right physical material to achieve the objective?

We picked a few rolls of yarn, 35 green board pins & 1 bamboo skewer.
We picked a few rolls of yarn, 35 green board pins & 1 bamboo skewer.
We picked a few rolls of yarn, 35 green board pins & 1 bamboo skewer. It took 4 hours to make our first physical output — a parallel coordinate visualization.

Let’s see what do we have here. We have beads, play-doh, board pins, color papers, charts, a whole bunch of other things … and Yarn! Yarn was just the kind of stuff we needed to create the physical parallel coordinates visual. Representing each person as a thread with the color of thread determining the location of the participant sounded like a good plan.

We originally intended to install the visual on a white wall but chose to use Pratap’s cubicle wall because of the option to stick board pins on the maroon fabric. The color of threads had to match the maroon background & we had to make sure we had sufficient lengths of thread to complete the exercise. Green board pins were chosen to represent the nodes and we picked a bamboo skewer to hold the threads from which they branched out to the first attribute of the parallel coordinate plot. The canvas was split based on the number of attributes used and also taking into account the space we would need for text. We began to cut a few equal length threads only to realise that the lengths varied depending on how far they crisscrossed under each attribute before reaching the final attribute. This wouldn’t have been that obvious during the creation of the same plot as a web visual.

Pratap & Sainath measuring space to accommodate five data attributes. We settled for six feet of width.

This estimation exercise helped us appreciate geometry and a sense of scale. On the web, we take these things for granted because of the availability of libraries, but while doing these things physically it gives a sense of how flexible one has to be considering the resources available in hand.

Invest in Time & Space for Text

When people pass by the cubicle they just need to glance at the text and physical viz and get a decent understanding of what it is about. Text (introductory notes, headers, annotations, etc) should always be planned ahead and not be an afterthought. Data vis work ought to be self-explanatory and in order to achieve that, we have to invest in space & time. Though we had planned space for the introductory text, we weren’t able to execute it for lack of time (that’s a shame!). Post-it notes and tiny chart pieces came in handy to label attributes and nodes along with the count. Adding the percentage of participation on the labels would have been very useful, but that was another miss from us. Though we invested in space for the text during the planning stage we did not give it the due importance during execution :-(

Doing physical data viz brings you closer to your data points

Richie would knot a thread around the bamboo skewer & read out every cell of data while Pratap wound the thread across the relevant nodes and took it to completion at the other end. This proximity to data threw a few ‘aha’ moments that either confirmed or challenged our biases. For example, we would say, “Ah! I thought we had more participation from old-timers.” or something along the lines of “Not bad. We have so many participants from ‘X’ team. I didn’t realise that.”

Siva, Sundeep (SVP, Product) & Anand (CEO) were the three executive leaders who participated in the hackathon.
Siva, Sundeep (SVP, Product) & Anand (CEO) were the three executive leaders who participated in the hackathon.
Feel the data — That white thread Richie is pointing to is Siva, Senior Vice President (Delivery). Siva, Sundeep (SVP, Product) & Anand (CEO) were the three executive leaders who participated in the hackathon.

We had a great time working together, understanding concepts & implementing them through the use of physical objects for a change rather than being limited by the use of a web-based tool or library. Of course, feeling every data point was an experience in itself.

These exercises that take place outside boardrooms & conference rooms in a calm and relaxed environment, create opportunities to discuss strategies & unearth opportunities that may never have seen the light of day otherwise.

What is the process that you follow to create physical visualizations? Do you see any merit in creating physical visualizations? Would love to hear your thoughts in the comments section below.

Nightingale

The Journal of the Data Visualization Society

Thanks to Jason Forrest and Allen Hillery

Richie Lionell

Written by

A sinner saved by the grace of the Lord & Saviour Jesus Christ. 'Soli Deo Gloria'

Nightingale

The Journal of the Data Visualization Society

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade