# Custom symbols in Plot

**URL:** <https://talk.observablehq.com/t/custom-symbols-in-plot/9466>\
**Category:** Help\
**Created:** [July 3, 2024, 1:10pm UTC](https://talk.observablehq.com/t/custom-symbols-in-plot/9466 "2024-07-03T13:10:38Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![linard-y](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/linard-y/32/8937_2.png) [@linard-y](https://talk.observablehq.com/u/linard-y)\
**Post date:** [July 3, 2024, 1:10pm UTC](https://talk.observablehq.com/t/custom-symbols-in-plot/9466/1 "2024-07-03T13:10:38Z")

</div>

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](https://observablehq.com/@mast4461/good-plot-symbols-by-default) with a Plot.Dot mark or a Plot.image mark ?

---

<div class="post-metadata">

**Author:** ![Fil](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/fil/32/207_2.png) [@Fil](https://talk.observablehq.com/u/Fil)\
**Post date:** [July 3, 2024, 2:18pm UTC](https://talk.observablehq.com/t/custom-symbols-in-plot/9466/2 "2024-07-03T14:18:41Z")

</div>

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](https://observablehq.com/@d3/d3-path).

For example, the **diamond** symbol is defined here:

> <https://github.com/d3/d3-shape/blob/main/src/symbol/diamond.js>

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

---

<div class="post-metadata">

**Author:** ![mbostock](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mbostock/32/9_2.png) [@mbostock](https://talk.observablehq.com/u/mbostock)\
**Post date:** [July 3, 2024, 4:14pm UTC](https://talk.observablehq.com/t/custom-symbols-in-plot/9466/3 "2024-07-03T16:14:54Z")

</div>

Here is a live example:

> **[Plot: Custom symbols](https://observablehq.com/@observablehq/plot-custom-symbols)**
>
> Ref. https://talk.observablehq.com/t/custom-symbols-in-plot/9466

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

---

<div class="post-metadata">

**Author:** ![linard-y](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/linard-y/32/8937_2.png) [@linard-y](https://talk.observablehq.com/u/linard-y)\
**Post date:** [July 3, 2024, 5:55pm UTC](https://talk.observablehq.com/t/custom-symbols-in-plot/9466/4 "2024-07-03T17:55:49Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Fil](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/fil/32/207_2.png) [@Fil](https://talk.observablehq.com/u/Fil)\
**Post date:** [July 3, 2024, 9:32pm UTC](https://talk.observablehq.com/t/custom-symbols-in-plot/9466/5 "2024-07-03T21:32:48Z")

</div>

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

```js
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)`.)

---

<div class="post-metadata">

**Author:** ![linard-y](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/linard-y/32/8937_2.png) [@linard-y](https://talk.observablehq.com/u/linard-y)\
**Post date:** [July 4, 2024, 7:35am UTC](https://talk.observablehq.com/t/custom-symbols-in-plot/9466/6 "2024-07-04T07:35:12Z")

</div>

Perfect ! Thanks a lot !