D3 Examples - Periodex

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style> body { margin: 0 } </style>
</head>
​
<body>
  <svg width="960" height="960"></svg>
  <script>
    var rules = {
          A: "AB",
          B: "AB"
        },
        initialState = "A",
        iterations = 14,
        L = function(str){
          return str.split("").map(function (d){
            return rules[d];
          }).join("")
        },
        data = d3.range(iterations).map(function iterate(i){
          return i ? L(iterate(i - 1)) : initialState;
        });
    
    var svg = d3.select("svg"),
        width = svg.attr("width"),
        height = svg.attr("height"),
        x = d3.scaleBand()
          .range([-Math.PI, Math.PI]),
        y = d3.scaleBand()
          .domain(d3.range(iterations))
          .range([0, width/2]),
        arc = d3.arc()
          .cornerRadius(5),
        arcs = data
          .map(function(str, j){
            x.domain(d3.range(str.length));
            return str.split("")
              .map(function (symbol, i){
                return {
                  symbol: symbol,
                  innerRadius: y(j),
                  outerRadius: y(j) + y.bandwidth() - 1,
                  startAngle:  x(i),
                  endAngle:    x(i) + x.bandwidth()
                };
              })
              .filter(function (d){
                return d.symbol === "A";
              });
          })
          .reduce(function (a, b){
            return a.concat(b);
          }, []);
    
    svg.append("g")
        .attr("transform", "translate(" + [width/2, height/2] + ")")
      .selectAll("path").data(arcs)
      .enter().append("path")
        .attr("d", arc)
        .attr("fill", "black");
    
  </script>
</body>
    