Visualising the Sieve of Eratosthenes method for generating primes up to n = 1024.
Last active
January 26, 2017 18:41
-
-
Save tpogden/e63a893e60ba0c96badbb98050a2dedc to your computer and use it in GitHub Desktop.
Sieve of Eratosthenes
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| height: 944 | |
| border: no |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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