RoughViz: JS library for creating sketchy/hand-drawn style charts in the browser(github.com)
github.com
RoughViz: JS library for creating sketchy/hand-drawn style charts in the browser
https://github.com/jwilber/roughViz
60 comments
There's a plugin for Chart.js that does something similar was well: https://github.com/nagix/chartjs-plugin-rough
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.
You can then add points/etc like a regular map, it'll load quickly and work on devices how users are used to.
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.
Amazing, love finding cool stuff like this.
Suggested this to our designer as a new direction for data vis products design style. He declined my proposal. Haha Cool library!
I'm going to use this for every internal page I write, even if charts aren't necessary
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.
> 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.
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
The same approach could be used for mockup apps/websites
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.
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.
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
It was inspired by the 'xkcd' matplotlib theme, which itself is delightful: https://matplotlib.org/xkcd/examples/showcase/xkcd.html
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.
There's AvaloniaUI, though, if you're looking for XAML, UI, and cross-platform.
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...
[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.
And if you live in React-land, here’s a wrapper: https://github.com/Chris927/react-roughviz
I wonder if I could use these graphs for my office presentations. They're pretty accurate so why not.
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...
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.
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 nice, but even if I was wasted I could probably draw some straighter bar graphs than that.
You can control promil level.
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.
But sometimes photos or exported illustrations don't work e.g. when someone else (remote) needs an editable copy.
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.
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/
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/
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!
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!
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.
Paging fogleman (https://news.ycombinator.com/user?id=fogleman) :-)
Similarly, is there a simple way/tool to generate ascii diagrams?
http://asciiflow.com/ is awesome and free
On a Mac: https://monodraw.helftone.com but it's no longer under active development.
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 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.
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.
https://medium.com/@Elijah_Meeks/sketchy-data-visualization-...