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 ?

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 ?

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

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

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.

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

Perfect ! Thanks a lot !