title: SVG and d3: Draw primitive rectangle in data coordinates?
body: <p>I am trying to learn d3 for building visualizations; as part of this project, I found I needed to draw some filled rectangles. This should be straightforward in SVG coordinates, but I want to draw in data coordinates. I cannot figure out why any of the rectangles would ever be drawn outside the canvas, but that's what I've observed in my minimal (not) working example here: <a href="https://bl.ocks.org/emprice/faed364cb1bc4cc1b0dcf8a5a2d50dac" rel="nofollow noreferrer">https://bl.ocks.org/emprice/faed364cb1bc4cc1b0dcf8a5a2d50dac</a>.</p>
  
  <p>The pink rectangle actually goes outside the boundaries of the SVG element, which doesn't make sense if I've set up the x- and y-mappings correctly. Is there a trick for drawing in data coordinates that I haven't used, or have I configured the scales incorrectly? I've tried changing up the y scale parameters (range and domain) without success; the x scale, which is set up the same way, appears to work as expected.</p>
  
  <p>Thanks in advance for any help.</p>