Building Responsive Data Visualization for the Web

Chapter 10 Code-Driven Visualization

Throughout this book, you have been moving steadily toward a code-driven, device-independent way of designing and thinking. On the visualization side, you have even built for users without screens. Now it’s time to bring together your knowledge of building resolution-agnostic web experiences with your understanding of clean, granular API construction in order to create lightweight, responsive data visualizations.

Unknown Inputs and Outputs

Four tenets have driven each step of your responsive design thus far:

• Be universal
• Be flexible
• Be economical
• Be specific

Those four principles had slightly different meanings when speaking to web design (Chapter 2) versus data visualization (Chapter 7). In dealing with both, you have had to come up with solutions to respond to (at the very least) the following:

• Screen size
• Screen orientation
• DPI
• Network speed
• Bandwidth caps
• Media type
• Content flow
• Browser support
• Touch and cursor
• Asset size
• Data specificity
• API granularity
• Data size
• Data complexity
• Data cleanliness

If you look closely at that long list of specific items, however, you can see that they fall under two distinct categories in terms of responding to a design:

• The user
• The data

In other words, every single thing that you can do to make your visualization more clear, more usable, or more communicative is a reaction to either the context in which the user is trying to consume it, or a change in the data being displayed.

In every situation, ...