Stacking binned dots using Plot?

Community Help
1

I am experimenting with the new Plot library and since I am completely new to JavaScript I think this is perfect for me, as it isn’t as complex as D3 to get started with.

Now I would like to do a diagram similar to what can be done with ggplot2’s geom_dotplot (see Dot plot — geom_dotplot • ggplot2) where the data is binned (along either the X or Y axis) and then stacked along the other axis, so that the data in fact only needs one dimension (the one which is used for the binning). Any idea how can I achieve this with Plot?

Thanks,
Knut

2 Likes
2

here’s a solution:

Plot.plot({
  marks: [
    Plot.ruleX([10]),
    Plot.ruleY([0]),
    Plot.dot(
      data,
      Plot.stackY(Plot.binX({}, { x: "x", z: data, thresholds: 30, r: 10 }))
    )
  ],
  height: 150
})

stacked-bin-dots

6 Likes
3

Thanks! I had missed the stackY() transform…

4

For the binX() transform I also specified the title channel to get a tooltip. The input to the function I specified was always an array of length 1, whereas in my other examples it was the data object itself (no wrapping array). This probably works as designed, but I didn’t find anything in the documentation hinting at this.

1 Like
5

Yes. A title: function(d) { return d.name } (without specifying a title input) receives the index and series as input, where the series is the subset of all data with the same z, in this case an array of 1 since each dot represents 1 car.

We could also add a title on each dot with a title: "name" input and a title:"first" reducer.

1 Like