Textures.js

SVG patterns for Data Visualization

map

Textures are useful for the
selective perception of different categories

View on Github

Getting started

-- from the top of d3.js --

var svg = d3.select("#example")
  .append("svg");

var t = textures.lines()
  .thicker();

svg.call(t);

svg.append("circle")
  .attr("r", radius)
  .style("fill", t.url());

Lines

textures.lines();
textures.lines()
  .heavier();
textures.lines()
  .lighter();
textures.lines()
  .thicker();
textures.lines()
  .thinner();
textures.lines()
  .heavier(10)
  .thinner(1.5);
textures.lines()
  .size(4)
  .strokeWidth(1);
textures.lines()
  .size(8)
  .strokeWidth(2);
textures.lines()
  .orientation("vertical")
  .strokeWidth(1)
  .shapeRendering("crispEdges");
textures.lines()
  .orientation("3/8")
  .stroke("darkorange");
textures.lines()
  .orientation("3/8", "7/8")
  .stroke("darkorange");
textures.lines()
  .orientation("vertical", "horizontal")
  .size(4)
  .strokeWidth(1)
  .shapeRendering("crispEdges")
  .stroke("darkorange");
textures.lines()
  .orientation("diagonal")
  .size(40)
  .strokeWidth(26)
  .stroke("darkorange")
  .background("firebrick");

Colors and textures can be combined
to have further levels of selection

Circles

textures.circles();
textures.circles()
  .heavier();
textures.circles()
  .lighter();
textures.circles()
  .thicker();
textures.circles()
  .thinner();
textures.circles()
  .complement();
textures.circles()
  .size(5);
textures.circles()
  .radius(4);
textures.circles()
  .radius(4)
  .fill("transparent")
  .strokeWidth(2);
textures.circles()
  .radius(4)
  .fill("darkorange")
  .strokeWidth(2)
  .stroke("firebrick")
  .complement();
textures.circles()
  .size(10)
  .radius(2)
  .fill("firebrick")
  .background("darkorange");

Textures of increasing size can represent an order relation

map

Paths

textures.paths()
  .d("hexagons")
  .size(8)
  .strokeWidth(2)
  .stroke("darkorange");
textures.paths()
  .d("crosses")
  .lighter()
  .thicker();
textures.paths()
  .d("caps")
  .lighter()
  .thicker()
  .stroke("darkorange");
textures.paths()
  .d("woven")
  .lighter()
  .thicker();
textures.paths()
  .d("waves")
  .thicker()
  .stroke("firebrick");
textures.paths()
  .d("nylon")
  .lighter()
  .shapeRendering("crispEdges");
textures.paths()
  .d("squares")
  .stroke("darkorange");

Create custom patterns

var t = textures.paths()
  .d(s =>
    `M 0,${s * 3 / 4} 
    l ${s / 2},${-s / 2} 
    l ${s / 2},${s / 2}`
  )
  .size(20)
  .strokeWidth(1)
  .thicker(2)
  .stroke("darkorange");