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

Post a Comment

Popular posts from this blog

Getting to know... D3

Today I was looking into ObservableHQ and their Quickstart page had many suggested resources. The second of these resources was titled "Learn D3." Since it's been several years since I've worked with D3, I felt it would be appropriate to go through it. In addition, at the time I thought the resource would lean heavily towards learning D3 within the context of an Observable notebook. Instead, the series was dominantly a comprehensive introduction on D3, delivered via a series of Observables, and occasionally touched on some of the benefits of using an Observable notebook. In hindsight, I should have expected the relationship between an Observable notebook and D3 to be more like that between a Jupyter notebook and a Python module: learning to use the features of Jupyter and learning to use a particular Python module are mutually exclusive activities. In any case, below you'll find my notes to each of the sections in the Observable series "Learn D3" by
Read more

Getting to know... Qt for Python

Image
I recently took a look at Dash which seems great for data visualization, but I have a project for which I'd love to build a user interface. I previously used PySimpleGUI and the result was to my satisfaction. However, there was something left to be desired. In any case, that brings me to Qt (pronounced "cute") for Python. Let's check out the documentation and see what we can do with it. Headings in this post follow the headings in the documentation. Qt for Python Quick start `pip install PySide2` Right off the bat. The `hello_world.py` seems more difficult to create something simple (versus PySimpleGUI ). However, I imagine all this complexity is what eventually enables a more advanced user interface (I later learn about QtQuick/QML). Remark: I encountered an error for which I tried various environment variable fixes. Eventually the solution which worked for me was this answer from stackoverflow. But I wasn't happy with just implementing the solution
Read more

PySpark + Anaconda + Jupyter (Windows)

It seems like just about every six months I need to install PySpark and the experience is never the same. Note that this isn't necessarily the fault of Spark itself. Instead, it's a combination of the many different situations under which Spark can be installed, lack of official documentation for each and every such situation, and me not writing down the steps I took to successfully install it. So today, I decided to write down the steps needed to install the most recent version of PySpark under the conditions in which I currently need it: inside an Anaconda environment on Windows 10. Note that the page which best helped produce the following solution can be found here (Medium article). I later found a second page with similar instructions which can be found here (Towards Data Science article). Steps to Installing PySpark for use with Jupyter This solution assumes Anaconda is already installed, an environment named `test` has already been created, and Jupyter has already
Read more