Observable Plot.plots inline in markdown cell

Hi,
I would like to embed small Plot.plots inline in markdown cells.

However, it seems that the SVG output is wrapped in newlines or paragraphs or so. Would it be possible to include a plot without the enclosing newlines/paragraphs?

Thanks in advance.

1 Like

Can you share a notebook showing the issue? (The plots are returned as a SVG node, there shouldn’t be any paragraph around it.)

1 Like

As Fil says, it’s always easier to answer a question when you have a link to a notebook. I’m guessing, though, that you’re trying to accomplish something like this:

If so, the key issue is that the CSS display property of the SVG produced by Plot has the value "block". You can change that like so:

plot = {
  let plot = your_plot_commands;
  d3.select(plot).style("display", "inline");
  return plot;
}

You can then refer to plot in a markdown cell using ${plot}, just as you would in any string literal.

1 Like

You can add style: "display: inline;" to your Plot options for inline plots. For example:

Text, (plot), ${Plot.line([
    [0, 0],
    [1, 1],
    [2, 0],
    [3, 1]
  ]).plot({
    style: "display: inline;",
    width: 60,
    height: 10,
    marginTop: 1,
    marginBottom: 1,
    marginLeft: 0,
    marginRight: 0,
    x: { ticks: [], domain: [0, 3] },
    y: { ticks: [], domain: [0, 1] }
  })}, and more text.
3 Likes

Thank you all!

Plot is just fantastic. Here’s a quick screenshot of the result.

small_plot = Plot.plot({
  axis: null,
  height: 5,
  width: 100,
  style: {display: "inline"},
  color: {
    domain: ["MRI", "No MRI"],
    range: ["lightgrey", "white"]
  },
  x: {
    percent: true
  },
  marks: [
    Plot.barX(
      dt,
      Plot.stackX(
        Plot.groupZ(
          { x: "proportion" },
          { fill: "study_MR", stroke: "black", strokeWidth: 0.1 }
        )
      )
    ),
    Plot.ruleX([0.5])
  ]
})
2 Likes