Show HN: Textures.js, SVG Patterns for Data Visualization (riccardoscalco.github.io)

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.

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

Shades of gray would work as well.

Also checkout http://colorbrewer2.org/

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

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.

Textures and colors can be combined, for example if you need to select according two different group of categories/variables.

Patterns are actually much better for colour-blind people like myself.

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.

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

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

It's pretty good.

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

Interesting point. I simply relied o this post of Mike Bostock http://bost.ocks.org/mike/chart/.

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

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

  circles.strokeWidth( 1 );

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.

    var t = texture().lines().stroke('red')
    if(this.button.on) t= texture.heavier()

    var t = texture({lines: true, heavier: this.button.on, stroke: 'red'})

    var texture = new Texture({lines: true, heavier: this.button.on, stroke: 'red'});

    var t = texture().lines().stroke('red')
    if(this.button.on) t.heavier()

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

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

Tufte is not that omnipotent, did he even ever consider colorblindness? Hatches are awesome substitution for color.

Yes. See http://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0...

:D thanks! Very good point.

Wow! Thanks.