# viewof Plot

**URL:** <https://talk.observablehq.com/t/viewof-plot/7275>\
**Category:** Help\
**Created:** [November 12, 2022, 9:49pm UTC](https://talk.observablehq.com/t/viewof-plot/7275 "2022-11-12T21:49:10Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![MarioDelgadoSr](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mariodelgadosr/32/1828_2.png) [@MarioDelgadoSr](https://talk.observablehq.com/u/MarioDelgadoSr)\
**Post date:** [November 12, 2022, 9:49pm UTC](https://talk.observablehq.com/t/viewof-plot/7275/1 "2022-11-12T21:49:10Z")

</div>

Following the pattern in [Exploring viewof](https://observablehq.com/@tmcw/exploring-viewof#vector), this [notebook](https://observablehq.com/d/c4631d2d07b147bf) is an attempt to add _viewof_ functionality to a [Plot](https://observablehq.com/@observablehq/plot).

The _plot_ notebook cell does not give an error, but doesn’t dispatch the input event and value attached to the plot’s SVG rectangles…

Debugging shows the rect element does have the click event properly assigned to it:

 ![Capture](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/9/918c7d0b01cc16925203420d019758664f00ac36.jpeg)

Is this possible?

Use case is for filtering; a la [vega-lite](https://observablehq.com/@mbostock/observing-vega-signals).

---

<div class="post-metadata">

**Author:** ![mcmcclur](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mcmcclur/32/2364_2.png) [@mcmcclur](https://talk.observablehq.com/u/mcmcclur)\
**Post date:** [November 12, 2022, 10:28pm UTC](https://talk.observablehq.com/t/viewof-plot/7275/2 "2022-11-12T22:28:12Z")

</div>

When you define a cell using

```
viewof plot = ...

```

any other cell that depends on `plot` will react to changes in the value of `plot`. You’re not setting the value of `plot` in your code, though, you’re changing the value of `child`. You can still add the event listeners directly to the bars but should modify the value of `plot` and dispatch the event from there.

Putting that all together, you should have the following block in your loop:

```
child.addEventListener("click", (e) => {
  plot.value = aParm;
  plot.dispatchEvent(new CustomEvent("input"));
});

```

---

<div class="post-metadata">

**Author:** ![Fil](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/fil/32/207_2.png) [@Fil](https://talk.observablehq.com/u/Fil)\
**Post date:** [November 12, 2022, 10:31pm UTC](https://talk.observablehq.com/t/viewof-plot/7275/3 "2022-11-12T22:31:31Z")

</div>

To complement Mark’s explanation, here’s a code that just reads the index (i) of the rect and returns the associated datum.

```auto
viewof plot = {
  const data = [
    { x: "A", y: 20 },
    { x: "B", y: 30 }
  ];
  
  const plot = Plot.plot({
    height: 100,
    width: 100,
    marks: [Plot.barY(data, { x: "x", y: "y" })]
  });

  d3.select(plot)
    .selectAll("rect")
    .on("click", function (event, i) {
      plot.value = data[i];
      plot.dispatchEvent(new CustomEvent("input"));
    });

  return plot;
}

```

---

<div class="post-metadata">

**Author:** ![MarioDelgadoSr](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mariodelgadosr/32/1828_2.png) [@MarioDelgadoSr](https://talk.observablehq.com/u/MarioDelgadoSr)\
**Post date:** [November 12, 2022, 11:01pm UTC](https://talk.observablehq.com/t/viewof-plot/7275/4 "2022-11-12T23:01:45Z")

</div>

Thanks. That works quite well for the barY mark and a 1:1 reference into the original data. I think faceting would be challenging with this approach.

The logic was attempting to use the href (html anchor element) as a container and make the pattern applicable to all charts by referencing a generic ‘child’ object hosted by the href which has the associated data regardless of plot transformations.

Ultimately, a function that would viewof-a-fy any plot with hrefs formatted as in the example was the goal.  
Or more succinctly, make any plot broadcast the plot component a user clicks on; the href was being used as one possibility.

Any thoughts on that possibility?

---

<div class="post-metadata">

**Author:** ![Fil](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/fil/32/207_2.png) [@Fil](https://talk.observablehq.com/u/Fil)\
**Post date:** [November 13, 2022, 9:03am UTC](https://talk.observablehq.com/t/viewof-plot/7275/5 "2022-11-13T09:03:00Z")

</div>

My suggestion works with faceting, as _i_ is the index into the data.

Closer to your approach is Mike Freeman’s tooltip plugin—where the “title” channel (rather than “href”) is used to store the information that gets displayed on mouseover (rather than on click): [Plot Tooltip / Mike Freeman / Observable](https://observablehq.com/@mkfreeman/plot-tooltip)

And yes, ultimately we’ll want something native that allows the user to select/point/click/capture a subset of the data—with a click or a more complex interaction mechanisms (such as brush, lasso…). There are a few open issues already in the repo.

---

<div class="post-metadata">

**Author:** ![MarioDelgadoSr](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mariodelgadosr/32/1828_2.png) [@MarioDelgadoSr](https://talk.observablehq.com/u/MarioDelgadoSr)\
**Post date:** [November 13, 2022, 6:48pm UTC](https://talk.observablehq.com/t/viewof-plot/7275/6 "2022-11-13T18:48:35Z")

</div>

Ahhhh! 😀 The svg rectangles are created in data order, not the display layout order (left to right/top to bottom; or visa-versa). Therefore, you’re correct that the indexing into the data will work with faceting as well.

I’ve combined both your recommendation and Mike’s tooltip; with a d3.shuffle of the data to illustrate your explanation.  
See: [viewof Plot / Mario Delgado / Observable](https://observablehq.com/d/c4631d2d07b147bf#combination)

 ![Capture](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/e/e7d8be0e08e2633da700c86054612d276ce7c235.jpeg)