Observable Plot.plots inline in markdown cell

Community Help
1

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
2

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
3

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
4

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
5

Thank you all!

Plot is just fantastic. Hereā€™s a quick screenshot of the result.

Screenshot 2021-12-04 at 15.54.52
Screenshot 2021-12-04 at 15.54.521334Ɨ182 24 KB 

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