Register below to receive the source code for this article. Email *

Name * First Last

Website *

Organization *

Job Title *

Consent * I agree to the privacy policy. I understand this source code is for non-commercial use. *

There are not many examples of data visualization designed for the mobile form factor that take into account the fundamental differences between desktop UX and mobile UX. Most data visualization for mobile are just slimmed down versions of what we see on the desktop.

The additional challenge is making an interactive web based mobile application that is both highly responsive and shows a meaningful number of data points.

Enter Google’s Material Design, d3.js, and a little Javascript. This proof-of-concept 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 UX design 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.

This mobile app uses stock price data for a period of 2 years across 4 companies, totaling over 2,000 unique data points (we have tested the application with over 10,000 data points.) Great effort was put into optimizing performance with lightweight javascript and virtually no framework dependencies. The result is a web based mobile application that is nearly as responsive as a native application.