β(s) Spirals

<!DOCTYPE html>
<meta charset="utf-8">
<style>
path { fill: none; stroke: steelblue; }
.axis path, .axis line { stroke: #000; shape-rendering: crispEdges; }
</style>
<body>
<script src="https://d3js.org/d3.v2.min.js?2.10.0"></script>
<script>
var margin = {top: 20, right: 20, bottom: 40, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom,
    x = d3.scale.linear().domain([2.5, 8]).range([0, width]),
    y = d3.scale.linear().domain([-2, 2]).range([height, 0]),
    n = 50;

var vis = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + [margin.left, margin.top] + ")");

vis.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + y(0) + ")")
    .call(d3.svg.axis().scale(x).orient("bottom"));

var leibniz = dirichletBeta(1),
    catalan = dirichletBeta(2);

vis.append("path")
    .attr("d", spiral(function(k) { return 4 * leibniz(k); }));
vis.append("path")
    .attr("d", spiral(function(k) { return 8 * leibniz(k); }));
vis.append("path")
    .attr("d", spiral(function(k) { return 4 * catalan(k); }));
vis.append("path")
    .attr("d", spiral(function(k) { return 8 * catalan(k); }));

function dirichletBeta(x) {
  return function(k) {
    return Math.pow(-1, k) * Math.pow(2 * k + 1, -x);
  };
}

function spiral(f) {
  var arc = [],
      sum = 0;
  for (var i = 0; i < n; i++) {
    var term = f(i);
    sum += term;
    term = Math.abs(term);
    if (i) arc.push("A", [term, term, 0, 0, 0, x(sum), y(0)]);
    else arc.push("M", [x(sum), y(0)]);
  }
  return arc.join("");
}

</script>

Modified http://d3js.org/d3.v2.min.js?2.10.0 to a secure url

https://d3js.org/d3.v2.min.js?2.10.0