How to use Graphic Walker in Observable

Community Help
1

Unable to use graphic-walker in observable notebook, my notebook demo

It seems it blocks some ability of styled-components that graphic-walker relies on.

graphic-walker is a visualization component that can make visual exploration with drag and drop interactions.

2

It looks like this script wants the container to be attached to the DOM. You can create a cell this way:

container = {
  const container = html`<div>`;
  yield container;
  gw.embedGraphicWalker(container);
}
3

Yield also resolves to the yielded value, so Fil’s example can be shortened further to:

container = gw.embedGraphicWalker(yield htl.html`<div>`)

If you don’t want to deal with generators, you could initialize gw via requestAnimationFrame:

function draw_gw(props) {
  const div = htl.html`<div>`;
  requestAnimationFrame(() => gw.embedGraphicWalker(div, props));
  return div;
}

Note that you should avoid using global selectors in Observable notebooks, including referencing elements by their ID, as modifying the output of other cells breaks Observable’s dataflow and may have unexpected results.