Dynamic Interactive Mouse Tracking Plots with D3.jsFri 27 May 2016 by Eoin Travers
D3.js is amazing.
From the website:
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:
And here are the results:
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!