7 ms·

Textures.js – SVG patterns for Data Visualization

359 points by iheredia 10y ago

vegabook 10y ago
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 10y ago
  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
  - vegabook 10y ago
    gotcha. Two separate dimensions basically. Colour for one, pattern for the other. Nice.
  - justbees 10y ago
    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)
- tobr 10y ago
  Tufte dismisses these types of patterns as "chartjunk" and "unintentional optical art"[0]. I'm not sure I agree completely - I think patterns can be used as an effective additional data dimension, but you certainly have to be careful not to overdo it. [0] http://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=00040Z http://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0...
  - coldtea 10y ago
    >Tufte dismisses these types of patterns as "chartjunk" and "unintentional optical art" What Tufte doesn't understand is that your end goal isn't always information density and great insight. Sometimes aesthetics can be equally or more important than the data. Especially if the data are crap, like 90% of charts used in marketing (), where the marketing part is more important that actually showing something with the chart. () Personal observation, YMMV.
    - baconner 10y ago
      I think tufte understands that people make junk charts on purpose. I think he just doesn't agree that it's a good chart if the purpose isn't to actually inform truthfully . If your data is crap and you know it then basically you are misleading people on purpose. At that point it doesn't really matter if you have a lot of chartjunk as well.
- infinite8s 10y ago
  Research in 1984 (Graphical Perception: Theory, Experimentation, and Application to the Development of Graphical Methods - by William S. Cleveland and Robert McGill - https://www.cs.ubc.ca/~tmm/courses/cpsc533c-04-spr/readings/cleveland.pdf https://www.cs.ubc.ca/~tmm/courses/cpsc533c-04-spr/readings/...) found that texture (what they call shading) is worse than color saturation for discrimination of quantitative differences. For categorical discrimination it is probably as good as color if limited to a few patterns.
shujito 10y ago
this doesn't seem to work properly on firefox, I'm using FF48.0
- vanderZwan 10y ago
  Works fine on both FF48.0 and FF51.0a1 on Linux for me; do you have any SVG-related plugins?
  - shujito 10y ago
    it started working now (strange, using osx btw, not that it matters anymore)
    - vanderZwan 10y ago
      Probably something like a CDN that timed out the first time then, for whatever reason.
- iheredia 10y ago
  Works fine for me. Using FF48.0.1
zakarum009 10y ago
Is there any way to animate these textures?
- 1wheel 10y ago
  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.
rajangdavis 10y ago
I wish I had a use-case to try this out, but I thought this was very cool. Thank you for sharing.
runeks 10y ago
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.
- nacs 10y ago
  There's a bunch: https://github.com/wbkd/awesome-d3 https://github.com/wbkd/awesome-d3
- softawre 10y ago
  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.
  - deleted 10y ago
    [deleted]
- vbit 10y ago
  If you're familiar with Python, try the Jupyter notebook (jupyter.org) - very useful for quick visualizations while also allowing you to quickly transform the data when necessary. The big advantage is your interactive 'repl' session is persisted as well as editable so you can resume anytime. You can use any one of a number of visualization libraries such as matplotlib, bokeh, and more. Here's a quick start for an idea of the code needed: http://nbviewer.jupyter.org/github/bokeh/bokeh-notebooks/blob/master/quickstart/quickstart.ipynb http://nbviewer.jupyter.org/github/bokeh/bokeh-notebooks/blo...
- STRiDEX 10y ago
  I like http://metricsgraphicsjs.org/examples.htm http://metricsgraphicsjs.org/examples.htm which is built on d3
- workergnome 10y ago
  Look into http://www.highcharts.com http://www.highcharts.com. Much more high level than D3, does nice charts and graphs. Free for non-commercial, and reasonably cheap for commercial work. The other really useful tool is Tableau Public, if your data isn't confidential. GUI interface, but makes visualizing information really easy. The other tool I use a lot is http://p5js.org http://p5js.org. It's more a general-purpose drawing tool, but if all you want to do is put some boxes at (x,y) positions, it's a really good prototyping tool.
the_cat_kittles 10y ago
these textures look absolutely glorious- well done! cant think of anything useful to say, but wanted to give you some positive feedback
qrohlf 10y ago
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 10y ago
  Both this and Textures look really slick, I love them both!
- mdjt 10y ago
  Couldn't agree more, and Trianglify looks super cool.
OliverJones 10y ago
Yow! Zippy meets javascript! Are we having fun yet? Are we? are we? Seriously, this is terrific.
RUG3Y 10y ago
This is a very neat library, I hope that I find myself using this on a project soon! Thanks!
gabrielflorit 10y ago
Very nice, this will come in handy. Beautiful site design too.
aeharding 10y ago
The patterns remind me of MacPaint. http://www.macprices.net/hildreth_moore/macpaintemulator.png http://www.macprices.net/hildreth_moore/macpaintemulator.png
jlebrech 10y ago
great for offices with black and white printers

359 points by iheredia 10y ago

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 10y ago
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
- vegabook 10y ago
  gotcha. Two separate dimensions basically. Colour for one, pattern for the other. Nice.
- justbees 10y ago
  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)
tobr 10y ago
Tufte dismisses these types of patterns as "chartjunk" and "unintentional optical art"[0]. I'm not sure I agree completely - I think patterns can be used as an effective additional data dimension, but you certainly have to be careful not to overdo it. [0] http://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=00040Z http://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0...
- coldtea 10y ago
  >Tufte dismisses these types of patterns as "chartjunk" and "unintentional optical art" What Tufte doesn't understand is that your end goal isn't always information density and great insight. Sometimes aesthetics can be equally or more important than the data. Especially if the data are crap, like 90% of charts used in marketing (), where the marketing part is more important that actually showing something with the chart. () Personal observation, YMMV.
  - baconner 10y ago
    I think tufte understands that people make junk charts on purpose. I think he just doesn't agree that it's a good chart if the purpose isn't to actually inform truthfully . If your data is crap and you know it then basically you are misleading people on purpose. At that point it doesn't really matter if you have a lot of chartjunk as well.
infinite8s 10y ago
Research in 1984 (Graphical Perception: Theory, Experimentation, and Application to the Development of Graphical Methods - by William S. Cleveland and Robert McGill - https://www.cs.ubc.ca/~tmm/courses/cpsc533c-04-spr/readings/cleveland.pdf https://www.cs.ubc.ca/~tmm/courses/cpsc533c-04-spr/readings/...) found that texture (what they call shading) is worse than color saturation for discrimination of quantitative differences. For categorical discrimination it is probably as good as color if limited to a few patterns.

shujito 10y ago

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

vanderZwan 10y ago
Works fine on both FF48.0 and FF51.0a1 on Linux for me; do you have any SVG-related plugins?
- shujito 10y ago
  it started working now (strange, using osx btw, not that it matters anymore)
  - vanderZwan 10y ago
    Probably something like a CDN that timed out the first time then, for whatever reason.
iheredia 10y ago
Works fine for me. Using FF48.0.1

zakarum009 10y ago

Is there any way to animate these textures?

1wheel 10y ago
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.

rajangdavis 10y ago

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

runeks 10y ago

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.

nacs 10y ago
There's a bunch: https://github.com/wbkd/awesome-d3 https://github.com/wbkd/awesome-d3
softawre 10y ago
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.
- deleted 10y ago
  [deleted]
vbit 10y ago
If you're familiar with Python, try the Jupyter notebook (jupyter.org) - very useful for quick visualizations while also allowing you to quickly transform the data when necessary. The big advantage is your interactive 'repl' session is persisted as well as editable so you can resume anytime. You can use any one of a number of visualization libraries such as matplotlib, bokeh, and more. Here's a quick start for an idea of the code needed: http://nbviewer.jupyter.org/github/bokeh/bokeh-notebooks/blob/master/quickstart/quickstart.ipynb http://nbviewer.jupyter.org/github/bokeh/bokeh-notebooks/blo...
STRiDEX 10y ago
I like http://metricsgraphicsjs.org/examples.htm http://metricsgraphicsjs.org/examples.htm which is built on d3
workergnome 10y ago
Look into http://www.highcharts.com http://www.highcharts.com. Much more high level than D3, does nice charts and graphs. Free for non-commercial, and reasonably cheap for commercial work. The other really useful tool is Tableau Public, if your data isn't confidential. GUI interface, but makes visualizing information really easy. The other tool I use a lot is http://p5js.org http://p5js.org. It's more a general-purpose drawing tool, but if all you want to do is put some boxes at (x,y) positions, it's a really good prototyping tool.

the_cat_kittles 10y ago

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

qrohlf 10y ago

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 10y ago
Both this and Textures look really slick, I love them both!
mdjt 10y ago
Couldn't agree more, and Trianglify looks super cool.

OliverJones 10y ago

Yow! Zippy meets javascript! Are we having fun yet? Are we? are we? Seriously, this is terrific.

RUG3Y 10y ago

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

gabrielflorit 10y ago

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

aeharding 10y ago

The patterns remind me of MacPaint. http://www.macprices.net/hildreth_moore/macpaintemulator.png http://www.macprices.net/hildreth_moore/macpaintemulator.png

jlebrech 10y ago

great for offices with black and white printers