jraines · July 1, 2013 03:58
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Sierpinski triangle</title>
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
  </head>
  <body>
    <script type="text/javascript">
      //Width and height
      var w = 500;
      var h = 300;
      var padding = 10;

      var xScale = d3.scale.linear()
                     .domain([0, w])
                     .range([padding, w - padding]);

      var yScale = d3.scale.linear()
                     .domain([0, w])
                     .range([padding, w - padding]);

      var dataset = [[w, h], [0, h], [w / 2, 0]];
      var triangle = dataset.slice(0);

      //Create SVG element
      var svg = d3.select("body")
            .append("svg")
            .attr("width", w)
            .attr("height", h);

      //Create circles
      svg.selectAll("circle")
         .data(dataset)
         .enter()
         .append("circle")
         .attr("cx", function(d) { return xScale(d[0]); })
         .attr("cy", function(d) { return yScale(d[1]); })
         .attr("r", 1);

      function update(dataset) {
        var circles = svg.selectAll("circle").data(dataset);

        circles.enter()
               .append("circle")
               .attr("cx", function(d) { return xScale(d[0]); })
               .attr("cy", function(d) { return yScale(d[1]); })
               .attr("r", 1);
      }

      function genpoint(triangle, point) {
        var vertex = triangle[Math.floor(Math.random() * triangle.length)];
        var x = (vertex[0] + point[0]) / 2;
        var y = (vertex[1] + point[1]) / 2;
        return [x, y];
      }

      var point = [250, 150];
      dataset.push(point);

      for (var i = 0; i < 5000; i++) {
        point = genpoint(triangle, point);
        dataset.push(point);
      }

      update(dataset);
    </script>
  </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Sierpinski triangle</title>
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	</head>
	<body>
	<script type="text/javascript">
	//Width and height
	var w = 500;
	var h = 300;
	var padding = 10;

	var xScale = d3.scale.linear()
	.domain([0, w])
	.range([padding, w - padding]);

	var yScale = d3.scale.linear()
	.domain([0, w])
	.range([padding, w - padding]);

	var dataset = [[w, h], [0, h], [w / 2, 0]];
	var triangle = dataset.slice(0);

	//Create SVG element
	var svg = d3.select("body")
	.append("svg")
	.attr("width", w)
	.attr("height", h);

	//Create circles
	svg.selectAll("circle")
	.data(dataset)
	.enter()
	.append("circle")
	.attr("cx", function(d) { return xScale(d[0]); })
	.attr("cy", function(d) { return yScale(d[1]); })
	.attr("r", 1);

	function update(dataset) {
	var circles = svg.selectAll("circle").data(dataset);

	circles.enter()
	.append("circle")
	.attr("cx", function(d) { return xScale(d[0]); })
	.attr("cy", function(d) { return yScale(d[1]); })
	.attr("r", 1);
	}

	function genpoint(triangle, point) {
	var vertex = triangle[Math.floor(Math.random() * triangle.length)];
	var x = (vertex[0] + point[0]) / 2;
	var y = (vertex[1] + point[1]) / 2;
	return [x, y];
	}

	var point = [250, 150];
	dataset.push(point);

	for (var i = 0; i < 5000; i++) {
	point = genpoint(triangle, point);
	dataset.push(point);
	}

	update(dataset);
	</script>
	</body>
	</html>