This message was deleted.

You'll have to specify the same width for your d3 generated SVG and the Plot so that they are scaled at the same rate. Then you should be able to adjust margins in the Plot via

marginLeft

and `marginRight`: https://observablehq.github.io/plot/features/plots#layout-options

Hi, thank you so much for that hint - how did I miss that? It's literally the first page of the docs. Super sorry about the unnecessary question. It was about this notebook: https://observablehq.com/@jasminsworkspace/populism I added an extremely clumsy legend built with d3 because I had a very specific idea of what it should contain - that's the reason for the combination. The solution works as long as the iframe is large enough to contain the graphs, on a cell phone the obervable plot graph rescales perfectly but I can't get the d3 graph to rescale. But, that might just be a problem for another day 🤓

No worries! By the way, did you know that you can also get a legend directly from a plot?

plotfinal.legend("color", {
  label: "V-Party Populism Scale",
  ticks: [0, .3, .6, 1],
  width: 250,
  marginLeft: 10,
  marginRight: 10,
  height: 54
})

(All options are ... optional, the channel name is the only argument that is required.)

I used the plot legends first, but I didn't find a way to have a legend for the dashed lines... Did I just miss that as well? Honestly, the only reason the legend is an SVG is because I found a way to build it that way first - obviously didn't think it through though...

How familiar/comfortable are you with writing HTML and CSS?

I'm pretty new to html, css & javascript, so pretty unfamiliar but willing to learn!

Something I like to do is to create small helpers that only do one thing. One such helper could be a function that creates your legend square:

function square({bgColor = "#aaa", stroke = "#fff", gap = 0} = {}) {
  return htl.html`<svg width=16 height=16 style="background: ${bgColor}">
    <line x1=8 x2=8 y2=16 stroke=${stroke} stroke-dasharray="${(16-gap) / 2} ${gap}" stroke-width=2 />
  </svg>`;
}

That's really cool - makes the code sooo much more readable than what I did. May I ask how you would combine multiple squares in one html output then? Thank you so much for all these fantastic tips, I really appreciate it!

Have you worked with HTML cells before, and/or have you heard about string "interpolation"?

Never used the former but I've read up on string "interpolation" before! Also, please feel free to stop helping out here - I don't want to take up all of your afternoon. 🙂

All good! A pattern that you will find quite often throughout Observable is the use of so-called "tagged templates", of which the Observable Standard Library provides several, e.g.

md

and

htl.html

. Both of these are used under the hood when you create a Markdown or HTML cell. The following HTML and JavaScript cells are equivalent:

Thank you so much! This is such a huge help and I'll read up more on the weekend!

@Jasmin König... I've just been told that this particular page of our documentation is somewhat dated (to be honest, I only took a brief look myself). Please feel free to follow up with any questions you might have, and I'll try to provide additional examples.