progressive variability (grids) by romsson

index.html


<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="//d3js.org/d3.v4.js"></script>
<script src="//romsson.github.io/d3-gridding/build/d3-gridding.js"></script>
<script>

var width = 600,
    height = 400;

var gridding = d3.gridding()
  .size([width, height])
  .mode("horizontal");

var jitter = 3,
    n = 20,
    l = 38;

var line = d3.line()
  .x(function(d) {
    return d.x + Math.random() * jitter - jitter/2;
  })
  .y(function(d) {
    return d.y + Math.random() * jitter * (25 * (d.id / l)) - 35 * d.id / l ;
  })
  .curve(d3.curveBasis);

var data =  d3.range(n).map(function(d, i) {
  return {index: i};
});

var svgSquares = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)

svgSquares.selectAll(".line")
    .data(gridding(data))
  .enter().append("path")
    .attr("class", "line")
    .style("fill", "none")
    .style("stroke", "black")
    .style("stroke-width", 1)
    .attr("d", function(d) {
      var points = d3.range(l).map(function(e, j) {
        var res = {};
        res.x = d.x + (e * d.width / l);
        res.y = d.cy;
        res.index = d.index;
        res.id = j;
        return res;
      });
      return line(points);
    });

</script>