Has anyone attempted to combine this with D3?
Here- took a quick stab at it: http://roughjs.com/examples/bar-chart.html
Show HN: RoughJS – Create hand-drawn graphics using JavaScript
11–20 of 103 posts
Re: Show HN: RoughJS – Create hand-drawn graphics using JavaScript
#12Cool. I notice on the map example that the hatching lines in some of the states (South Dakota and Georgia, for example) don't quite match up. Why is that?
I'm doing some approximation on complex SVG paths for performance reasons. Doesn't happen on non-svg paths. Need for improvement.
Re: Show HN: RoughJS – Create hand-drawn graphics using JavaScript
#13Quick bar chart example with D3: http://roughjs.com/examples/bar-chart.html
Re: Show HN: RoughJS – Create hand-drawn graphics using JavaScript
#14Quick bar chart example with D3: http://roughjs.com/examples/bar-chart.html
Awesome. I was about to ask about D3 support.
But now that I'm here... Is there any support for animation?
Re: Show HN: RoughJS – Create hand-drawn graphics using JavaScript
#15Quick bar chart example with D3: http://roughjs.com/examples/bar-chart.html
Awesome. I was about to ask about D3 support. But now that I'm here... Is there any support for animation?
Well the library provides simple drawing methods. You would animate it the same way you would animate anything on a canvas. (Note most D3 charts use SVG)
Re: Show HN: RoughJS – Create hand-drawn graphics using JavaScript
#16Re: Show HN: RoughJS – Create hand-drawn graphics using JavaScript
#17If you repeatedly clear canvas/draw with a setInterval of ~100-200ms, looks kind of like the hand-drawn un-stable lines art style of Squigglevision (Dr. Katz / Science Court) :)
EDIT: If folks want to play with a JSFiddle: https://jsfiddle.net/49g2Leqw/9/
Re: Show HN: RoughJS – Create hand-drawn graphics using JavaScript
#18If you repeatedly clear canvas/draw with a setInterval of ~100-200ms, looks kind of like the hand-drawn un-stable lines art style of Squigglevision (Dr. Katz / Science Court) :) EDIT: If folks want to play with a JSFiddle: https://jsfiddle.net/49g2Leqw/9/
That's true. There's so much randomness in there that every render will likely be unique - every so slightly different from the previous frame.
Re: Show HN: RoughJS – Create hand-drawn graphics using JavaScript
#19Well, this just solved two problems I've been trying to figure out for months -- thanks, shihn! GitHub link: https://github.com/pshihn/rough
I'm assuming you're joking :P But if it really solved 2 of your problems, I'm curious what they were?
Re: Show HN: RoughJS – Create hand-drawn graphics using JavaScript
#20I used some of the same core code to create sketchy UI controls using web-components: https://www.webcomponents.org/collection/wiredjs/wired-eleme...