Custom symbols in Plot

Community Help
1

Is it possible to use custom svg symbols (like the @bchoatejr 's example) with Plot Observable ?

More precisely, how to use symbols created as in this notebook with a Plot.Dot mark or a Plot.image mark ?

2

Symbols must follow the convention of d3-shape: they are objects with a draw method that receives a context and size, and must draw on this context using turtle commands.

For example, the diamond symbol is defined here:

The size is an area (so use a sqrt transform if you want to define lengths).

2 Likes
3

Here is a live example:

Also note that Plot already uses Heman Robinson’s symbols by default (for stroked dots, and the non-circled variety).

1 Like
4

Thanks. But, how to use several custom symbols in a plot ? Does the symbol channel accept an array of functions to define several symbols ?
If i need to use more than 10 unique symbols (only black and white), i will need to create new unique symbols to complete the 7 basic Plot symbol.

5

Yes, you can specify them as part of the symbol scale’s range option:

const symbolStar = {
        draw(context, size) {
          const l = Math.sqrt(size);
          const x = l * Math.cos(Math.PI / 6);
          const y = l * Math.sin(Math.PI / 6);
          context.moveTo(0, -l);
          context.lineTo(0, l);
          context.moveTo(-x, -y);
          context.lineTo(x, y);
          context.moveTo(x, -y);
          context.lineTo(-x, y);
          context.closePath();
        }
      };

const symbolCircleCross = { … }; // etc.

Plot.plot({
  symbol: {
      range: [symbolStar, symbolCross, symbolWye, …]
  },
  marks: [ … ]
})

(Note that as per my above comment, I “fixed” Mike’s example to make the length l be sized according to sqrt(size).)

1 Like
6

Perfect ! Thanks a lot !