Skip to content

Instantly share code, notes, and snippets.

@tpogden

tpogden/.block

Last active January 26, 2017 18:41
Show Gist options
  • Save tpogden/e63a893e60ba0c96badbb98050a2dedc to your computer and use it in GitHub Desktop.
Save tpogden/e63a893e60ba0c96badbb98050a2dedc to your computer and use it in GitHub Desktop.
Download ZIP
Sieve of Eratosthenes
Raw
.block
height: 944
border: no
Raw
README.md
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>Sieve of Eratosthenes</title>
<script src="http://d3js.org/d3.v3.min.js"></script>
<style>
body {
font-family: "Helvetica", sans-serif;
font-size: 10px;
background-color: #272822;
}
.axis {
fill: #f8f8f2;
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #f8f8f2;
shape-rendering: crispEdges;
}
.box rect {
fill: #75715e;
shape-rendering: crispEdges;
}
.box text {
fill: #f8f8f2;
font: 9px sans-serif;
text-anchor: middle;
alignment-baseline: middle;
}
</style>
<body>
<script>
(function() {
var box_size = 1;
var num_wide = 32;
var num_high = 32;
var n = 1024;
box_spacing = 1;
delay = 1000;
fadeInDuration = 500;
fadeOutDuration = 1000;
// Green, Orange, Blue, Pink, Yellow, Purple, Dark Grey
colors = ["#a6e22e", "#fd971f", "#66d9ef", "#f92672", "#e6db74", "#ae81ff",
"#49483e"];
var margin = {top: 20, right: 20, bottom: 40, left: 40},
width = 944 - margin.left - margin.right,
height = 944 - margin.top - margin.bottom; // 480
var x = d3.scale.linear()
.range([0, width])
.domain([0, num_wide]);
var y = d3.scale.linear()
.range([height, 0])
.domain([num_high, 0]);
// Draw SVG
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var boxes = svg.selectAll("g")
.data(d3.range(1,n))
.enter()
.append("g")
.attr("class", "box")
.attr("transform", function(d) { return "translate(" + x(d%num_wide) +
"," + y(Math.floor(d/num_wide)) + ")"; });
boxes.append("rect")
.attr("width", x(box_size) - box_spacing)
.attr("height", y(box_size) - box_spacing)
.attr("x", 1)
.attr("y", 1);
boxes.append("text")
.attr("dx", x(box_size/2))
.attr("dy", y(box_size/2))
.text(function(d) { return d+1; });
function sieveMultiples(n, r, j, stepDelay_) {
setTimeout(function() {
var multiples = r.filter(function(d){ return (d+1)%n == 0; });
var remaining = r.filter(function(d){ return (d+1)%n != 0; })
multiples.selectAll("rect")
.transition()
.duration(fadeInDuration)
.style("fill", colors[j%3]);
var next = remaining.data()[0]+1;
j++;
if (multiples.data().length > 1) {
// Remove the first element, I don't want to fade it
multiples = multiples.filter(function(d, i){ return i != 0; });
fadeMultiples(multiples);
sieveMultiples(next, remaining, j, stepDelay_);
}
else {
r.selectAll("rect")
.transition()
.delay(delay)
.duration(fadeInDuration)
.style("fill", colors[5]);
}
}, stepDelay_)
return remaining;
}
function fadeMultiples(m) {
setTimeout(function() {
m.selectAll("rect")
.transition()
.duration(fadeOutDuration)
.style("fill", "#272822");
m.selectAll("text")
.transition()
.duration(fadeOutDuration)
.style("fill", "#75715e");
}, delay)};
var remaining = boxes;
sieveMultiples(2, remaining, 0, delay);
})();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment