Export Image
Export Code

New Margin Convention

Curran Kelleher

Last edited Nov 04, 2021
Created on Nov 04, 2021

Scatter plot with D3, using the newer margin convention pattern of setting the domain of the scales relative to the SVG, rather than utilizing an additional <g> element translated by the top and left margin.

Makes use of Rollup so that we can author the code using ES modules.

Inspired by the patterns found in Observable: D3 Charts.

I personally prefer the old margin convention, because it's simpler to reason about (you can isolate the thinking around innerWidth and innerHeight, rather than always considering margin.top, margin.right, margin.bottom, and margin.left).

MIT Licensed