# Sketchy rendering with Plot

**URL:** <https://talk.observablehq.com/t/sketchy-rendering-with-plot/10538>\
**Category:** Show and tell\
**Created:** [October 19, 2025, 5:18pm UTC](https://talk.observablehq.com/t/sketchy-rendering-with-plot/10538 "2025-10-19T17:18:17Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![jwoLondon](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/jwolondon/32/259_2.png) [@jwoLondon](https://talk.observablehq.com/u/jwoLondon)\
**Post date:** [October 19, 2025, 5:18pm UTC](https://talk.observablehq.com/t/sketchy-rendering-with-plot/10538/1 "2025-10-19T17:18:17Z")

</div>

There are a number of implementations of sketchy rendering via rough.js available in Observable pages, but I was a little dissatisfied with either the work required to use them or their fragility. I’ve attempted to make a reasonably robust version that can be used with Observable Plot with minimal extra API surface (just add `rough:{}` to any mark specification).

Details here: [Making Plot Sketchy / Jo Wood | Observable](https://observablehq.com/@jwolondon/making-plot-sketchy)

Credit to Gordon Tu on whose implementation I have based this one.

 ![sketchThumbnails](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/a/a137d674fbad3fda64057d7b23bf58dd418e61fe.jpeg)

---

<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:** [October 20, 2025, 8:31am UTC](https://talk.observablehq.com/t/sketchy-rendering-with-plot/10538/2 "2025-10-20T08:31:29Z")

</div>

This is glorious. I wonder if there could be an option (or even a default) for a seeded RNG?

---

<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:** [October 20, 2025, 9:00am UTC](https://talk.observablehq.com/t/sketchy-rendering-with-plot/10538/3 "2025-10-20T09:00:19Z")

</div>

Another useful tool could be to have a top-level `rough: true` option that makes every mark rough.

---

<div class="post-metadata">

**Author:** ![jwoLondon](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/jwolondon/32/259_2.png) [@jwoLondon](https://talk.observablehq.com/u/jwoLondon)\
**Post date:** [October 20, 2025, 10:04am UTC](https://talk.observablehq.com/t/sketchy-rendering-with-plot/10538/4 "2025-10-20T10:04:11Z")

</div>

There’s already a `seed` option available (`{seed: n}` where `n` is any integer or `null` for no seeding) to fix the perturbation. But good point about making it the default.

---

<div class="post-metadata">

**Author:** ![jwoLondon](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/jwolondon/32/259_2.png) [@jwoLondon](https://talk.observablehq.com/u/jwoLondon)\
**Post date:** [October 20, 2025, 10:05am UTC](https://talk.observablehq.com/t/sketchy-rendering-with-plot/10538/5 "2025-10-20T10:05:09Z")

</div>

And yes, a spec-wide `rough:true` would be useful. I will add this to the next version.

---

<div class="post-metadata">

**Author:** ![tomlarkworthy](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/tomlarkworthy/32/5940_2.png) [@tomlarkworthy](https://talk.observablehq.com/u/tomlarkworthy)\
**Post date:** [October 21, 2025, 5:32am UTC](https://talk.observablehq.com/t/sketchy-rendering-with-plot/10538/6 "2025-10-21T05:32:11Z")

</div>

This is so good!

---

<div class="post-metadata">

**Author:** ![jwoLondon](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/jwolondon/32/259_2.png) [@jwoLondon](https://talk.observablehq.com/u/jwoLondon)\
**Post date:** [October 21, 2025, 9:32am UTC](https://talk.observablehq.com/t/sketchy-rendering-with-plot/10538/7 "2025-10-21T09:32:41Z")

</div>

Thanks to the suggestions from Fil. I’ve updated the wrapper so it now allows top-level rough settings avoiding the need for per-mark changes. Finer level control is still possible on a per-mark basis when needed. I’ve also set the default to seed the random number generator so re-renders produce exactly the same result (unseeded randomisation is still possible by explicitly setting `seed:0`).

Documentation at [Making Plot Sketchy / Jo Wood | Observable](https://observablehq.com/@jwolondon/making-plot-sketchy) reflects these latest changes.

---

<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:** [October 29, 2025, 2:41am UTC](https://talk.observablehq.com/t/sketchy-rendering-with-plot/10538/8 "2025-10-29T02:41:59Z")

</div>

If I can make a further suggestion, when you set the top-level rough, a mark could opt out by having `rough: false` (or `null`)

---

<div class="post-metadata">

**Author:** ![jwoLondon](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/jwolondon/32/259_2.png) [@jwoLondon](https://talk.observablehq.com/u/jwoLondon)\
**Post date:** [October 29, 2025, 10:55am UTC](https://talk.observablehq.com/t/sketchy-rendering-with-plot/10538/9 "2025-10-29T10:55:01Z")

</div>

Thanks Fil. Yes, that simplifies use of the API. Now added.