D3 Examples - Argyle

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <style>
​
    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>
​
var angle = Math.PI / 6,
    rx = 30,
    ry = rx / Math.tan(angle),
    diagonal = Math.sqrt(rx * rx + ry * ry);
    width = 960,
    height = Math.ceil(500 / ry) * ry;
​
var svg = d3.select("body").append("svg")
  .attr("width", width)
  .attr("height", height);
​
var diamond = d3.symbol()
  .type(d3.symbolDiamond)
  .size(ry * rx * 2);
​
// Array of [row, column] positions
var positions = d3.merge(d3.range(Math.ceil(height / ry) + 1).map(function(r){
  return d3.range(Math.ceil(width / (rx * 2)) + 1).map(function(c){
    return [r, c];
  });
}));
​
var g = svg.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));
​
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)]);
    });
​
}
​
d3.select(self.frameElement).style("height", height + "px");
​
</script>
​
    