Google’s Material Design Utilized in Mobile Web Data Visualization

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.

Gallery_Dribble_1

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.

Gallery_Dribble_2

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.

Gallery_Dribble_3

4 responses on “Google’s Material Design Utilized in Mobile Web Data Visualization

  1. Thanks for the awesome Helpful….

  2. It´s very inspirational. Thanks for sharing!

  3. Percobaan Pak Untuk mencoba apakah bisa berjalan

Leave a Reply