
Show HN: Textures.js, SVG Patterns for Data Visualization - ricsca
http://riccardoscalco.github.io/textures/
======
anoother
This is lovely. When I see this, I don't think 'patterns', rather, 'hatches'.

Makes me wonder what the state of modern SVG is w.r.t. real-world units -
something like this really makes SVG look useful for for technical drawing,
but pixels are not the best unit to draw to...

~~~
hardmath123
Hmm, an _Asymptote_ to SVG renderer would be pretty useful for displaying
mathematical diagrams on the web.

------
ttty
I never like how they chain methods. A better way would be:

    
    
        texture({lines: true, heavier: true, stroke: 'red'})
    

Is easier to configure if you need reusable textures.

~~~
ricsca
Interesting point. I simply relied o this post of Mike Bostock
[http://bost.ocks.org/mike/chart/](http://bost.ocks.org/mike/chart/).

~~~
wayfarer2s
An initial config object would probably be ideal, and then you could have the
chaining to supplement those values. You could have the initial method take in
the config and use the values in that in place of the defaults. So

    
    
      textures.circles()
        .radius(4)
        .fill("transparent")
        .strokeWidth(2);
    

could initially be

    
    
      var circles = textures.circles({
        radius: 4,
        fill: "transparent",
        strokeWidth: 2 
      });
    

and later updated to be

    
    
      circles.strokeWidth( 1 );
    

Which works rather nicely especially when the config object is generated
dynamically.

------
swayvil
That's so tasty. Like tomato soup for my eyeballs.

I encountered the same issue in my project : 2 levels of polygon-
distinguishment. Made a set of 1 bit seamless textures.

[http://glowinggreenhand.blogspot.com/2014/01/i-made-bunch-
of...](http://glowinggreenhand.blogspot.com/2014/01/i-made-bunch-of-
simple-1-bit-seamless.html)

~~~
ricsca
:D thanks! Very good point.

------
bennstancil
This is pretty cool. I made a really basic example, but in doing it, I could
imagine playing around with having the colors or orientation change with the
data as well. And it might make for cool transitions too. That obviously get
way too complicated pretty quickly, but it'd be fun to see what you could come
up with that might work.

[https://modeanalytics.com/benn/reports/a4515d9b9024](https://modeanalytics.com/benn/reports/a4515d9b9024)

------
collyw
Looks just like the old Mac before they got colour.

------
marxidad
Isn't this what Tufte refers to as "chartjunk"?

~~~
jweir
Tufte points out 1 + 1 is 3 or more visually. The two lines create two
elements, then the space is another, then the space on either is potentially
another.

[http://csarven.ca/one-plus-one-equals-three-or-more](http://csarven.ca/one-
plus-one-equals-three-or-more)

These textures are noisy. There can be occasions to use textures, but these
examples would work just as well with shades of gray.

~~~
ricsca
Interesting point of view. Choices of style apart, there are situations where
textures are useful. Like for example the case faced by swayvil (see the
comment), or when you need b/w printable images. Another good reference is
"Semiology of Graphics" of Jacques Bertin, he has a good opinion about
textures.

~~~
jweir
"Semiology of Graphics" is a great book, but this was published in the 1960s
when those graphs where drafted by hand and color printing was probably not an
option.

I am ignorant as to what tools a draft-mans hand for shading then, but I am
sure hatching would be easier than creating a fine range of halftone grays.

~~~
jacobolus
Here’s what Tufte says:

> Can optical art effects ever produce a better graphic? Bertin exhorts: “It
> is the designer’s duty to make the most of this variation; to obtain the
> resonance [of moiré vibration] without provoking an uncomfortable sensation:
> to flirt with ambiguity without succumbing to it.” But can statistical
> graphics successfully “flirt with ambiguity”? It is a clever idea, but no
> good examples are to be found. The key difficulty remains: moiré vibration
> is an _undisciplined_ ambiguity, with an illusive, eye-straining quality
> that contaminates the entire graphic. It has no place in data graphical
> design.

------
Hytosys
Awesome for colorblind people! Looking forward to using this.

~~~
jweir
Shades of gray would work as well.

Also checkout [http://colorbrewer2.org/](http://colorbrewer2.org/)

It has an option for creating color sets which are "colorblind safe."

------
Fiahil
Very good attention to details! (like the position of circle patterns on edges
of shapes)

Have a star, you deserve it :)

------
dylanrw
Masterful use of contrast and texture. Data vis can stand to have more of
this.

~~~
ricsca
Wow! Thanks.

------
matt4077
Loving the retro look. But I'm not sure if patterns are as good as colors in
communicating data. As soon as the data has even an ordinal scale, gradients
or hues should work better.

~~~
detaro
Patterns are useful if it is intended to be printed (or for other b/w media).
For good color prints or screen usage I agree, colors often can do a better
job.

------
swah
I wish we could have written the documentation for my current project in the
browser instead of LaTeX.

But the need to produce good PDFs killed the idea.

~~~
reverius42
Check out GitBook. They build from Markdown/HTML and can produce interactive
HTML and/or PDF.

~~~
swah
Oh, I looked into it, but if you compare with LaTeX, its pretty simple, but we
need references, and footnoes, and complex tables, so we would need an
extended version, and preprocess it, and.. might as well use LaTeX.

------
sairion
It reminds me of Semiology of Graphics by Bertin. Nice work! I would like to
work on React port, only if I have a spare time...

------
OliverM
This is lovely. I've hand-coded solutions before to show two variables by
region simultaneously (e.g. voting patterns by socio-economic
levels:[http://imgur.com/ww1WV66](http://imgur.com/ww1WV66)). Colour and
texture are nicely independent for showing this stuff.

------
neumann
very nice. One tangential question, the example svg maps are not created in
the browser. How are these typically created?

When I make SVGs they are typically either plots made with a plotting tool, or
paths created from tracing or done purely by hand.

~~~
ricsca
I did it with d3.js and topojson, then I used the resulting svg image on the
website. You can find the code here
[https://github.com/riccardoscalco/textures/blob/gh-
pages/map...](https://github.com/riccardoscalco/textures/blob/gh-pages/map.js)

~~~
ncza
In my opinion the "right" way for static things. Keeps the browser from
computing, no need for the original data and libs. Of course being able to
inspec other people's d3 code is fun on the other hand.

------
BaconJuice
Thank you for sharing this! Can't wait to use this soon :)

Slightly off topic but maybe some SVG expert can help me out with a quick
question! Is there a way to identify and automatically recognize all numbers
in an image.svg file?

~~~
ygra
What kind of numbers? Those appearing alone in attributes, such as <rect
width='10' height='5'/>? Those appearing in path or polygon data are more
complicated, as the syntax allows whitespace, commas, etc. as separators, but
they're not needed in some cases. E.g.

    
    
        M0-1.2.5-3
    

is perfectly valid (AFAIR, not sure about the decimal points now), but not
really nice to parse or extract.

The main point would be what your use case is? If you just need to transform
something, e.g. translate or scale a shape it's easier to put a group around
it and apply a transform on that.

------
mmf
This library is fantastic. These patterns are essential in the production of
print-ready and print-like contents.

With the high resolution screens available today these make for stunning
graphical presentation.

------
emehrkay
Thanks for this. I need to learn SVG for something that I am working on now,
this library looks like it has a great interface for me to learn from.

------
pdknsk
I just want to point out that many of the line textures can also be made with
repeating-linear-gradient() from CSS, perhaps more efficiently so.

------
jwiley
This is lovely, congrats to the author

------
jpatel3
Wonderful! What are the best use case for using this patterns apart from geo
graph representation?

------
rcazangi
Indeed, original and very useful. Exactly what I've been seeking... for some
time.

------
paulliwali
Wow, this is really sweet. Can't wait to use it in my next project.

------
degroote
Great project, just needed such a texture for an app. Thanks!

------
ricsca
Many thanks for the good words! I am happy you like it.

------
radiodario
this is awesome! excellent for monochrome.

------
b4x
Lovely. Style from Italy.

------
hackerews
Incredibly well done.

------
kenrick95
Very beautiful :D

------
bujatt
beautiful!

------
frik
Reminds me of the AutoCAD patterns, back in school.

~~~
shiggerino
For me, the patterns in HyperCard and MacPaint.

