Assignment: Responding to Resize

Take your favorite visualization you're made so far on bl.ocks.org, fork it, and make it respond to browser resize.

You can use the code from Responding to Resize to listen for changes in browser size.

The main challenge will be to make your visualization into a function that can be invoked repeatedly. This is the first step towards creating dynamic interactive visualizations.

You will likely need to modify your code to use the General Update Pattern.

Please watch:

• The General Update Pattern
• General Update Pattern Special Cases
• A bit of background on these videos: These are first drafts of material for the D3.js in Motion course that we did not end up using. So there are references to "the previous module" and they are generally a bit rough around the edges - I apologize for this - but they do cover the main concepts of the General Update Pattern, and I hope you can learn from them.

See the following resources to learn about the General Update Pattern:

• selection.merge documentation
• Basic General Update Pattern
• General Update Pattern, I
• General Update Pattern, II
• General Update Pattern, III
• Responding to Resize
• https://github.com/curran/dataviz-project-template  <-- Complete solution example

Note: Blockbuilder has features of "side by side mode" and "go to fullscreen", which change the size of the running program. You can use these to test if your code responds to resize. These are the widgets in the upper left corner, below the search icon. You can also clone the Gist and do local development in a full browser window, which may be more comfortable.

Note: It is not acceptable to take the approach of removing everything from the DOM, then executing the rest of the same code from before, like this:

svg.selectAll('*').remove();

The point of this assignment is to learn and use the General Update Pattern. If you're familiar with React at all, the General Update Pattern is sort of similar to React's "virtual DOM diffing" strategy. The General Update Pattern is arguably the most difficult concept of D3, and will take some time to grok. It it also arguably the most rewarding D3 concept to learn, as it unlocks your ability to create performant interactive and dynamic graphics.

Good luck! Feel free to ask for help in the #help channel in Slack if you get stuck.