Old school D3 from simpler times

All examples By author By category About

dok

Full window Github gist

D3 - Quarter Circles

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
  <title>Quarter Circles</title>
<script src="https://d3js.org/d3.v3.min.js"></script>

</head>
<body>
  <div id="container">
  </div>

<script>
var height = window.innerHeight;
var width = window.innerWidth;
var radius = 75;
var colors = ["rgb(26, 188, 156)", "rgb(46, 204, 113)", "rgb(52, 152, 219)", "rgb(155, 89, 182)", "rgb(52, 73, 94)", "rgb(22, 160, 133)", "rgb(39, 174, 96)", "rgb(41, 128, 185)", "rgb(142, 68, 173)", "rgb(44, 62, 80)", "rgb(241, 196, 15)", "rgb(230, 126, 34)", "rgb(231, 76, 60)", "rgb(236, 240, 241)", "rgb(149, 165, 166)", "rgb(243, 156, 18)", "rgb(211, 84, 0)", "rgb(192, 57, 43)", "rgb(189, 195, 199)", "rgb(127, 140, 141)"];

var circlePath = function(x, y, r) {

var rand = Math.ceil(Math.random() * 4);
  if(rand === 1) {
    return "M" + (x) + " " + (y + r) +
           " A " + r + " " + r + " 0 0 1 " + (x + r) + " " + (y) +
           " L " + (x + r) + " " + (y + r) + " Z";
  } else if(rand === 2) {
    return "M" + (x) + " " + (y) +
           " A " + r + " " + r + " 0 0 1 " + (x + r) + " " + (y + r) +
           " L " + (x) + " " + (y + r) + " Z";
  } else if(rand === 3) {
    return "M" + (x + r) + " " + (y) +
           " A " + r + " " + r + " 0 0 1 " + (x) + " " + (y + r) +
           " L " + (x) + " " + (y) + " Z";
  } else if(rand === 4) {
    return "M" + (x) + " " + (y) +
           " A " + r + " " + r + " 0 0 0 " + (x + r) + " " + (y + r) +
           " L " + (x + r) + " " + (y) + " Z";
  }
};
var svg = d3.select('body').append('svg').append('g');

var dataSet = [];

for(var i = 0; i < height / radius; i++) {
  for(var j = 0; j < width / radius; j++) {
    dataSet.push(circlePath(j * radius, i * radius, radius));
  }
}

var quarters = svg.selectAll('path.quarters')
                 .data(dataSet, function(d, i) { return i; })
                 .enter().append('path')
                 .transition()
                 .duration(500)
                 .delay(function() { return Math.random() * 1500; })
                 .ease('cubic')
                 .attr('fill', function() { return colors[Math.ceil(Math.random() * colors.length)]; })
                 .attr('d', function(d) { return d; });

var update = function(array) {
  d3.selectAll('path').transition()
                      .delay(function() { return Math.random() * 1000; })
                      .duration(1000)
                      .attr('opacity', '0')
                      .remove();

var quarters = svg.selectAll('path.quarters')
                 .data(dataSet, function(d, i) { return i; })
                 .enter().append('path')
                 .transition()
                 .duration(500)
                 .delay(function() { return Math.random() * 1500; })
                 .ease('cubic')
                 .attr('fill', function() { return colors[Math.ceil(Math.random() * colors.length)]; })
                 .attr('d', function(d) { return d; });

};

var shuffle = function(array) {
  for(var i = 0; i < array[i]; i++) {
      array[i] = circlePath(j * radius, i * radius, radius);
  }
  return array;
};

document.body.onclick = function() {
  update(shuffle(dataSet));
};

</script>
  
</body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

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