Quick question about margins

Community Help
1

Greetings! I’ve been searching around for something like Observable for awhile. So far I like it!

Just one question for now. If you look at the very first figure in this notebook, my top and left margins seem a bit clipped, and it doesn’t seem to matter when I change the values of the margin variable. Any clues?

If you see anything else I’m doing that’s just horribly wrong or bad practice, feel free to point it out. I’ve been coding for awhile but JavaScript is (perhaps obviously) new to me.

Thanks!

2

Hi Ron,

This doesn’t answer your question, but as perhaps a fun debugging approach, I changed your margin values to accept inputs from sliders so that you can see what happens as the values change. Here’s a comparison of the changes:

And here’s the resulting notebook with the slider (below the first chart):

It looks like your top and left margins are ‘fixed’, so to speak – that is, changing the margin values is not moving the top and left edges, which appear clipped.

I am not so advanced as to know where and how to adjust this, but perhaps this might be a lead?

3

Looks like this is the bit of code that needs to be adjusted:

  const x = d3.scaleLinear().domain([xMin,xMax]).range([0,w]);
  const y = d3.scaleLinear().domain([yMin,yMax]).range([h,0]);

E.g. changing to this works:

  const x = d3.scaleLinear().domain([xMin,xMax]).range([10,w]);
  const y = d3.scaleLinear().domain([yMin,yMax]).range([h,10]);
1 Like
4

Hey Ron,

Sure thing: so this code seems to be based off of a D3 example (or based off an example based off an example, etc :slight_smile: ) The error - which might be kind of hard to spot, is this:

let svg = d3.select(DOM.svg(width, height));
svg.append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

So the intent of the original code was that everything in the chart goes inside of a g element (a SVG group) and by doing so, they don’t need to take into account (in JavaScript-land) the left margin and top margin, because they’ll be offset by the SVG transform of the g element.

The bug was introduced when, instead of selecting an svg element on the page (probably) this was swapped top use DOM.svg. And the result is that, instead of appending everything in the chart inside of the g, this adds the g but never puts anything inside of it. So the left and top margins aren’t enacted anywhere.

Here’s a tweaked version of the notebook that corrects this error: https://beta.observablehq.com/compare/64a770278018c5f3...49a6853f19f1c2fc

The relevant sections are these:

  let svg = d3.select(DOM.svg(width, height))
    .append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

And then

return svg.node().parentNode;

So, the svg variable now refers to the g (with its transform that sets the margins) and the return value needs to look for the parentNode of that g (which is the SVG element).

Hope that helps - this is admittedly a pretty sneaky one, because it doesn’t cause an error and is a difference of only a few characters.

-Tom

2 Likes
5

Thanks Aaron! I appreciate your approach and your time.

6

Thanks Tom. I love how part of the fix is right under my I won’t get too detailed with comments here… comment :slight_smile:

Thanks for taking the time to explain it clearly.

p.s. this is DEFINITELY an example based on an example… If you can get a sense of the general direction I’m trying to go and know of any other resources, do let me know!