Add user input to existing graph data

Hi,

I’m wondering what the best method is to accept user input, and to add that user input to already existing data that is used to build a graph. Linked below is a fork of the main D3 force-directed graph notebook, with it’s only addition being a text entry box at the top. This is a simpler example of a problem I’ve been having on a separate notebook - how do I get the new data the user has generated into the existing dataset? I’ve found that a naive data.nodes.push() does not work. I’m not sure if there’s an easy solution that I’m missing, or if I need to do a large rewrite of most of the notebook’s structure.

Any advice is appreciated!

EDIT: The notebook linked here now functions as desired. If you have any ways it can be improved, feel free to voice them here or in a suggestion on that notebook.

https://observablehq.com/@rlesser/add-to-force-directed-graph

Here’s one approach (I’m curious to see other suggestions as well since I’ve been relying on this pattern in some of my other notebooks e.g. this port of Harry Stevens’s block " “Force Update Pattern” and the topmost svg in my “Union find” notebook):

Basically I just merged addToData with the name input and then I created new cells for the nodes, links and simulation objects which reactively update when name changes. This requires extensive use of Observable’s special this value so that these cells can build off of their past values.

2 Likes

This seems like a promising method! I’ll give a simple version of that a shot in the notebook I linked in case others run into this in the future. Thanks for the help!

1 Like

I’m glad you found it helpful! Looking forward to seeing your simplifications.

1 Like

I’ve managed to get the above notebook functioning, so that new nodes can be added from user interaction. There is almost certainly still room for improvement, so if anyone has any additional feedback on it, they can use this thread or put a suggestion on the notebook.

2 Likes