Excerpt
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, responding has not meant assuming that your design is going to be a pixel-perfect match of some Illustrator mock-up. Instead, you have seen the need to adapt, resize, and reflow your design in order to best fit within a multitude of limitations.
That is, you have relied less on static assets, and more on dynamic code-driven solutions. Before moving forward, take a moment to review just how you’ve responded to each of these two unknowns.
Responding to the user’s context is the core of not only responsive data visualization, but responsive web design as a whole. That’s why so much of this book isn’t strictly centered on data. If you think of your visualization as a simple container, then there is no reason to treat it any different from a paragraph of text, or an image.
In this sense, you can think of designing for the reflow of a visualization in the same way that you would for any other content. It needs a certain amount of space, and it lives within a certain container. The difference is how you implement your responsive techniques.
Responding to the data is an unknown totally unique to data visualization, and what makes it such a more complex topic. There is no concept of a blog post’s content changing because a user decided to filter down to only words that begin with the letter W.
This concept of responding to data is what makes your visualization fully responsive. If you were to simply scale a visualization at different viewport sizes like an image, you would still be more responsive than a fixed-size website, but you would not be responding to all of your inputs. Tailoring the display of your data to the complexity and size of the data itself is perhaps more important than tailoring for the screen, as it is a change driven by the content itself. That is: by responding to data, you are easing the efficiency and effectiveness of understanding the data.
Try it
-
Exercise One
You’re going to do a responsive retrofit on a visualization. It’s a listing of a company’s stock price as a series of bar graphs for each day. If you remember from the beginning of this book, that means you’re taking an existing desktop site and using responsive techniques to make it work at least pretty well on smaller screens.
Check out the code from the repository. Try going at it with the following techniques:
- Only resize the visualization once. Then, instead of focusing on the
D3-created visualization, make the rest of the page responsive. - Now layer in responsive data visualization techniques using the repainting methods you learned in this chapter.
A sample solution is also given in the repository.
- Only resize the visualization once. Then, instead of focusing on the
-
Exercise Two
This exercise uses the solution to Exercise One from the repository, but with the addition of a button that swaps out a much less populated data set. Do the work to make this solution responsive to both the user and the data set.
A sample solution is also given in the repository.
-
Exercise Three
The code for exercise three can be downloaded from the repository. It's simply the data set and boilerplate
HTMLpage withD3andjQueryimported.No sample solution is given here, but you are encouraged to create a pull request to show your own solution.