Preface

Data visualizations are the best way to understand complex information and data. The human brain perceives visual information easily; it can make connections and is able to understand the complete process easier than without visualizations.

I am always delighted with the positive feedback from users whenever they understand a complex system easily by looking at a data visualization, instead of going through explanatory text and raw data. With the power of the Web and modern browsers, I can share these visualizations with everyone and make them interactive and animated.

To power cross-browser interactive visualization, I didn't want any compromise with regards to performance, debugging, quality, and interactivity, which led me to SVG. After deciding for SVG, I looked for a framework for SVG transformations giving raw access to all its underlying standards while also providing a rich set of visualization features - the D3.js library provides all of these.

D3.js is a visualization toolkit that facilitates the generation and manipulation of web-based vector graphics and provides full access to underlying SVG standards. Moreover, animations and interactive visualizations change the way users perceive web applications, and D3.js offers everything you need to make a visualization interactive out of the box.

While this has been working for the last few years, I realized that users are increasingly accessing visualizations with their mobile devices, though mostly through smartphone and tables. On most tablets, visualizations looked good, though interactions did not work anymore. Smartphone users experienced this as well when they tried to zoom into a browser but it somehow interfered with the zoom of the visualization and randomly toggled interactive features instead. For me, this was the sign I needed to fix the problem.

With the rise of responsive web design, there were already plenty of ideas for creating cross-browser and cross-platform applications that adapt to a user's device, screen size, and resolution. Apart from this, modern browsers already provide solid CSS and JavaScript functionality to implement responsive designs for all kinds of web applications.

The only logical step for me was to combine rich tools in order to create responsive applications and introduce the same ideas into data visualizations. I want my visualizations to adapt to the user's device, screen size, and resolution while providing cross-platform interactivity for mouse and touch gestures. In this book, I will share my knowledge, experience, and best practices on responsive data visualizations with you.