Art in Pi, Experiment #1 by sxywu

index.html

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <script src="//underscorejs.org/underscore-min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width: 100%; height: 100%; }
  </style>
</head>

<body>
  <svg></svg>
  <script>
    var piString = "3.141592653589793238462643383279502884197169399375105820974944592307816406286208998628034825342117067982148086513282306647093844609550582231725359408128481";
    var width = 900;
    var height = 900;
    var length = 50;
    
    d3.select('svg')
    	.append('path')
    	.attr('d', function() {
      	var x = width / 2;
        var y = height / 2;
      	var d = 'M' + x + ',' + y;
      	
      	_.each(piString, function(int) {
          int = parseInt(int);
          if (_.isNaN(int)) return;
          var radian = (2 * Math.PI) / 10 * int - (Math.PI / 2);
          x += length * Math.cos(radian);
          y += length * Math.sin(radian);
          
          d += ' L' + x + ',' + y;
        });
      
      	return d;
      }).attr('fill', 'none')
    	.attr('stroke', '#666')
    	.attr('stroke-width', 2);
  </script>
</body>