Arc Field

Move mouse to change orientation and size of the arc-like shapes.

Sort of a cross between a vector field and candy buttons.

<html>
<head>
  <title>Arc Field</title>
</head>
<body>
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var width = 960,
    height = 500;

var scale = {
  x: d3.scale.ordinal().rangeRoundBands([0, width]),
  y: d3.scale.ordinal().rangeRoundBands([height, 0]),
  dt: d3.scale.pow().exponent(1.5)
        .domain([0, width])
        .range([1, 2*Math.PI]),
  t0: d3.scale.linear()
        .domain([0, height])
        .range([0, 2*Math.PI]),
  color: d3.scale.linear()
    .domain([0, width*height])
    .range(["rgb(181, 175, 97)", "rgb(192, 79, 82)"])
};

var canvas = d3.select("body").append("canvas")
  .attr("width", width)
  .attr("height", height);

var context = canvas.node().getContext("2d");

var cells = { x: 48, y: 25 };
scale.x.domain(d3.range(0, cells.x));
scale.y.domain(d3.range(0, cells.y));

draw([width/2, height/2]);
canvas.on("mousemove", function() {
  draw(d3.mouse(this));
});

function draw(mouse) {
  context.clearRect(0, 0, width, height);
  d3.range(cells.x * cells.y)
    .forEach(function(i) {
      var x = i % cells.x,
          y = Math.floor(i / cells.x),
          t = 2*Math.PI * (i / (cells.x * cells.y)) +
                scale.t0(mouse[1]);

context.beginPath();
      context.arc(scale.x(x) + scale.x.rangeBand()/2,
                  scale.y(y) + scale.y.rangeBand()/2,
                  8, t - scale.dt(mouse[0]), t);
      context.fillStyle = scale.color(scale.x(x) * scale.y(y));
      context.fill();
      context.closePath();
    });
}
</script>
</body>
</html>

https://d3js.org/d3.v3.min.js