OrdinalFrame BoxPlot: Misaligned box plot svgs vs. the underlying points & labels.

[ShadyStego]

I'm using the docs example as is, and it seems that the boxplot svg is misaligned.

const frameProps = {
    data: [
      { theaterCount: 4, rank: 18, grossWeekly: 327616, title: "Ex Machina" },
      { theaterCount: 39, rank: 15, grossWeekly: 1150814, title: "Ex Machina" },
      {
        theaterCount: 1255,
        rank: 6,
        grossWeekly: 7156570,
        title: "Ex Machina"
      },
      {
        theaterCount: 1279,
        rank: 6,
        grossWeekly: 3615000,
        title: "Ex Machina"
      },
      {
        theaterCount: 2004,
        rank: 6,
        grossWeekly: 5212462,
        title: "Ex Machina"
      },
      {
        theaterCount: 1718,
        rank: 9,
        grossWeekly: 3108609,
        title: "Ex Machina"
      },
      {
        theaterCount: 896,
        rank: 12,
        grossWeekly: 2248258,
        title: "Ex Machina"
      },
      {
        theaterCount: 506,
        rank: 13,
        grossWeekly: 1122034,
        title: "Ex Machina"
      },
      { theaterCount: 302, rank: 19, grossWeekly: 551552, title: "Ex Machina" },
      { theaterCount: 194, rank: 20, grossWeekly: 316877, title: "Ex Machina" },
      { theaterCount: 124, rank: 29, grossWeekly: 201345, title: "Ex Machina" },
      { theaterCount: 81, rank: 34, grossWeekly: 153162, title: "Ex Machina" },
      { theaterCount: 61, rank: 36, grossWeekly: 102114, title: "Ex Machina" },
      { theaterCount: 39, rank: 42, grossWeekly: 64350, title: "Ex Machina" },
      { theaterCount: 31, rank: 47, grossWeekly: 45344, title: "Ex Machina" },
      {
        theaterCount: 10,
        rank: 24,
        grossWeekly: 240160,
        title: "Far from the Madding Crowd"
      },
      {
        theaterCount: 99,
        rank: 15,
        grossWeekly: 1090487,
        title: "Far from the Madding Crowd"
      },
      {
        theaterCount: 289,
        rank: 10,
        grossWeekly: 1831958,
        title: "Far from the Madding Crowd"
      },
      {
        theaterCount: 865,
        rank: 7,
        grossWeekly: 3779833,
        title: "Far from the Madding Crowd"
      },
      {
        theaterCount: 902,
        rank: 9,
        grossWeekly: 2246233,
        title: "Far from the Madding Crowd"
      },
      {
        theaterCount: 610,
        rank: 14,
        grossWeekly: 1129007,
        title: "Far from the Madding Crowd"
      },
      {
        theaterCount: 366,
        rank: 17,
        grossWeekly: 701207,
        title: "Far from the Madding Crowd"
      },
      {
        theaterCount: 256,
        rank: 20,
        grossWeekly: 430870,
        title: "Far from the Madding Crowd"
      },
      {
        theaterCount: 122,
        rank: 24,
        grossWeekly: 270977,
        title: "Far from the Madding Crowd"
      },
      {
        theaterCount: 105,
        rank: 28,
        grossWeekly: 195483,
        title: "Far from the Madding Crowd"
      },
      {
        theaterCount: 98,
        rank: 30,
        grossWeekly: 138071,
        title: "Far from the Madding Crowd"
      },
      {
        theaterCount: 74,
        rank: 39,
        grossWeekly: 86393,
        title: "Far from the Madding Crowd"
      },
      {
        theaterCount: 47,
        rank: 42,
        grossWeekly: 52821,
        title: "Far from the Madding Crowd"
      },
      {
        theaterCount: 27,
        rank: 58,
        grossWeekly: 25708,
        title: "Far from the Madding Crowd"
      },
      {
        theaterCount: 18,
        rank: 60,
        grossWeekly: 17292,
        title: "Far from the Madding Crowd"
      },
      {
        theaterCount: 3366,
        rank: 3,
        grossWeekly: 16660516,
        title: "The Longest Ride"
      },
      {
        theaterCount: 3371,
        rank: 5,
        grossWeekly: 9372323,
        title: "The Longest Ride"
      },
      {
        theaterCount: 3140,
        rank: 7,
        grossWeekly: 5507604,
        title: "The Longest Ride"
      },
      {
        theaterCount: 2115,
        rank: 10,
        grossWeekly: 2369655,
        title: "The Longest Ride"
      },
      {
        theaterCount: 1464,
        rank: 11,
        grossWeekly: 1823683,
        title: "The Longest Ride"
      },
      {
        theaterCount: 803,
        rank: 14,
        grossWeekly: 780244,
        title: "The Longest Ride"
      },
      {
        theaterCount: 329,
        rank: 17,
        grossWeekly: 419930,
        title: "The Longest Ride"
      },
      {
        theaterCount: 230,
        rank: 21,
        grossWeekly: 226064,
        title: "The Longest Ride"
      },
      {
        theaterCount: 155,
        rank: 28,
        grossWeekly: 126320,
        title: "The Longest Ride"
      },
      {
        theaterCount: 116,
        rank: 31,
        grossWeekly: 101719,
        title: "The Longest Ride"
      },
      {
        theaterCount: 45,
        rank: 40,
        grossWeekly: 33808,
        title: "The Longest Ride"
      },
      {
        theaterCount: 24,
        rank: 56,
        grossWeekly: 17379,
        title: "The Longest Ride"
      },
      {
        theaterCount: 9,
        rank: 67,
        grossWeekly: 6872,
        title: "The Longest Ride"
      }
    ],
    size: [700, 400],
    margin: { left: 160, bottom: 90, right: 10, top: 40 },
    type: "point",
    summaryType: "boxplot",
    projection: "horizontal",
    oPadding: 20,
    oAccessor: "title",
    rAccessor: "rank",
    rExtent: [0],
    style: (d) => {
      return {
        r: 2,
        fill: d && colors[d.title]
      }
    },
    summaryStyle: (d) => ({
      fill: d && colors[d.title],
      fillOpacity: 0.2,
      stroke: d && colors[d.title],
      strokeWidth: 0.5
    }),
    title: "Box Office Movies by Rank",
    axes: [{ orient: "bottom", label: "Rank" }],
    oLabel: true
  }

  return <OrdinalFrame {...frameProps} />

The amount of pixels shifted is not fixed. E.g. if I adjust the size to [700,240], the box plot is now shifted downwards (instead of upwards):

[emeeks]

This is fixed in 2.0 if you want to upgrade. You can try it out 2.0.0-rc.16 to see. We should have a migration guide coming soon but if you have issues feel free to post them and I can answer them ad hoc.