Hooking into SVG events and connecting to other cells

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!

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


to display the value.

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