Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

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

github.com

Post reply on HN
Print view View original

41–50 of 61 posts

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

#41

Post by jimhefferon »

buckminster wrote: post #30
jimhefferon wrote: post #25

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/

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.

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

#42

Post by IanCal »

buckminster wrote: post #30
jimhefferon wrote: post #25

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/

Those are lovely, thanks for sharing them!

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

#43

Post by IanCal »

nickysielicki wrote: post #36

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

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

#44

Post by strbean »

jimhefferon wrote: post #40
heinrichhartman wrote: post #35

Earlier quoted context omitted.

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 th…

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.

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

#46

Post by MattRix »

jordache wrote: post #29
fimdomeio wrote: post #21

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.

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

#47

Post by hantusk »

fizixer wrote: post #6

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

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

#48

Post by softwarelimits »

nickysielicki wrote: post #36

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?

https://js.cytoscape.org/

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

#49

Post by meredydd »

mr__y wrote: post #17
egyptiankarim wrote: post #5

> 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

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

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

#50

Post by rb808 »

ggerganov wrote: post #33
jimhefferon wrote: post #25

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.

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

http://asciiflow.com/ is awesome and free
Post reply on HN