# Custom symbols in Plot

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 !