Recreating the Waffle Mark with the Dot mark

[jamesking]

I have a dataset that I would like to represent in a waffle-mark like way, but I would like each dot (or waffle "cell") to represent an individual datapoint, rather than a unit of a quantity.

I think the solution would be to combine the dot mark with transforms or offsets to stack the dots in rows and columns to mimic the way that the waffle mark creates a grid.

The motivation is so the user can interact with each datapoint. In the screenshot below, the user is only able to interact with the area of the waffle mark that represents each group of datapoints and not the individual datapoints themselves.

I can see how I could use a stack transform to create a stack of dots, but I can't see how I could get to a waffle-like layout of individual dot marks.

Any suggestions greatly appreciated.

[jamesking]

I have made some progress. The following gives me an arrangement of dot marks in a waffle-like grid, 50 "cells" wide. This is more-or-less what I want. The only problem is that I would like the Y-axis to have appropriate tick mark values which would the current value multiplied by 50.

Plot.plot({
  aspectRatio: 1,
  marginLeft: 30,
  inset: 10,
  x: { axis: null },
  y: {},
  marks: [
    Plot.dot(
      data,
      Plot.stackY2({
        x: (d) => data.indexOf(d) % 50,
        y: (d) => 1,
        fill: "#ccc",
        r: 5
      })
    )
  ]
})

[Fil]

maybe with y: (d) => 1 / 50?

The alternative would be to fix the waffle mark’s tip option, see #2132 ?

[jamesking]

@Fil thanks

maybe with y: (d) => 1 / 50?

I have currently solved my tick mark issue with tickFormat: (t) => (t - 1) * 50. Your suggestion could also work, but I would also need to also adjust the aspectRatio to 1/50.

[jamesking]

@Fil from reading #2132 the tip option seems to apply to the waffle mark "area" whereas I want to address each individual dot directly:

[Fil]

Sure, in that case you wouldn't group and instead create 1 cell for each element.

[jamesking]

I don't think I would be able to colour groups of datapoints in that case (as in the above screenshot). Am I missing something?

[Fil]

You can color individual points; the difference with 👆 is that you won't group them. There is an example of this in the unit tests of #2132.