Dynamic Interactive Mouse Tracking Plots with D3.js

Fri 27 May 2016 by Eoin Travers

D3.js is amazing.

From the website:

D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualisation components and a data-driven approach to DOM manipulation.

This is a lot of jargon, but what this means is that D3 lets you take some data and decide what aspects of your website you want to correspond to what aspects of the data. In principle, this could be used to create almost anything, but what it's really great for is interactive data visualisation: your data dictates the size, shape, colour, location, and any other feature you could mention of the elements on your page, and the user in turn can interact with the data, in any number of ways.

I've spent a lot of my time worrying about time course data, and in particular about response dynamics and the mouse-tracking paradigm. There's no ideal way to plot mouse cursor data. You can show the actual path traced, but then you lose the time course of the movement. Similarly, you can show the x or y axis over time, but movement on the omitted axis can be important too. 3D plots are monstrous --- avoid them.

The obvious solution is to animate the data, and better still, to let the reader explore it over time, and that's where D3.js comes in.

A while ago, I asked a few colleagues to try a demo hand-tracking experiment I had built. On each trial, they pressed the start button on the bottom centre of a touch screen, revealing a painting in the middle of the screen. They had to press a button in the top left if they thought the painting was a happy one, and a button on the top right if it was sad.

These were the paintings:

Mona Lisa
Girl with a Pearl Earring
The Starry Night
van Gogh Self Portrait
The Scream
The Persistence of Memory

And here are the results:

Click here for the code, and to view in a separate page

What does this mean? I have no idea. I only wanted a simple, pretty-looking paradigm to try out the hand tracking setup, and that's what I got. But look at those pretty dots!