Hacking the Visual Norm

The interactive slides to my 40-minute presentation about creating better data visualizations

Posted: March 18, 2017-Likes: 0-Comments: 1-Categories: D3.js, Data Visualization, Interactive-Tags: D3.js, Data Visualization, Presentation
You are here: ...
Home / Blog / D3.js / Hacking the Visual Norm
Hacking the Visual Norm slides

I’ve been meaning to share this quick post on my new talk called “Hacking the Visual Norm” for months now, but most of my time these days goes into the year-long collaboration that I’m doing with Shirley Wu, called data sketches :) So that explains the lack of blogs and tutorials (although I’m keeping a list of ideas to tackle once data sketches is finished at the end of June)

I created the “Hacking the Visual Norm” talk for the Fronteers Conference, held in Amsterdam on October 6-7th 2016. During the talk I try to show several ways that you can go beyond the norm in the visualization of data. I use examples from both a business environment (things I made for Adyen) and personal projects. It revolves around “Combining, Re-using, Designing & Hacking” your visuals into something more effective and engaging.

The video of the talk

I first had a “try-out” at the Amsterdam UX camp weeks before the Fronteers conference (where I truly had to wing it since I only finished the slides 2 days before, I didn’t even know if it would take me 30 or 50 minutes to go through them all). But the video below is the first time I did the presentation the way I had intended it to go (minus the issue with the microphone several minutes in, hehe). A thank you to the people from Fronteers for making the video and posting it online ^^

The more technical stuff

You can find the slides to 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. Here is the corresponding Github repo with the code and where I explain a bit about the animations and bonus events that might not be apparent if you click through the slides.

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). Although everything should work in Firefox and Safari as well, it just looks best in Chrome.

I’ve created the presentation using RevealJS in which 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.

Development

Unlike last time (my SVGs beyond mere shapes presentation), this time I actually didn’t draw out that many slides. The reason was that this presentation was really about the design journey of a few projects. Therefore, I relied heavily on screenshots that I’d made during development. Thus instead I created an extremely rough Keynote presentation where I’d place the screenshots together with the message of that slide.

Only for the new slides did I take to my notebook again to sketch out ideas. I again used hexagons to switch between the sections/subjects that I was talking about. It’s always quite fun to think of somewhat funky and interesting looking visuals to place within the hexagons that still relate to the subject to come :)

Below you can see the result of the title hexagon slides. I re-used one (the pink stretched chord diagram thingy), but the others are all new (the first 4 even move! ;) )

The six hexagonal section header slides

Sadly, I don’t have that many bloopers to share of my coding errors during development, but I did manage to take a screencap of something. I still don’t know what’s happening really. In one of the first slides I change a donut chart into a radial bar chart. Originally the donut chart would start out as a rainbow, and below is where I’m trying to turn the donut slices into radial bars. But as I said, not quite going as I’d hoped here ;)

Radial bar chart blooper

Hope you’ll like the talk and message I’m trying to convey in the presentation. I have a few upcoming meetups/conferences where I’m giving the talk as well, with real-life demos (they’re not all in the online version). So if you don’t want to look at the video (or don’t have the time now), maybe you can catch me at a conference near you ;) (which also gives you the opportunity to ask questions face-to-face!)

Prev / Next Post
Comments (1)
  • Anonymous - March 21, 2017 - Reply

    Nicely put together. I had never heard of Voronoi diagrams before. I’m glad you explore, not only the visual design, but the experience of coding some of the algorithms and the mathematics behind your work.

    I look forward to more.

Add comment

twelve − 3 =