Doing data visualization well on the mobile form factor is a challenge. Making a highly interactive data visualization that is also a web based application can be downright daunting.
Enter Google’s Material Design, d3.js, and a little Javascript. This demo web application uses many of the Material Design guidelines to create an intuitive, and interactive data visualization that allows a user to pin point specific data, zoom in and out, pan across and see detailed information – all with typical finger gestures.
The challenge in creating data visualization for such small form factors is that the typical design and interactive affordances used in a desktop application don’t work. On the desktop, users have a mouse, which can have pin-point accuracy. On a mobile device, users have a finger which can not be as accurate in selecting pixels. Desktops generally have much more screen real-estate to show data, mobile does not. So the challenge is how to present the same volume of data to users while allowing them to navigate that data, all on a smaller form factor.
The web application you see below is a step in that direction. You can view it live here.
