Textures.js – SVG patterns for Data Visualization | Hacker News Reader

Textures.js – SVG patterns for Data Visualization

riccardoscalco.github.io

359 pointsiheredia32 comments

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

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

Couldn't agree more, and Trianglify looks super cool.

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.

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 shows combination of two kind of data. One being the light/dark background, and the other being the circle/dash pattern

gotcha. Two separate dimensions basically. Colour for one, pattern for the other. Nice.

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

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

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

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.

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

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

The patterns remind me of MacPaint.

http://www.macprices.net/hildreth_moore/macpaintemulator.png

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

Seriously, this is terrific.

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.

There's a bunch: https://github.com/wbkd/awesome-d3

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.

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

I like http://metricsgraphicsjs.org/examples.htm which is built on d3

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

I found C3 (http://c3js.org/) to be a reasonable layer on top of D3

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

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

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

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

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

Works fine for me. Using FF48.0.1

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

great for offices with black and white printers

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

Is there any way to animate these textures?

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.

Reply on news.ycombinator.com