Assignment: Responding to Resize

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:

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

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.