RoughViz: JS library for creating sketchy/hand-drawn style charts in the browser | Hacker News Reader

RoughViz: JS library for creating sketchy/hand-drawn style charts in the browser

github.com

466 pointsfeross60 comments

> 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.

>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

There is actually a java swing look and feel called napkin from over a decade ago that is similar.

http://napkinlaf.sourceforge.net/ has some pictures. It's actually good for mockups, since users don't assume the feature is done when they see it.

I use https://balsamiq.com/ for this.

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

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.

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.

At the risk of self promotion, I made something very much like this a few months back: https://anvil.works/blog/xkcd-style-apps

It was inspired by the 'xkcd' matplotlib theme, which itself is delightful: https://matplotlib.org/xkcd/examples/showcase/xkcd.html

If you haven't tried this, you should. The type of feedback you get is proportional to the fidelity of your mock up.

Do a high-fidelity, fully realized html mockup, and you're more likely to get feedback about the little details like fonts, colors, icons, spacing, wording and maybe minor tweaks to the layout.

Draw a really low-fidelity mockup with a sharpie or on a whiteboard, and you're more likely to have a good discussion about fundamental layout/concepts, overall approach, etc, without anyone getting hung up bike-shedding about the details.

I think a lot of this has to do with perceived effort: if people think you spent hours building it, they're less likely to suggest a change that would throw most/all of your work out. This doesn't mean you can't or shouldn't prepare ideas/drafts beforehand if you want to, nor that you shouldn't increase the fidelity as you iterate.

I've tried many tools for this, but personally all the best and most fulfilling [early] design discussions I've ever had involved standing around a whiteboard.

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.

Can you share some links or images? I'm becoming slowly fascinated with this sort of look and collecting them. I dream one day i'll have the time to make a component or charting library that implements them.

Here are a couple from a book I could find right away. https://imgur.com/gallery/K3iBxgm From a 1948 text by McGraw-Hill.

This is amazing:

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/

Yes, I have seen those, thank you. They are indeed absolutely wonderful. But I had something else in mind. I posted a couple of examples under an adjacent reply.

Those are lovely, thanks for sharing them!

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!

Similarly, is there a simple way/tool to generate ascii diagrams?

On a Mac: https://monodraw.helftone.com but it's no longer under active development.

http://asciiflow.com/ is awesome and free

Paging fogleman (https://news.ycombinator.com/user?id=fogleman) :-)

How about a pencil and ink? Then scan it in, and clean it up.

Alas, while I want to produce accurate and attractive figures, after trying hard for many years, I find that my talents just do not turn that way.

I write texts that are free, so I am unable to pay someone to do it. At this point I use Asymptote, which does a very good job in the accuracy area and is perfectly professional in appearance. But I just love these figures and I wish I could convince my computer to turn them out.

I think parent's suggestion could work great if you printed the Asymptote results and then traced them in ink and scanned those.

As for computer generating that style, I might look for brushes for Photoshop/GIMP/Illustrator/Inkscape that produce the style you are looking for, and then reverse engineer those or use scripting capabilities of whichever tool to produce the figures.

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

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.

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

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.

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

Semiotic offers something similar.

https://medium.com/@Elijah_Meeks/sketchy-data-visualization-...

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

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...

He's active on twitter https://twitter.com/jakevdp

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

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?

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

I've had good success with rendering out the network at different resolutions, chopping up the image and putting them as tiles for leafletjs. The cutting is pretty easy, there are some libraries but a bit of basic scripting with imagemagik can also solve it.

You can then add points/etc like a regular map, it'll load quickly and work on devices how users are used to.

https://js.cytoscape.org/

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

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.

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

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

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

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

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

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

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

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

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

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").

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...

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

I'd take sketchy over sketcherly any day.

what about sketchisk?

Amazing, love finding cool stuff like this.

lol `roughness: 20`

They say if you whip the data hard enough, they will confess to anything.

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

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

You can control promil level.

Reply on news.ycombinator.com