
RoughViz: JS library for creating sketchy/hand-drawn style charts in the browser - feross
https://github.com/jwilber/roughViz
======
egyptiankarim
> Use these charts where the communication goal is to show intent or
> generality, and not absolute precision. Or just because they're fun and look
> weird.

I love the intent and execution behind this. The implication of imprecision in
the underlying data through rough looking "hand drawn" charts and graphs is a
really smart design hack.

~~~
mr__y
>he implication of imprecision in the underlying data through rough looking
"hand drawn" charts and graphs is a really smart design hack.

The same approach could be used for mockup apps/websites

~~~
ceejayoz
I use [https://balsamiq.com/](https://balsamiq.com/) for this.

~~~
tracker1
That was my first thought when seeing this... IIRC, XAML had a similar
rendering option as well.

~~~
tasogare
It had, in Expression (Blend?) but not every component had a draw-like
component which made things a bit awkward. Or maybe I missed something. Anyway
XAML is still my favorite UI platform, it’s sad Microsoft doesn’t make any
effort to make it cross platform.

~~~
ygra
Well, XAML itself doesn't have anything to do with UI, it's just a
serialization of an object graph with hints about code generation.

There's AvaloniaUI, though, if you're looking for XAML, UI, and cross-
platform.

------
jimhefferon
Does anyone know of a way to draw figures that look like old-fashioned
textbook illustrations, which I believe weere hand drawn in India ink? My
father's physics books from the fifties are just beautiful.

~~~
buckminster
This is amazing:

[https://github.com/jemmybutton/fiziko](https://github.com/jemmybutton/fiziko)

There's an excellent blog post by the author with many more illustrations but
I can't find it right now. Edit: found it!

[https://habr.com/en/post/454376/](https://habr.com/en/post/454376/)

~~~
hirenj
If I had an infinite amount of time, I would love to convert this over to run
in the browser / SVG.. I hope there are some enterprising young souls out
there who are keen on the challenge!

------
zwily
And if you live in React-land, here’s a wrapper:
[https://github.com/Chris927/react-
roughviz](https://github.com/Chris927/react-roughviz)

------
signal11
If the "hand-drawn diagram" look appeals to you and you're a Visio user, you
can get this look in Visio 2016. Design tab > Themes > Hand-drawn.

~~~
iamaelephant
You could also look into drawing hand-drawn diagrams by hand.

~~~
signal11
Yes, I've been doing that increasingly (and taking photos) or using an iPad +
pencil -- tbh hand-drawn + photos is just faster.

But sometimes photos or exported illustrations don't work e.g. when someone
else (remote) needs an editable copy.

------
nudemanonbike
I'm going to use this for every internal page I write, even if charts aren't
necessary

------
nickcox
Semiotic offers something similar.

[https://medium.com/@Elijah_Meeks/sketchy-data-
visualization-...](https://medium.com/@Elijah_Meeks/sketchy-data-
visualization-in-semiotic-5811a52f59bc)

------
benmccann
There's a plugin for Chart.js that does something similar was well:
[https://github.com/nagix/chartjs-plugin-
rough](https://github.com/nagix/chartjs-plugin-rough)

------
fizixer
Jake Vanderplas did something similar many years ago in python [1]. I miss his
blog posts (must be busy doing something great).

[1] [https://jakevdp.github.io/blog/2012/10/07/xkcd-style-
plots-i...](https://jakevdp.github.io/blog/2012/10/07/xkcd-style-plots-in-
matplotlib/)

~~~
hantusk
He's active on twitter
[https://twitter.com/jakevdp](https://twitter.com/jakevdp)

~~~
lordgrenville
...and presumably during more of his time, working for Google on Colab.

------
nickysielicki
Anyone know of a good library for large directed graph visualization?
Something akin to google maps where you can scroll in-and-out, and it
improves/reduces resolution accordingly?

~~~
fortzi
I've used vis.js for some projects and it did the job well. Very customizable.

------
abhinai
The rendering looks very realistic. I would love to see a blog post written by
the authors on how they accomplished such great results.

~~~
squiggleblaz
Yes, the graphs look great, but as usual the fake hand drawn text looks like a
fake hand drawn font with some super unnatural inconsistent rotation. Maybe I
should make it a project to make a tool that can generate fake hand drawn text
that looks like hand drawn text.

------
dandigangi
Suggested this to our designer as a new direction for data vis products design
style. He declined my proposal. Haha Cool library!

------
nerdb4itwascool
This is a really fun library, it'd be great for a blog or personal website. A
business site? maybe not so much...

~~~
dsamarin
I would love to see Crayola or RoseArt using this for their quarterly reports.

------
umairadilmirza
I wonder if I could use these graphs for my office presentations. They're
pretty accurate so why not.

------
ChrisArchitect
see also recent related: Chart.xkcd – library that plots charts in Xkcd
sketch/cartoon/hand-drawn style
[https://news.ycombinator.com/item?id=21566084](https://news.ycombinator.com/item?id=21566084)

------
fimdomeio
This looks like its all svg lines. If so could also be interesting for pen
plotters.

~~~
jordache
why would one print this via pen plotter vs a normal printer?

~~~
MattRix
Because then each individual line would really look hand drawn, since that is
what this look is all about.

------
bryanrasmussen
So the has the term sketchy fallen out of use as a slang-term for
untrustworthy?

~~~
CharlesW
That's the most common informal meaning of the word. The most common formal
meaning is "not thorough or detailed", which approaches but doesn't quite
capture it's use here (i.e. "looks like a hand-drawn sketch").

~~~
Stratoscope
I think the "untrustworthy" meaning is also relevant here. One of the reasons
to use this hand-drawn look is so that people _won 't_ trust the drawings.

Balsamiq has a good description of this philosophy on their "What are
Wireframes?" page. Here are the summary points:

1\. It makes it clear that this is not the final design.

2\. It conveys that "this is all up for discussion".

3\. It makes it clear that no code has been written yet.

In other words, don't trust these drawings! They are not finished product, or
any kind of product.

There's a longer explanation of each of these points on the page (scroll down
to "Why Do These Wireframes Look the Way They Do?"). Recommended reading for
anyone considering this sketchy style of drawing:

[https://balsamiq.com/learn/resources/articles/what-are-
wiref...](https://balsamiq.com/learn/resources/articles/what-are-wireframes/)

~~~
bryanrasmussen
yes I was thinking about that, wondering if the choice of sketchy was a
conscious one. Probably is.

------
blzrdnofreespch
Amazing, love finding cool stuff like this.

------
leeoniya
lol `roughness: 20`

~~~
blackearl
I love the idea of sleepily putting together some charts for management and
accidentally making 2 into 22 and being too tired to realize

------
bogwog
This looks nice, but even if I was wasted I could probably draw some
straighter bar graphs than that.

~~~
mirekrusin
You can control promil level.

