Observable HQ: dropdown input, d3 transition, and viewof

Over the past few days, I wanted to isolate my understanding of the relationship between the selection made in a dropdown form input and other cells which depend on that selection.

This exploration started with drawing a rectangle and using code from example notebooks with dropdown selections to cause a transition in the chart to occur (see Arc Diagram). One added complexity with Mike Bostock's Arc Diagram notebook is a timeout that's added which will automatically trigger a change in the dropdown selection. Originally this code block had a bug which caused me some confusion, but it has been a valuable learning experience: Mike Bostock commented on the bug and fixed the bug, so I was able to update my notebook accordingly.

In any case, contained in the notebook are three charts and each chart behaves different based on whether I refer to the dropdown form object by `myNumber` or `viewof myNumber.value` as well as where I make such references. In the first chart, I reference `viewof myNumber.value` within the update function and the chart updates as expected. In the second chart, I additionally make reference to `myNumber` in the initial definition of the rectangle, so the chart gets re-evaluted and it's corresponding update function never takes place. Finally, in the the third chart, I instead use `viewof myNumber.value` in the initial definition of the rectangle, so the chart does not get re-evaluated whenever a new selection is made. This allows the update function to trigger. See the notebook for more details.

I've embedded the dropdown and charts below, but I believe the true learning experience will happen by looking at the actual notebook and playing around with the code.


Popular posts from this blog

Getting to know... D3

Getting to know... Qt for Python

PySpark + Anaconda + Jupyter (Windows)