Sieve of Eratosthenes by bricedev

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  font: 9px sans-serif;
}

</style>
<body>
<script src="https://d3js.org/d3.v3.js"></script>
<script>

var width = 960,
    height = 480;

var n = 500,
    rectSize = 30,
    columns = Math.floor(width/rectSize);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g");
  
var data = d3.range(2,n+1);

var rect = svg.selectAll("g")
    .data(data).enter()
  .append("g")
    .attr("transform", function(d,i) { return "translate(" + (i%columns)*rectSize + "," + Math.floor(i/columns)*rectSize + ")"; });

rect.append("rect")
  .classed("unclassed",true)
  .attr("width",rectSize)
  .attr("height",rectSize)
  .style("fill","#66bd63")
  .style("stroke","white");

rect.append("text")
  .attr("x",rectSize/2)
  .attr("y",rectSize/2+3)
  .style("text-anchor","middle")
  .style("fill","white")
  .text(function(d) { return d; });

var list = d3.range(2,n);

var transition = d3.transition()
  .duration(500)
  .delay(500)
  .each("start", function start() { 

    var p = list[0];
    var ind = 0;

    while(p * ind < n){
      ind +=1;
      if (list.indexOf(p*ind) > -1) list.splice(list.indexOf(p*ind),1);
    };

    rect.selectAll(".unclassed")
        .filter(function(d,i) {
          return d===p; 
        })
        .classed("unclassed",false);

    rect.selectAll(".unclassed")
        .filter(function(d,i) {
          return list.indexOf(d)===-1; 
        })
        .classed("unclassed",false)
        .transition()
        .duration(250)
        .style("fill","#f46d43")
        .transition()
        .duration(250)
        .style("opacity",.1);

    if (list.length>0) transition = transition.transition().each("start", start);
  });

d3.select(self.frameElement).style("height", height + "px");

</script>