Excerpt
This is your first big foray into data-driven design. In the previous chapter, you were working toward building for the smallest screen (no screen), and then creating a basic experience. That experience has already begun to meet the classic definition of responsive design—that is, responding to the client’s browser.
However, having read and absorbed all the responsive data visualization tenets, you also know that ensuring client responsiveness is only half of your job when it comes to building data visualization. The other half is responding to your data set.
You are already closer to mastering this than you might think. After all, you’ve learned about building an API that is dynamic enough to spit out exactly the level of granularity you want. You know how to react to data changes by redrawing your chart (a refresher and much more on that in a few pages). You have a grasp of grouping data. And in the last chapter, you worked through an example of data layering.
Pretty good...but now it’s time to get serious.
Try it
-
Exercise One
Check out the code from the repository. It's a jQuery function that adds a group of elements to a page based upon values in a
JSONobject. Recreate the functionality usingD3instead ofjQuery.A sample solution is also given in the repository.
-
Exercise Two
Check out the code from the repository. It's a partially completed bar chart that renders correctly using
D3. It has some additional functionality to add and remove elements from the data set, but it is missing handlers forenterandexit. Your task is to implement that functionality.A sample solution is also given in the repository.