console
function init() {
function get_row(n, row) {
return Math.floor((n - 1) / row);
}
function get_col(n, row) {
return (n - 1) % row;
}
var svg = d3.select("svg")
.attr("width", 500)
.attr("height", 500);
svg.selectAll("g").data([]).exit().remove();
cells = svg.selectAll("g")
.data(d3.range(1, 101))
.enter()
.append("g")
.attr("transform", d => "translate(" + (get_col(d, 10) * 50 + 5) + "," + (get_row(d, 10) * 50 + 5) + ")")
.append("g")
rects = cells.append("rect")
.attr("width", 40)
.attr("height", 40)
.attr("rx", 5)
.attr("ry", 5)
.attr("fill", "black")
texts = cells.append("text")
.text(d => d)
.style("text-anchor", "middle")
.style("dominant-baseline", "middle")
.style("fill", "white")
.attr("x", 20)
.attr("y", 20)
}
primes = []
for (let i = 2; i <= 100; i++) {
let isprime = true;
for (let j of primes) {
if (i % j == 0) {
isprime = false;
break;
}
}
if (isprime) {
primes.push(i);
}
}
function nthcell(n) {
return d3.select("svg>g:nth-child(" + n + ")>g>rect")
}
function select_as_prime(cell) {
cell.transition().duration(400)
.attr("transform", "translate(4, 4) scale(0.8, 0.8)")
.attr("fill", "red");
}
function omit_as_not_prime(cell) {
cell.transition()
.duration(400)
.attr("transform", "translate(4, 4) scale(0.8, 0.8)")
.attr("fill", "#ccc")
.attr("stroke", "red")
.attr("stroke-width", 8)
.transition()
.duration(400)
.attr("transform", "")
.attr("stroke-width", 0);
}
function sieve_method1(index) {
if (index === undefined) {
omit_as_not_prime(nthcell(1));
setTimeout(() => sieve_method1(0), 1000);
}
if (index < primes.length) {
prime = primes[index];
select_as_prime(nthcell(prime));
for (let i = prime + prime; i <= 100; i += prime) {
omit_as_not_prime(nthcell(i));
}
setTimeout(() => sieve_method1(index + 1), 1000);
}
}
init();
sieve_method1();
<svg>
</svg>
svg {
background: #fff;
}