Combining ruleY, tickX and facets

Community Help
1

I’m fiddling around with a dataset with start,end time and 2 properties that I want to visualise (this is the big Facebook outage, seen from BGP, pretty cool if you ask me).

I’ve managed to get tickX and facets working for the start and end times individually, but it seems that the interaction of RuleY and facets is different, or at least different from what I expected.

Plot.plot({
  facet: {
    data: updown,
    y: "pfx",
    axis: "left",
    marginLeft: 160
  },
  /* y: {
    domain: []
  }, */
  marks: [
    Plot.tickX(updown, {x: "start_ts", stroke: "green"}),
    Plot.tickX(updown, {x: "end_ts", stroke: "red"}),
    Plot.ruleY(updown, {x1: "start_ts", x2: "end_ts", y: "pfx"})
  ]
})

I’ve fiddled with many options in the ruleY, or using ruleY without the tickX, but it seems to draw the same facet label for each different facet (removing the y: “pfx” makes the labels drawn the way I think they should be, but it doesn’t draw the actual lines between start and stop).

As feedback for the ergonomics of the interface: Am I wrong in thinking the expected behaviour is that the interaction between facets should be as similar as possible between tickX and ruleY, and if not, why is this?

As to how to get this viz working: How do I make ruleY either not draw the labels, or draw them according to te facet? Or is there a problem in my data?

Notebook: Loading of Megabytes of RIS data / Internet Data Junkie / Observable

(I’m also experimenting with how much data loading a notebook can handle, so this might explode your browser).

2

You could try it without faceting:

untitled-239
untitled-2391280×2520 412 KB 

Plot.plot({
  marks: [
    Plot.tickX(updown, {x: "start_ts", y: "pfx", stroke: "green"}),
    Plot.tickX(updown, {x: "end_ts", y: "pfx", stroke: "red"}),
    Plot.ruleY(updown, {x1: "start_ts", x2: "end_ts", y: "pfx", strokeOpacity: 0.2})
  ]
})

If you use faceting, you’ll need to tell the Plot.ruleY that the y channel is null; otherwise it defaults to the identity function, and since your data is an array of objects, this will be coerced to NaN and won’t display any rules. Like so:

untitled-240
untitled-2401280×2520 509 KB 

Plot.plot({
  facet: {
    data: updown,
    y: "pfx",
  },
  marks: [
    Plot.tickX(updown, {x: "start_ts", stroke: "green"}),
    Plot.tickX(updown, {x: "end_ts", stroke: "red"}),
    Plot.ruleY(updown, {x1: "start_ts", x2: "end_ts", y: null, strokeOpacity: 0.2})
  ]
})