framework icon indicating copy to clipboard operation
framework copied to clipboard

Resize helper for plot functions with a view

Open zachbogart opened this issue 1 year ago • 2 comments

The resize helper example works for a Plot function that accepts a width and/or height. The helper should allow for the ability to resize and have access to a view, such as a tooltip mark where you can access the data on hover.

zachbogart avatar Apr 08 '24 20:04 zachbogart

Yep, I have a workaround in https://talk.observablehq.com/t/framework-using-resize-with-view/8895/3:

function valueof(element, initialValue = null) {
  return Generators.observe((change) => {
    const input = (event) => change(event.target.value);
    change(initialValue);
    element.addEventListener("input", input);
    return () => element.removeEventListener("input", input);
  });
}

Then use valueof in place of Generators.input:

const penguinChart = resize((width) => Plot.dot(penguins, {x: "culmen_length_mm", y: "culmen_depth_mm", tip: true}).plot({width}));
const penguin = valueof(penguinChart);

We should probably just change Generators.input (and by extension view) to work this way by default, possibly with a few more tweaks.

mbostock avatar Apr 08 '24 20:04 mbostock

Cool, that gets the job done. Agreed would be nice for the other view helpers to work that way by default.

zachbogart avatar Apr 08 '24 23:04 zachbogart