
Textures.js – SVG patterns for Data Visualization - iheredia
http://riccardoscalco.github.io/textures/
======
qrohlf
Love this style of documentation - very concise, concrete usage examples with
a minimal amount of code needed to reproduce.

I actually modeled the new documentation of Trianglify
([http://qrohlf.com/trianglify/](http://qrohlf.com/trianglify/)) on the
Textures.js docs.

I don't have the numbers on hand, but subjectively the number of 'how do I do
X' github issues that I deal with has gone down a lot since adopting this
style of docs.

~~~
chrismbarr
Both this and Textures look really slick, I love them both!

------
vegabook
Visually this looks very nice. I personally love your choice of colours for
the website which compliments the retro look of pattern fills in general. What
I'd like more information on, if possible, is whether or not such patterns are
more effective, for communication, than regular colours. You're targeting D3
(as opposed to, say the printed page? Please confirm?), so I guess the
question is, is this a visual candy (and an effective one for sure), or does
it, in addition, have some proof of better effectiveness at visual category
demarcation.

~~~
iheredia
I'm not related to the project. I shared a cool link I found online. But I can
think of at least two improvements over using regular colors. The first one
being better support for people with color blindness when using a large amount
of categories. And the second one is the possibility of showing more than one
value at each sector. Something like
[http://i.imgur.com/SdLeAPa.png](http://i.imgur.com/SdLeAPa.png) shows
combination of two kind of data. One being the light/dark background, and the
other being the circle/dash pattern

~~~
justbees
Yes! The color blindness point is a good one. It's amazing how 2 different
colors can end up being basically the same when someone is color blind. This
image ([http://i.imgur.com/4IbhU9w.png](http://i.imgur.com/4IbhU9w.png)) has
an example. Imagine a chart/map/whatever using the 2 colors on the left, but
looking to you like the ones on the right. Not that useful.

Actually I was giving a quick talk about this stuff at work using this very
example and someone in the room was colorblind and he couldn't tell there was
variation in the colors in the sentence. So, basically I got immediate
vindication for haranguing the designers.

(pie chart example
[http://i.imgur.com/ejAnDf5.png](http://i.imgur.com/ejAnDf5.png))

------
rajangdavis
I wish I had a use-case to try this out, but I thought this was very cool.
Thank you for sharing.

------
aeharding
The patterns remind me of MacPaint.

[http://www.macprices.net/hildreth_moore/macpaintemulator.png](http://www.macprices.net/hildreth_moore/macpaintemulator.png)

------
OliverJones
Yow! Zippy meets javascript! Are we having fun yet? Are we? are we?

Seriously, this is terrific.

------
runeks
I see a lot of relatively low level libraries for data visualization. Are
there any very high level libraries, that allow regular coders like me to
visualize some data quickly? I find myself needing this all the time, but I
would prefer the simplest interface possible, rather than high
configurability.

~~~
softawre
My advice is to bite the bullet and learn d3 (instead of a wrapper like dc.js
or nvd3) if this is for any production level data. Or build in the time you
will need to rewrite it for API nastiness and probably performance reasons
down the line.

------
gabrielflorit
Very nice, this will come in handy. Beautiful site design too.

------
shujito
this doesn't seem to work properly on firefox, I'm using FF48.0

~~~
vanderZwan
Works fine on both FF48.0 and FF51.0a1 on Linux for me; do you have any SVG-
related plugins?

~~~
shujito
it started working now (strange, using osx btw, not that it matters anymore)

~~~
vanderZwan
Probably something like a CDN that timed out the first time then, for whatever
reason.

------
RUG3Y
This is a very neat library, I hope that I find myself using this on a project
soon! Thanks!

------
jlebrech
great for offices with black and white printers

------
the_cat_kittles
these textures look absolutely glorious- well done! cant think of anything
useful to say, but wanted to give you some positive feedback

------
zakarum009
Is there any way to animate these textures?

~~~
1wheel
Not sure if Textures.js supports it, but transitioning attributes on a pattern
fill will create an animation.

I've played around with it -- looks fun but never managed to make it useful
enough to actually use.

