ojs
ojs
ojs
ojs
ojs
ojs
ojs
ojs
Author
Toph Tucker
@tophtucker
Learned D3 at Businessweek, started using Observable to do my job at Kensho, took time off to write notebooks about Mayans and Galton, moved to San Francisco to work for Observable. Now work for it remotely from the Berkshires where my wife runs Avaloch.
Comments (11)
Visnu Pitiyanuvath
Jul 14, 2021ooh! maybe checkboxes instead of radio buttons? or maybe that's configurable via some "multiple: true" option?
Jul 14, 2021
also thinking this could be generalized somehow to graphs / circular graphs… 🤔
Toph Tucker
Jul 14, 2021ya i started to add a multiple option hang on …
Jul 14, 2021
mm multiple's gonna be a lil trickier bc w/ radio i can just brute set the value on the root node onInput but w/ checkbox i gotta maintain state in form-land and translate it back to the native javascript objects a la https://github.com/observablehq/inputs/blob/main/src/checkbox.js
Jul 14, 2021
circular! yeah ha like if it were a generator it could just keep next-ing the children or something so they wouldnt have to be finite?
Fabian Iwand
Jul 17, 2021I would recommend to wrap each radio+label label in a <label> (so that clicking will select it), and to limit subtree toggling to the arrow.
Jul 17, 2021
I see now that you're using <details> - in that case ignore the suggestion regarding the toggle.
Thad Kerosky
Jul 22, 2021Yes, this times out on large hierarchies. A lazy generator approach might be nice.
Fabian Iwand
Jul 22, 2021@thadk Can you provide an example? The right solution depends on wether it needs to handle many elements in a single branch, or many elements fairly evenly distributed across all branches.
Toph Tucker
Aug 6, 2021good point @thadk! i could try to rip off the standard inspector https://github.com/observablehq/inspector/search?q=yield
Thad Kerosky
Aug 6, 2021I finally put together an example. It's big 😅 https://observablehq.com/@thadk/phylogenic-tree-hierarchy-data
© 2026 Observable, Inc.