Hooking into SVG events and connecting to other cells

Community Help
1

I am totally new to Observable. Forgive me for what may be a simple question that is documented elsewhere, but I am unable to find an answer.

I have made a fork of the hierarchical edge bundling graph here: Biographical Influences / thainenorris / Observable (observablehq.com)

I would like to display the hierarchical tree data in a cell outside the graph when the user clicks on one of the labels. I can see how the mouse enter and leave events are handled within the graph code itself, but I do not know how I could hook an event up within the graph code that would talk to another Observable cell or expose data to it.

Any guidance would be most appreciated!

2

There are two options that utilize keywords which are unique to Observable:

1. mutable

Define a mutable cell:

mutable clickedData = undefined

Then in your chart’s click handler, assign the node data to the mutable cell:

function overed(event, d) {
  // If we want to reassign the cell value, the name
  // has to be prefixed with "mutable" again.
  mutable clickedData = d;
}

2. viewof

Your cell can have both a DOM output and a value, if you prefix it with [viewof]. You can update the view’s value this way:

viewof chart = {
   // ...

   const view = svg.node();

   function overed(event, d) {
      // For viewof cells, Observable's engine (the "Runtime"), checks the "value" property.
      view.value = d;
      // This tells Observable that the cell has a new value.
      view.dispatchEvent(new Event("input"));
   }

   return view;
}

The value can be referenced in another cell by leaving out the “viewof”:

clickedData = chart

Note that you don’t have to name this cell. Instead you could also simply create a cell containing

chart

to display the value.

3

Thank you! I think this has helped me get under way.