7 ms·

Show HN: Textures.js, SVG Patterns for Data Visualization

404 points by ricsca 12y ago

radiodario 12y ago
this is awesome! excellent for monochrome.
paulliwali 12y ago
Wow, this is really sweet. Can't wait to use it in my next project.
BaconJuice 12y ago
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 12y ago
  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.
anoother 12y ago
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 12y ago
  Hmm, an Asymptote to SVG renderer would be pretty useful for displaying mathematical diagrams on the web.
collyw 12y ago
Looks just like the old Mac before they got colour.
Hytosys 12y ago
Awesome for colorblind people! Looking forward to using this.
- jweir 12y ago
  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."
OliverM 12y ago
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.
degroote 12y ago
Great project, just needed such a texture for an app. Thanks!
matt4077 12y ago
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 12y ago
  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.
- ricsca 12y ago
  Textures and colors can be combined, for example if you need to select according two different group of categories/variables.
- Normangorman 12y ago
  Patterns are actually much better for colour-blind people like myself.
- kenbellows 12y ago
  You are probably right if the data you're representing is scaled, but this sort of solution is fantastic for categorical data. Also, see other comments re: accessibility for colorblindness. Not necessarily a silver bullet, but possibly a solid solution in some circumstances.
Fiahil 12y ago
Very good attention to details! (like the position of circle patterns on edges of shapes) Have a star, you deserve it :)
kenrick95 12y ago
Very beautiful :D
b4x 12y ago
Lovely. Style from Italy.
neumann 12y ago
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 12y ago
  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.js https://github.com/riccardoscalco/textures/blob/gh-pages/map...
  - ncza 12y ago
    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.
  - neumann 12y ago
    Thanks for the update! I was unaware of the power of geoJSON (also githubs neat mapping of them) and access to data from places such as gadm.org. Is that where you source the data?
ricsca 12y ago
Many thanks for the good words! I am happy you like it.
swah 12y ago
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.
- gearhart 12y ago
  We've had good success with wkhtmltopdf All of our invoices and reports are built for the web and then converted on the fly to pdfs and emailed out to clients who prefer them that way. You lose the interactivity, which is a shame for some d3 reports, and you have to be a little careful (design for page breaks, test it as if it's a slightly fickle browser that you have to support, ensure that everything is visible without requiring interaction) but it keeps all of your development within the same tool stack and gives you web versions of them all for free. For reference, I ran it on the textures.js page and put the results here: https://drive.google.com/file/d/0B5BP6Na7GalZOXdWdlh6MElWTDQ/view?usp=sharing https://drive.google.com/file/d/0B5BP6Na7GalZOXdWdlh6MElWTDQ... It's pretty good.
- reverius42 12y ago
  Check out GitBook. They build from Markdown/HTML and can produce interactive HTML and/or PDF.
  - swah 12y ago
    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.
ttty 12y ago
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 12y ago
  Interesting point. I simply relied o this post of Mike Bostock http://bost.ocks.org/mike/chart/ http://bost.ocks.org/mike/chart/.
  - findjashua 12y ago
    imho, if the operations are to be performed in a certain order, use chaining. Otherwise, passing a config object is much cleaner
  - wayfarer2s 12y ago
    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.
  - bkirwi 12y ago
    Yeah, it makes sense to mimic the D3 style: the only thing worse than a bad convention is two conventions.
- mbostock 12y ago
  Aren’t these textures already reusable? The constructed texture object (the result of textures.lines(), e.g.) can be called on as many selections as you like to reuse it. I feel it’s a matter of taste, but one practical reason I prefer chaining to configuration objects is that you get a runtime error when you misspell a property, rather than it being silently ignored.
marxidad 12y ago
Isn't this what Tufte refers to as "chartjunk"?
- jweir 12y ago
  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 12y ago
    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 12y ago
      "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 12y ago
        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.
swayvil 12y ago
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-simple-1-bit-seamless.html http://glowinggreenhand.blogspot.com/2014/01/i-made-bunch-of...
- ricsca 12y ago
  :D thanks! Very good point.
emehrkay 12y ago
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.
jwiley 12y ago
This is lovely, congrats to the author
bujatt 12y ago
beautiful!
dylanrw 12y ago
Masterful use of contrast and texture. Data vis can stand to have more of this.
- ricsca 12y ago
  Wow! Thanks.
sairion 12y ago
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...
rcazangi 12y ago
Indeed, original and very useful. Exactly what I've been seeking... for some time.
pdknsk 12y ago
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.
frik 12y ago
Reminds me of the AutoCAD patterns, back in school.
- shiggerino 12y ago
  For me, the patterns in HyperCard and MacPaint.
hackerews 12y ago
Incredibly well done.
bennstancil 12y ago
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
jpatel3 12y ago
Wonderful! What are the best use case for using this patterns apart from geo graph representation?
mmf 12y ago
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.

404 points by ricsca 12y ago

radiodario 12y ago

this is awesome! excellent for monochrome.

paulliwali 12y ago

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

BaconJuice 12y ago

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 12y ago
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.

anoother 12y ago

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 12y ago
Hmm, an Asymptote to SVG renderer would be pretty useful for displaying mathematical diagrams on the web.

collyw 12y ago

Looks just like the old Mac before they got colour.

Hytosys 12y ago

Awesome for colorblind people! Looking forward to using this.

jweir 12y ago
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."

OliverM 12y ago

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.

degroote 12y ago

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

matt4077 12y ago

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 12y ago
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.
ricsca 12y ago
Textures and colors can be combined, for example if you need to select according two different group of categories/variables.
Normangorman 12y ago
Patterns are actually much better for colour-blind people like myself.
kenbellows 12y ago
You are probably right if the data you're representing is scaled, but this sort of solution is fantastic for categorical data. Also, see other comments re: accessibility for colorblindness. Not necessarily a silver bullet, but possibly a solid solution in some circumstances.

Fiahil 12y ago

Very good attention to details! (like the position of circle patterns on edges of shapes) Have a star, you deserve it :)

kenrick95 12y ago

Very beautiful :D

b4x 12y ago

Lovely. Style from Italy.

neumann 12y ago

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 12y ago
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.js https://github.com/riccardoscalco/textures/blob/gh-pages/map...
- ncza 12y ago
  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.
- neumann 12y ago
  Thanks for the update! I was unaware of the power of geoJSON (also githubs neat mapping of them) and access to data from places such as gadm.org. Is that where you source the data?

ricsca 12y ago

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

swah 12y ago

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.

gearhart 12y ago
We've had good success with wkhtmltopdf All of our invoices and reports are built for the web and then converted on the fly to pdfs and emailed out to clients who prefer them that way. You lose the interactivity, which is a shame for some d3 reports, and you have to be a little careful (design for page breaks, test it as if it's a slightly fickle browser that you have to support, ensure that everything is visible without requiring interaction) but it keeps all of your development within the same tool stack and gives you web versions of them all for free. For reference, I ran it on the textures.js page and put the results here: https://drive.google.com/file/d/0B5BP6Na7GalZOXdWdlh6MElWTDQ/view?usp=sharing https://drive.google.com/file/d/0B5BP6Na7GalZOXdWdlh6MElWTDQ... It's pretty good.
reverius42 12y ago
Check out GitBook. They build from Markdown/HTML and can produce interactive HTML and/or PDF.
- swah 12y ago
  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.

ttty 12y ago

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 12y ago
Interesting point. I simply relied o this post of Mike Bostock http://bost.ocks.org/mike/chart/ http://bost.ocks.org/mike/chart/.
- findjashua 12y ago
  imho, if the operations are to be performed in a certain order, use chaining. Otherwise, passing a config object is much cleaner
- wayfarer2s 12y ago
  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.
- bkirwi 12y ago
  Yeah, it makes sense to mimic the D3 style: the only thing worse than a bad convention is two conventions.
mbostock 12y ago
Aren’t these textures already reusable? The constructed texture object (the result of textures.lines(), e.g.) can be called on as many selections as you like to reuse it. I feel it’s a matter of taste, but one practical reason I prefer chaining to configuration objects is that you get a runtime error when you misspell a property, rather than it being silently ignored.

marxidad 12y ago

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

jweir 12y ago
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 12y ago
  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 12y ago
    "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 12y ago
      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.

swayvil 12y ago

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-simple-1-bit-seamless.html http://glowinggreenhand.blogspot.com/2014/01/i-made-bunch-of...

ricsca 12y ago
:D thanks! Very good point.

emehrkay 12y ago

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.

jwiley 12y ago

This is lovely, congrats to the author

bujatt 12y ago

beautiful!

dylanrw 12y ago

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

ricsca 12y ago
Wow! Thanks.

sairion 12y ago

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

rcazangi 12y ago

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

pdknsk 12y ago

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.

frik 12y ago

Reminds me of the AutoCAD patterns, back in school.

shiggerino 12y ago
For me, the patterns in HyperCard and MacPaint.

hackerews 12y ago

Incredibly well done.

bennstancil 12y ago

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

jpatel3 12y ago

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

mmf 12y ago

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.