Lessons learned from data sketches

A presentation highlighting what we've learned

Posted: October 14, 2017-Likes: 0-Comments: 1-Categories: D3.js, Data Visualization-Tags: D3.js, data sketches, Presentation
You are here: ...
Home / Blog / D3.js / A talk on lessons learned from data sketches

A blog about the new solo talk I’ve created recently that revolves all around data sketches, the dataviz collaboration I’m (still) doing together with Shirley Wu. In this talk I (but also we) discuss the lessons that we’ve already learned from doing 10 months of creating an elaborate data visualization a month. Highlighting favorite months of data, sketches, & code: what made them our favorites, the mistakes made along the way, and how we overcame them. Especially highlighting that many of our data visualizations had humble, ugly duckling beginnings, but that through many (embarrassing) iterations, we were able to produce unique and compelling results.

You can find the slides to our 30-minute duo talk here and the slides to my 40-minute solo the talk here. It might take ±10 seconds to load since everything is loaded at the start. The reason for this is that I didn’t want any lagging to happen during the presentation itself and on a local host it loads in 1-2 seconds. Please look at the slides in Chrome, preferably at a resolution of 1920×1080 (at very different resolutions the text sometimes seems to “twitch” when you go to a different animation/fragment within a slide).

data sketches, a year of exotic data visualizations

The video of our duo talk

Shirley and me thought it would be amazing to present our lessons learned in a talk at OpenVisConf, since that’s where the first seeds were sown for data sketches just a year before. Luckily, we had the honor to be chosen to speak at the 2017 conference! We slowly started brainstorming about the lessons that we had learned and wanted to share with our audience. But also who would “lead” each lesson, because we could often both share a different story on how we’d separately learned the lessons.

Thankfully, I was in the US 3 weeks prior to OpenVis, because I was speaking at SmashingConf SF at the start of April. Although it was during the final week, when we were both in New York, that we really got to work on the “speaking together” part. Locking ourselves up in my hotel room for 1,5 days and getting our act together and practicing speaking together (to see if we weren’t going way over the allotted 30 minutes, which at the start we definitely were).

And as last year, OpenVisConf was an amazing experience and we loved speaking about data sketches amongst so many fellow dataviz lovers :)

The video of my solo talk

But after about a year of “going around the conference circuit” with my “Hacking the Visual Norm” talk, it was time I created a new talk with lessons learned from that year. Well, practically all my free time had gone into data sketches, so it only made sense to me that I’d extend the talk that Shirley and me did together into a 40-minute solo talk. I had enough lessons and material to share :)

I first did this talk during the Frontend Conference in Zürich on August 31st, 2017. The first time I do a talk I’m always even more crazy nervous than normal. And funnily enough, I was convinced that I was supposed to speak on the 2nd day of the conference. So I stayed late for the speaker dinner and enjoyed myself. After finally getting to my hotel room and checking out the program folder in my speaker bag I almost got a heart attack when I was that I was speaking the next day, or at that moment, in about 8-9 hours!! And I really had calculated on having that extra day to practice some more. So that was a night in which I slept exceptionally poor, due to my nerves being flared up even higher. Thankfully, on stage I managed to give the story that I intended, without forgetting any major parts ^_^

Lessons learned during data sketches

As said before, this presentation revolves around the lessons learned from doing an elaborate data visualization each month. Each of them is based around one of the three pillars that we use to write up each month: the first 3 lessons are about data, the second 3 about sketching and the last 4 (I couldn’t choose ;) ) are about coding. During the talk I explain each lesson with one or more examples, but in general, the lessons that come to pass are

data sketches - intro slides

Data can be found in a myriad of places & ways

and it will practically always require manual adjustments
data sketches - data lesson 1

Get a feeling of accuracy & completeness of your data

take sums, counts, etc. and compare this to common sense or a different data source
data sketches - data lesson 2

It’s OK to precalculate fixed visual variables

not everything needs to be done in the browser / on the fly
data sketches - data lesson 3

Design with code

the actual data has such a great impact on what looks and works best
data sketches - sketch lesson 1

Sketch the rough visual shape to catch thinking errors

don’t just go straight from idea to computer
data sketches - sketch lesson 2

Try to add extra layers of detail to the design

to give your data & story more depth and context
data sketches - sketch lesson 3

Remix what’s out there already

no need to always start from scratch, even when creating something “new”
data sketches - code lesson 1

Embrace your tool’s advanced functionality

for truly unique results (& love  SVG paths)
data sketches - code lesson 2

Learn to  math

and especially geometry (yes, not kidding)
data sketches - code lesson 3

The other stuff matters too

to increase delight & engagement
data sketches - code lesson 4

And for the final ±10 minutes I dive into the benefits of doing a project together with someone else, my favorite 3 months from Shirley and finally the last slides that quickly goes through several of my “blooper” screenshots ;)

data sketches - final slides

Sketching out the slides

As usual, I like to create mini sketches of my slides before I actually start to build them. And that’s mainly because I build my slides in RevealJS and many of my slides involve some kind of animation sequence / interactive visualization. So I really want to figure out beforehand what I’m going to do in each slide, which animation steps there will be, before I spend hours and hours into building it. With RevealJS each slide can sort-of be seen as its own webpage. I’ve written about my reasons for using it (and tips) in a previous post.

Below you can see a collection of all my slides drawn out in the mini moleskin that I carry with me at practically all times :)


Because the solo version of this talk came about across almost 6 months, I can’t quite remember the details, but it appears that I don’t have that many bloopers to share of visualization gone wrong during the creation phase. It could be due to the fact that this time, all the visuals in the presentation already existed in their final forms on data sketches. Therefore, I only had to slightly “reverse engineer” them for some of my slides… I’ll try and make more screenshots of my (hopefully) next talk!

Blooper image from my Lord of the Rings visual
Blooper image from my royal constellations
Prev / Next Post
Comments (1)
  • wenhao - November 12, 2017 - Reply

    Hope to follow your proejcts! So cool!

Add comment

9 + 11 =