mattsacks · December 13, 2015 20:28
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
  <head>
    <meta charset="utf-8">
    <style>
      svg {
        margin: 0 auto;
        display: block;
      }

      .line {
        stroke: #6CB7D4;
        stroke-opacity: 0.2;
      }

      #adjuster {
        background: #EFEFEF;
        border-radius: 4px;
        border: 1px solid #DDD;
        box-shadow: 0 -1px 0 white, 0 1px 0 rgba(0,0,0,0.05);
        color: #FFF;
        display: block;
        font-family: "Helvetica Neue", "Helvetica", "fuck you", "Impact";
        font-size: 42px;
        font-weight: 100;
        height: 100px;
        letter-spacing: 4px;
        line-height: 100px;
        margin: 50px auto 0;
        text-align: center;
        width: 300px;
      }

      #adjuster:hover {
        cursor: ew-resize;
      }
    </style>
  </head>
  <body>
    <svg></svg>
    <div id="adjuster">ADJUST</div>

    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script>
      Array.prototype.each = function(fn) {
        for (var i = 0, len = this.length; i < len; i++)
          fn(this[i], i);
      };

      var dimension = 500,
          radius = dimension / 2,
          twopi  = Math.PI * 2,
          halfpi = Math.PI / 2,
          n = 5; // default

      // canvas
      var svg = d3.select('svg')
        .attr({
          width: dimension,
          height: dimension
        });

      // container element
      var container = svg
        .append('svg:g')
        .attr('id', 'container')
        .attr('transform', 'rotate(-90 ' + radius + ' ' + radius + ')'); // origin is set at 3'oclock

      // create an array of data points
      function createPoints(n) {
        // generate an array of 13 point coordinates along a circle
        for (var i = 0; i < n; i++) {
          // convert negative coordintes to positive by adding the radius
          var x = radius + (radius * Math.cos((i * twopi) / n)),
              y = radius + (radius * Math.sin((i * twopi) / n));

          data.push([x, y]);
        }
      }

      // connect a point to all other points
      function drawLine(index) {
        data.each(function(datum, i) {
          if (index === i) return;
          var line = container
            .append('svg:line')
            .attr('class', 'line');

          line.attr({
            x1: data[index][0],
            y1: data[index][1],
            x2: datum[0],
            y2: datum[1]
          });
        });
      };

      // draws all lines in the dataset. O(n^2)
      function drawLines() {
        // connect all points to other points
        data.each(function(datum, index) {
          drawLine(index);
        });
      }

      // draws the star
      function drawStar(starN) {
        // clear any existing star
        container.selectAll('*').remove();

        // reset the data
        data = [];
        createPoints(starN);

        // draw that shit
        drawLines();
      }


      function rotateString(angle) {
        return 'rotate(' + angle + ' ' + radius + ' ' + radius + ')';
      };

      // continuously animate the container *unused because its weird looking*
      function rotateStar() {
        container
          .transition()
          .duration(1000)
          .attrTween('transform', function() {
            return d3.interpolateString(rotateString(0), rotateString(360));
          });
      }

      // animate between 5-34 points *unused*
      var interval = undefined;
      function animatePoints() {
        interval = setInterval(function() {
          if (n == 34) n = 5;
          drawStar(n++);
        }, 300);
      }

      // mousemove in the adjust area redraws the star
      var adjuster = document.getElementById('adjuster');
      var x = d3.scale.linear()
        .domain([0, 300]) // the x coordinate of the adjuster
        .rangeRound([4, 34]) // the desired output
        .clamp(true);

      // redraw the star with the x offset
      adjuster.addEventListener('mousemove', function(e) {
        var xCoord = e.pageX - adjuster.offsetLeft;
        drawStar(x(xCoord));
      });

      // mobile-ness
      adjuster.addEventListener('touchmove', function(e) {
        var xCoord = e.targetTouches[0].pageX - adjuster.offsetLeft;
        drawStar(x(xCoord));
      });

      // kick it
      drawStar(25);
    </script>
  </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<style>
	svg {
	margin: 0 auto;
	display: block;
	}

	.line {
	stroke: #6CB7D4;
	stroke-opacity: 0.2;
	}

	#adjuster {
	background: #EFEFEF;
	border-radius: 4px;
	border: 1px solid #DDD;
	box-shadow: 0 -1px 0 white, 0 1px 0 rgba(0,0,0,0.05);
	color: #FFF;
	display: block;
	font-family: "Helvetica Neue", "Helvetica", "fuck you", "Impact";
	font-size: 42px;
	font-weight: 100;
	height: 100px;
	letter-spacing: 4px;
	line-height: 100px;
	margin: 50px auto 0;
	text-align: center;
	width: 300px;
	}

	#adjuster:hover {
	cursor: ew-resize;
	}
	</style>
	</head>
	<body>
	<svg></svg>
	<div id="adjuster">ADJUST</div>

	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script>
	Array.prototype.each = function(fn) {
	for (var i = 0, len = this.length; i < len; i++)
	fn(this[i], i);
	};

	var dimension = 500,
	radius = dimension / 2,
	twopi = Math.PI * 2,
	halfpi = Math.PI / 2,
	n = 5; // default

	// canvas
	var svg = d3.select('svg')
	.attr({
	width: dimension,
	height: dimension
	});

	// container element
	var container = svg
	.append('svg:g')
	.attr('id', 'container')
	.attr('transform', 'rotate(-90 ' + radius + ' ' + radius + ')'); // origin is set at 3'oclock

	// create an array of data points
	function createPoints(n) {
	// generate an array of 13 point coordinates along a circle
	for (var i = 0; i < n; i++) {
	// convert negative coordintes to positive by adding the radius
	var x = radius + (radius * Math.cos((i * twopi) / n)),
	y = radius + (radius * Math.sin((i * twopi) / n));

	data.push([x, y]);
	}
	}

	// connect a point to all other points
	function drawLine(index) {
	data.each(function(datum, i) {
	if (index === i) return;
	var line = container
	.append('svg:line')
	.attr('class', 'line');

	line.attr({
	x1: data[index][0],
	y1: data[index][1],
	x2: datum[0],
	y2: datum[1]
	});
	});
	};

	// draws all lines in the dataset. O(n^2)
	function drawLines() {
	// connect all points to other points
	data.each(function(datum, index) {
	drawLine(index);
	});
	}

	// draws the star
	function drawStar(starN) {
	// clear any existing star
	container.selectAll('*').remove();

	// reset the data
	data = [];
	createPoints(starN);

	// draw that shit
	drawLines();
	}


	function rotateString(angle) {
	return 'rotate(' + angle + ' ' + radius + ' ' + radius + ')';
	};

	// continuously animate the container unused because its weird looking
	function rotateStar() {
	container
	.transition()
	.duration(1000)
	.attrTween('transform', function() {
	return d3.interpolateString(rotateString(0), rotateString(360));
	});
	}

	// animate between 5-34 points unused
	var interval = undefined;
	function animatePoints() {
	interval = setInterval(function() {
	if (n == 34) n = 5;
	drawStar(n++);
	}, 300);
	}

	// mousemove in the adjust area redraws the star
	var adjuster = document.getElementById('adjuster');
	var x = d3.scale.linear()
	.domain([0, 300]) // the x coordinate of the adjuster
	.rangeRound([4, 34]) // the desired output
	.clamp(true);

	// redraw the star with the x offset
	adjuster.addEventListener('mousemove', function(e) {
	var xCoord = e.pageX - adjuster.offsetLeft;
	drawStar(x(xCoord));
	});

	// mobile-ness
	adjuster.addEventListener('touchmove', function(e) {
	var xCoord = e.targetTouches[0].pageX - adjuster.offsetLeft;
	drawStar(x(xCoord));
	});

	// kick it
	drawStar(25);
	</script>
	</body>
	</html>