This message was deleted.

I like this idea. It's also similar to how geographic data are often rendered in a map, where you have a tiny 'overview' window showing a larger area to orient viewers.

That is cool. It would be super neat to have Plots as tooltips too (once we have tooltips)

You could approach both these problems using CSS layout techniques. Here’s an example that creates an inset: https://observablehq.com/d/53a9a4072cd92a11

you can use a function as a mark, where the function creates a svg fragment:

Plot.plot({
  width: 800,
  height: 500,
  marks: [
    Plot.dot(olympians, {
      x: "weight",
      y: "height",
      fill: "sex",
      opacity: 0.5
    }),
    Plot.ruleX([30]),
    Plot.ruleY([1.2]),
    () => svg`<g transform="translate(400,270)">${
      Plot.rectY(
        olympians,
        Plot.binX({ y: "count" }, { x: "weight", fill: "sex" })
      ).plot({ axis: null, x: { domain: [180, 20] }, height: 200, width: 400 })}`
  ]
})

Wow, what a community. Thanks to @Mark McClure and @Fil for excellent solutions. I've been moving from d3 to Plot so Fil's creation of an svg seems more familiar than using CSS tricks, but both work great. This is the second problem I encountered using Plot where the solution has involved absolute positioning, which can cause troubles across devices. I think what I want is a Plot.svg() where an svg object can be located using the current x and y scales for the Plot. In the meantime, I'll use these great solutions.

There are examples in the Plot.image documentation on how to position a svg with x and y scales. And if you liked inception, try plot of plots.

Success! When I first looked at @Fil's Plot of plots, I saw the regularity and frames so I mistakenly thought it had used facets, which would not have worked for me. After the suggestion here, I returned to study Plot of plots and was able to make it work for my purposes. The notebook will have a lot more explanation before it is finished, but those interested in this discussion may want to look at the Plot of plots in https://observablehq.com/d/4d195b57240fa235

great! please share the notebook?

Sorry, I thought I had. I must have forgotten that pesky save button. Try again: https://observablehq.com/d/4d195b57240fa235

thanks! it might help to add a Plot.frame() mark to the smallPlot

I added the Plot.frame(). I think that is better, but I'm not sure. Many thanks to your great example. I was able to adapt it but there remain some mysteries in this statement: src: (d) =>

data:image/svg+xml;utf8,${smallPlot(d.dist).outerHTML}

and .attr("xmlns", d3.namespaces.svg). But it works and I can tweak the design. Thanks!

if we break it down: • smallPlot(d.dist) returns a DOM node • .outerHTML returns a string (the "html/svg code" for the node) •

…${a}

returns a string with the value of a • the final string is a data-url that we can use as the URL of an image in the new Plot • the 'attr' method sets the 'xmlns' attribute to the SVG namespace, so the browser knows how to interpret it