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);
}
1 Like
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.

2 Likes