D3 Examples - Argyle <pattern>

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <style>
    
    html, body {
      height: 100%
    }
    
    path {
      stroke: none;
    }
    
    line {
      stroke: #444;
      stroke-width: 1px;
      stroke-linecap: round;
      opacity: 0.8;
    }
    
    @media (-webkit-min-device-pixel-ratio: 1.5),
    (min-resolution: 1.5dppx) {
      line {
        stroke-width: 0.6px;
        opacity: 0.95;
      }
    }
  
  </style>
</head>
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="argyle.js"></script>
<script>
​
  "use strict";
​
  var angle = Math.PI / 6,
    rx = 30,
    ry = rx / Math.tan(angle),
    diagonal = Math.sqrt(rx * rx + ry * ry);
​
  var svg = d3.select("body").append("svg")
    .attr("width", "100%")
    .attr("height", "100%");
​
  var diamond = d3.symbol()
    .type(d3.symbolDiamond)
    .size(ry * rx * 2);
​
  // Array of [row, column] positions
  var positions = (function () {
    var arr = [];
    for (var i = 0; i < 5; ++i) {
      for (var j = 0; j < 5; ++j) {
        arr.push([i, j]);
      }
    }
    return arr;
  }());
​
  var mainG = svg.append("g");
​
  var defs = svg.append("defs");
​
  var pattern = defs.append("pattern")
    .attr("id", "argyle")
    .attr("patternUnits", "userSpaceOnUse")
    .attr("x", 0)
    .attr("y", 0)
    .attr("width", rx * 4)
    .attr("height", ry * 4);
​
  var g = pattern.selectAll(".diamond")
    .data(positions)
    .enter()
    .append("g")
    .attr("transform", function (d) {
​
      // Odd-r coordinates
      var x = (d[0] % 2 ? rx : 0) + d[1] * rx * 2,
        y = d[0] * ry;
​
      return "translate(" + x + " " + y + ")";
​
    });
​
  var background = g.append("path")
    .attr("d", diamond);
​
  g.append("line")
    .attr("x1", rx / 2)
    .attr("x2", -rx / 2);
​
  g.append("line")
    .attr("x1", -rx / 2)
    .attr("x2", rx / 2);
​
  // Separate lines + calculated dasharray to prevent cuts
  var stitch = g.selectAll("line")
    .attr("y1", -ry / 2)
    .attr("y2", ry / 2)
    .attr("stroke-dasharray", (diagonal / 30) + "," + (diagonal / 30))
    .attr("stroke-dashoffset", (-diagonal / 60));
​
  mainG.append("circle")
    .attr("fill", "url(#argyle)")
    .attr("cx", "50%")
    .attr("cy", "50%")
    .attr("r", "25%");
​
  recolor(true);
​
  function recolor(first) {
​
    var pattern = argyle();
​
    var t = d3.transition()
      .delay(first ? 0 : 1000)
      .duration(first ? 0 : 1000)
      .on("end", recolor);
​
    background.transition(t)
      .styleTween("fill", function (d) {
        return d3.interpolateLab(getComputedStyle(this).getPropertyValue("fill"), pattern.color(d));
      });
​
    stitch.transition(t)
      .styleTween("stroke", function (d) {
        return d3.interpolateLab(getComputedStyle(this).getPropertyValue("stroke"), pattern.stitch[pattern.color(d)]);
      });
​
  }
​
</script>
</body>
</html>
    