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.





Comments

Popular posts from this blog

Getting to know... D3

PySpark + Anaconda + Jupyter (Windows)