Star Polygons

<!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>

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>

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

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