SierpinskiTriangle

Sierpinski Triangle d3.js demo

Built with blockbuilder.org

More demos: bl.ocks.org/jonyrock

Follow me on twitter: twitter.com/corpglory

See d3.js video tutorials

Join our Slack community about datavis and creative coding

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>

<body>

</svg>
</div>
<div class="row" style="width: 300px; margin:auto">

<table style="width:100%">
    <tr>
      <td style="width:100px">Level: <span id="levelLabel"> 1 </span></td>
    </tr>
  </table>

var sq32 = Math.sqrt(3) / 2;
  var svg = d3.select("#svgHolder svg")
    .attr("width", width)
    .attr("height", height)

function add(posa, posb) {
    return [posa[0] + posb[0], posa[1] + posb[1]];
  }

function drawSierpinski(selection, a, pos, level, maxLevel) {

if(level > maxLevel) {
      return;
    }

function getTrPathPoints(sk) {
      return [[a / 2 * sk, sq32 * a * sk], [-a / 2 * sk, sq32 * a * sk]];
    }

function getTrPath() {
      var pnts = getTrPathPoints(1);
      var trianglePath = d3.path();
      trianglePath.moveTo(0, 0);
      trianglePath.lineTo(pnts[0][0], pnts[0][1]);
      trianglePath.lineTo(pnts[1][0], pnts[1][1]);
      trianglePath.closePath();
      return trianglePath.toString();
    }

var g = selection.append('g');

if(level == maxLevel) {
      g
        .append('path')
        .attr("d", getTrPath())

.attr("fill", fillColor)
      var transform = 'translate(' + pos[0] + ',' + pos[1] + ')';

g.attr('transform', transform)
    }

var pnts = getTrPathPoints(0.5);
    drawSierpinski(selection, a/2, pos, level + 1, maxLevel);
    drawSierpinski(selection, a/2, add(pos, pnts[0]), level + 1, maxLevel);
    drawSierpinski(selection, a/2, add(pos, pnts[1]), level + 1, maxLevel);
  }

var sierpinskiGroup = undefined;

function onLevelChange() {
    var val = $('#levelRange').val();
    $('#levelLabel').text(val);
    if(sierpinskiGroup) {
      sierpinskiGroup.remove();
    }
    sierpinskiGroup = svg
      .append('g')
      .call(drawSierpinski, height, [width / 2, 0], 0, +val)
  }
  onLevelChange();

</script>
</body>

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

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js