Hand-drawn style has never been so popular
When you think about any digital content, you might be tempted to associate it with some kind of programming skills. The last thing that would come to your mind is a designer/an artist that uses old-fashioned paper and pencils.
Why would you think that drawing with a pencil is outdated? I am pretty sure this will stand the test of time. Every data visualization designer should make her/his first prototype on paper. The hand drawn style, with its imperfections, always stands out and gives a personal and custom-made feel. My conviction is that this is the main reason why this style has gained popularity in recent years and why Gucci changed its logo to the handwritten style.
from Gucci’s creative director Alessandro Michele
Through history, numerous data visualization masterpieces were born when digital devices were not yet around. One of the examples is Du Bois who told the story of slave descendants living in Georgia through 60 handmade and unique infographics, drawn in ink and watercolored by his students. (If you are interested in seeing more of the old handmade visualizations then follow Jason Forrest.)
Dear Data is, without a doubt, the best known hand-drawn data visualization project of today’s times.
Last year Nadieh Bremer released her and I’m still amazed when I see this visualization. As a dog owner, this topic is something that is very close to my heart. Nadieh made imperfect sketchy graphs that feel as if they were actually coloured with pencil.
I came across this project again and was encouraged to make a similar design in Tableau. Who if not Tristan Guillevin was my partner in this crazy crime. This was not the first time when we worked together on a project but the first time when we built a visualization together.
Let’s see the progress:
Tristan: For people who know me a little, this is will not surprise them, I love the challenge! So, when Ivett, one of the most brilliant people in the Tableau Community, challenged me to do this, nothing could have stopped me!
Once I received the data from Ivett, I started to work with d3.js and rough.js to generate that idea of packed wines with different hierarchies. Here are a few pictures of that process, how we started with plotting all the single grapes, then adjusting and playing around with rough.js features:
Finally, after many tries, we finally get our first correct result:
The main idea to convert SVGs to polygons is to use the getTotalLength() function to know the total length of the SVG path, and then getPointAtlenght() to get the x and y coordinates of a specific point.
To get the sketchy effect in Tableau, a lot of points are necessary to create the lines. The main challenge was then to estimate how many points are needed to balance between having a nice sketchy look and good performance. In the need, we decided to have different numbers of points, depending on the level in the wine hierarchy:
The biggest circles are made of 4500 points, and the smallest, only a hundred. Rough.js allows us to play with the roughness and line weight. In our first attempt to convert the SVGs in Tableau, the sketchy effect was not visible:
In the end, we had to try and retry each configuration, for the different wine hierarchy, until the look was satisfying at every level.
Click here for the interactive version:
Do you want to learn more about this process? See you in London at #TC20. YAAAAY!