The rendering looks very realistic. I would love to see a blog post written by the authors on how they accomplished such great results.
RoughViz: JS library for creating sketchy/hand-drawn style charts in the browser
51–60 of 61 posts
Re: RoughViz: JS library for creating sketchy/hand-drawn style charts in the browser
#52There's a plugin for Chart.js that does something similar was well: https://github.com/nagix/chartjs-plugin-rough
Re: RoughViz: JS library for creating sketchy/hand-drawn style charts in the browser
#53Amazing, love finding cool stuff like this.
Re: RoughViz: JS library for creating sketchy/hand-drawn style charts in the browser
#54Earlier quoted context omitted.
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.
Re: RoughViz: JS library for creating sketchy/hand-drawn style charts in the browser
#55> 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
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.
Re: RoughViz: JS library for creating sketchy/hand-drawn style charts in the browser
#56Earlier quoted context omitted.
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 w…
yes I was thinking about that, wondering if the choice of sketchy was a conscious one. Probably is.
Re: RoughViz: JS library for creating sketchy/hand-drawn style charts in the browser
#57Re: RoughViz: JS library for creating sketchy/hand-drawn style charts in the browser
#58Earlier quoted context omitted.
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.
Re: RoughViz: JS library for creating sketchy/hand-drawn style charts in the browser
#59Does 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/
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!
Re: RoughViz: JS library for creating sketchy/hand-drawn style charts in the browser
#60Jake 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.