Skip to content

Instantly share code, notes, and snippets.

@freelanceastro

freelanceastro/README.md

Last active December 17, 2015 23:08
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save freelanceastro/5686772 to your computer and use it in GitHub Desktop.
Save freelanceastro/5686772 to your computer and use it in GitHub Desktop.
Download ZIP
The Fundamental Theorem of Arithmetic
Raw
README.md

A visualization of the fundamental theorem of arithmetic, using D3.js. This was my first D3 project, and my first project of any serious size in JavaScript, so there's a fair amount of weird crap in the code. But it gets the job done, it works on both mobile and desktop browsers pretty well, and I've commented it to hell and back to make it clear what's going on.

Raw
fund_theorem_script.js
///////////////////////////////////////////////////////////
// First, let's set some global variables and functions. //
///////////////////////////////////////////////////////////
// Does what it says on the tin -- this function returns a truthy value if the input is prime, and a falsy one otherwise.
isPrime = function(i) {
if (i < 2) {return 0;};
var result = 1;
var l = 2;
while (result && l <= Math.sqrt(i)){
result = i%l;
l += 1;
}
return result;
};
// We need a function that returns the prime factors of a number as an array of objects --
// and it needs to return the right *number* of each factor.
var primeFac = function(x) {
var primefacs = [] // A place for the prime factors to live.
if (isPrime(x)) {primefacs.push({name:x, value:1});} // If the input is prime, put it into the list of prime factors and skip to the end.
else {
for (var i = 2; i < x; i += 1) {
if (isPrime(i) && (x%i === 0)) { // if it's both prime and a factor...
primefacs.push({name:i, value:1}); // ...put it in the list of prime factors...
var q = x/i;
while (q%i === 0) {
primefacs.push({name:i, value:1}) // ...and keep putting in that factor as many times as you can.
q /= i;
}
}
}
}
return primefacs;
};
var productString = function(x) {
// If x is composite, returns a string expressing the product of x's prime factors.
// If x is prime, returns a string saying "X is prime!"
// If x is 1, returns a string saying "Why isn't 1 prime?"
if (x === 1) {return "why isn't 1 prime?";}
else if (isPrime(x)) {return x + " is prime!";};
var primestring = "";
for (var i = 2; i < x; i += 1) {
if (isPrime(i) && (x%i === 0)) { // if it's both prime and a factor...
primestring += i + " \u00D7 "; // ...put it in the product of prime factors...
var q = x/i;
while (q%i === 0) {
primestring += i + " \u00D7 "; // ...and keep putting in that factor as many times as you can.
q /= i;
}
}
}
primestring = primestring.slice(0, -2);
primestring += " = " + x
return primestring;
}
// And a simple key-obtaining function.
var keys = function(d) {return d.key;};
var labelsize_fit = function(text, desired_size, alloted_space){
// Places dummy text of the desired size, measures its length, deletes the dummy text
// and then scales the size of the actual label appropriately if it won't fit in the alloted space at the desired size.
// This makes it possible to scale the font size within the prime numbers and factors properly.
// I doubt that many users will actually get up to four-digit primes, where this is relevant.
// But on a site with over 100,000 hits per day, we should at least account for the possibility...
var newsize = 0;
svg.append("text")
.attr("opacity", 0)
.text(text)
.attr("font-family", "sans-serif")
.attr("font-size", desired_size)
.each(function(){
newsize = Math.min(1, alloted_space/this.getComputedTextLength()) * desired_size;
})
.remove();
return newsize;
};
// Time for D3!
///////////////////////////////
// Setting up the SVG canvas //
///////////////////////////////
// Find the height and width of the current window.
// Note that this will not rescale if you change the window size while on the page,
// but I find it hard to care about that.
// var H = d3.select("body").property("scrollHeight");
// var W = d3.select("body").property("scrollWidth");
var H = window.innerHeight;
var W = window.innerWidth;
var svg = d3.select("body").append("svg") // Create the big svg canvas that will hold all of the stuff.
.attr("height", H)
.attr("width", W);
svg.append("line") // Laying down a number line.
.attr("x1", 0)
.attr("x2", W)
.attr("y1", 9*H/16)
.attr("y2", 9*H/16);
// Drawing the question mark in the lower-right corner.
var q = svg.append("a")
.attr("xlink:href", "http://en.wikipedia.org/wiki/Fundamental_theorem_of_arithmetic")
.attr("xlink:show", "new")
.append("text")
.text("?")
.attr("font-family", "sans-serif")
.attr("text-anchor", "middle")
.attr("font-size", Math.min(W, H)/20)
.attr("x", 14*W/15)
.attr("y", 14*H/15)
.attr("opacity", 0.2);
////////////////////////////////////////////////////////////////////
// Setting up the natural numbers (the lower part of the display) //
////////////////////////////////////////////////////////////////////
// Pick the natural number that will show up as "in focus" when the page loads.
var nat_central_val = 24;
// The number of natural numbers displayed in the lower part of the display. This must be an odd number.
var num_nats = 11;
// Populating an array with our natural number objects.
var nat_min = nat_central_val - (num_nats - 1)/2;
var nat_max = nat_central_val + (num_nats - 1)/2;
var naturals = [];
for (var j = 0; j < num_nats; j += 1){
naturals.push({key:j, ord:j, value:d3.range(nat_min, nat_max + 1)[j]}); // d3.range() is basically Python's range() function, thank goodness.
// Value is the actual natural number.
// key is how D3 will keep track of the different natural number objects.
// ord is the ordinality, in the common sense -- first, second, third -- of the natural number among those on the screen.
// I need this for scaling purposes.
// ord is the same as key at the start, but they'll vary wildly once the interactivity starts up.
};
var nat_central = naturals[(num_nats - 1)/2] // The central natural number object.
////////////////////////////////////
// Setting up the scales for the natural numbers, which is a pain!
// It's complicated, because they have to get bigger and then smaller again.
// They also have to have that scaling transform appropriately when transitions occur, so it all has to scale nicely.
// Oh, and we need to keep the right spacing between them, and make sure that the damn thing looks good.
//
// Here's the overall scaling strategy:
// First, create an appropriate scale that looks good for relative sizes of circles from a minimum size up to a maximum size,
// ignoring the size of the SVG canvas. (natScale_sub1)
// Next, get that function to count down back to the minimum size
// once it's handed a value past the ordinal value of nat_central. (natScale_sub2)
// Finally, renormalize all of this to make sure everything fits on the SVG canvas. (natScale)
// Attach a few methods to natScale for the position of each circle and their actual radii once you take spacing into account,
// and you're good to go!
var nat_spacing = 0.2; // Spacing between natural numbers.
var natScale_sub1 = d3.scale.pow().exponent(3) // Feel free to vary the type of scale here for visual effect.
.domain(d3.range(num_nats).slice(0,(num_nats + 1)/2))
.range([1, 1.05]);
// It doesn't much matter what these numbers are specifically.
// Their ratio determines the ratio of sizes of the biggest and smallest natural number circles.
// Feel free to tune it to your liking.
var natScale_sub2 = function(i) {
var arg = i < (num_nats + 1)/2 ? i : num_nats - i - 1; // maps [0, 1, ... , num_nats - 1] onto [0, 1, ..., (num_nats - 1)/2, ..., 1, 0]
return natScale_sub1(arg);
};
var natScale_sum = d3.range(num_nats).map(natScale_sub2); // map the sub-scale over the entire range of keys
natScale_sum = natScale_sum.reduce(function(a, b) {return a + b;}); // sum the whole array
var natScale = function(i) { // Re-scaling the sub-scale to the width of the svg element.
var result = natScale_sub2(i);
result *= W/natScale_sum;
return result;
};
natScale.pos = function(i) {
// Returns the cumulative sum of natScale up to i - 1, plus half of natScale(i).
// In other words, returns the x-coordinate of the center of circle i within the SVG on natScale.
var result = d3.range(num_nats).slice(0,i).map(natScale);
try {result = result.reduce(function(a, b) {return a + b;});}
catch (err) {result = 0;} // if i = 0, then reduce will return a ValueError for acting on an empty array.
result += natScale(i)/2;
return result;
};
natScale.rad = function(i){
// Returns the radius of the i-th circle, based on natScale and the spacing constant.
return natScale(i)*(1 - nat_spacing)/2;
}
/////////////////////////////
// Finally draw some stuff!
// Add the natural number circles and labels to the canvas.
var nat_circles = svg.selectAll("circle.natural")
.data(naturals, function(d) {return d.key;})
.enter()
.append("circle")
.attr("class", "natural")
.attr("cx", function(d) {return natScale.pos(d.ord);})
.attr("cy", 9*H/16)
.attr("r", function(d) {return natScale.rad(d.ord);});
var nat_labels = svg.selectAll("text.natural")
.data(naturals, function(d) {return d.key;})
.enter()
.append("text")
.text(function(d) {return d.value;})
.attr("class", "natural")
.attr("x", function(d) {return natScale.pos(d.ord);})
.attr("y", function(d) {return 9*H/16 - 1.05*natScale.rad(d.ord);})
.attr("font-size", function(d) {return natScale(d.ord)/6;}); // Picked this size because it looks good, nothing more
//////////////////////////////////////////////////////////////////
// Setting up the prime numbers (the upper part of the display) //
//////////////////////////////////////////////////////////////////
// Setting the minimum size for the primes' text
// if they go below this size, the primes just vanish altogether.
var min_prime_size = 2;
// Populating an array with the prime number objects less than nat_central.value.
var primes = [];
for (var i = 2; i <= nat_central.value; i += 1) {
if (isPrime(i)) {
var pobj = {key:(primes.length), value:i};
primes.push(pobj);
};
};
// Setting up the prime number scale.
// Thankfully, this is far more straightforward than the natural number scale.
var max_prime_rad = Math.max(W, H)/36; // We don't want to let the primes get too big, or else they'll eat the screen at the low end of the number line.
// This is just a nice number that I pulled out of a hat. Feel free to tweak it.
var prime_spacing = 0.15; // spacing between bands on prime scale
// alternate minimum and maximum of the prime scale, keeping the primes from getting too big.
var alt_prime_min = (W - (1 + 2*prime_spacing)*max_prime_rad*primes.length)/2;
var alt_prime_max = (W + (1 + 2*prime_spacing)*max_prime_rad*primes.length)/2;
var primeScale = d3.scale.ordinal()
.domain(d3.range(primes.length))
.rangeRoundBands([Math.max(0, alt_prime_min), Math.min(W, alt_prime_max)], prime_spacing);
// Adding in a label for the infinite prime dust.
svg.append("a")
.attr("xlink:href", "http://en.wikipedia.org/wiki/Euclid%27s_theorem")
.attr("xlink:show", "new")
.attr("id", "new-prime-label-link")
.append("text")
.text("the primes, like dust...")
.attr("id", "new-prime-label")
.attr('x', W/2)
.attr('y', 3* min_prime_size + natScale(nat_central.ord)/10)
.attr('font-size', natScale(nat_central.ord)/10);
// And adding in a label for the primes as a whole.
svg.append('text')
.attr("id", "prime-label")
.text("prime numbers")
.attr('x', W/2)
.attr('y', 1.5 * primeScale.rangeBand() + natScale(nat_central.ord)/10)
.attr('font-size', natScale(nat_central.ord)/10);
// Making sure the primes are NOT drawn if they're too small!
if ( primeScale.rangeBand()/2 >= min_prime_size){
// Actually drawing the primes and their labels up top!
svg.selectAll("circle.prime")
.data(primes)
.enter()
.append("circle")
.attr("class", "prime")
.attr("cx", function(d, i) {return primeScale(i) + primeScale.rangeBand()/2;})
.attr("cy", primeScale.rangeBand()) // Always one diameter from the top!
.attr("r", primeScale.rangeBand()/2)
.attr("value", function(d) {return d.value;})
svg.selectAll('text.prime')
.data(primes)
.enter()
.append('text')
.text(function(d) {return d.value;})
.attr("class", "prime")
.attr('x', function(d, i) { return primeScale(i) + primeScale.rangeBand()/2;})
.attr('y', function(d) { return 1.175 * primeScale.rangeBand(); }) // Apparently, in this font, numbers are 0.7 their font size.
.attr("font-size", primeScale.rangeBand()/2);
// Make the prime-dust label invisible.
svg.selectAll("#new-prime-label")
.style("opacity", 0)
.attr("font-size", 0);
}
else {
// Make the normal prime label invisible.
svg.selectAll("#prime-label")
.style("opacity", 0)
.attr("font-size", 0);
};
/////////////////////////////////////////////////////////////////////////
// Setting up the prime factors (the circles that fly in from the top) //
////////////////////////////////////////////////////////////////////////
// I'm taking advantage of d3's pack() layout to automatically calculate the positions of prime factors within the natural number circle.
// This is a little complicated, but not nearly as complicated as working out the geometry manually.
// This number determines the amount of padding between prime factors.
var pad_width = 5;
// The object that we'll feed into d3.layout.pack().
// It represents the central natural number and its relationship to its prime factors.
var nat_bubble = {name:nat_central.value, value:1, children:primeFac(nat_central.value)};
// Setting up the pack layout.
var bubble = d3.layout.pack()
.size([natScale.rad(nat_central.ord), natScale.rad(nat_central.ord)])
.sort(null)
.padding(pad_width);
var bubble_g = svg.append("g");
// Drawing some invisible circles.
// This is necessary to get pack.nodes() to calculate and populate the necessary data fields.
var fakecircles = bubble_g.selectAll(".nodes")
.data(bubble.nodes(nat_bubble))
.enter()
.append("circle")
.attr("opacity", 0);
var bubblevars = fakecircles.data() // Pulls the objects out of the fakecircles data field -- this is the only reason those circles exist!
var bigc = bubblevars.shift(); // The big circle the prime factors are enclosed in.
var pvars = bubblevars; // The prime factors
// Centering and rescaling the prime factor circles within the natural number circle in focus.
for (var i = 0; i < pvars.length; i += 1) {
pvars[i].x = (pvars[i].x - bigc.x)/bigc.r * natScale.rad(nat_central.ord) + W/2;
pvars[i].y = (pvars[i].y - bigc.y)/bigc.r * natScale.rad(nat_central.ord) + 9*H/16;
pvars[i].r *= natScale.rad(nat_central.ord)/bigc.r;
};
// Cleaning up our mess.
delete bubble;
fakecircles.remove();
bubble_g.remove();
//////////////////////////////////////////////////////////////////////////////////////////////////////
// Initial transition: putting prime factors into the first natural number in focus on page load. //
/////////////////////////////////////////////////////////////////////////////////////////////////////
// First, find the prime factors you need to work with and hollow them out.
// Since there can be multiple instances of the same factor, you'll need a set.
// But JavaScript has no sets and no list comprehensions, so you'll have to do this manually.
var pfacs = [];
for (var i = 0; i < pvars.length; i += 1){
if (pvars[i].name !== pfacs.slice(-1)[0]) { // Add the prime factor to the list, but only if it's not there already!
pfacs.push(pvars[i].name);
}
};
var isPfac = function(d, i) {
return pfacs.some(function(x) {return x === d.value;}); // if any entry in pfacs is equal to d.value, return true
};
// Select only the primes that are prime factors of the subject number and hollow them out.
if ( primeScale.rangeBand()/2 >= min_prime_size){
svg.selectAll("circle.prime")
.filter(isPfac)
.attr("class", "hollow-prime");
svg.selectAll("text.prime")
.filter(isPfac)
.attr("class", "hollow-prime");
};
// Then, draw over the hollowed-out primes with the necessary number of prime factor circles.
// We need the old locations and sizes of the circles, up at the top of the page,
// so let's get those and put them in pvars as the "old" location and size.
if ( primeScale.rangeBand()/2 >= min_prime_size){
for (var j = 0; j < pvars.length; j += 1){
var old_circle = svg.selectAll("circle.hollow-prime")
.filter(function(d, i) {return d.value === pvars[j].name;});
pvars[j].old_cx = old_circle.attr("cx");
pvars[j].old_cy = old_circle.attr("cy");
pvars[j].old_r = old_circle.attr("r");
};
}
else {
for (var j = 0; j < pvars.length; j += 1){
pvars[j].old_cx = W/2;
pvars[j].old_cy = 0;
pvars[j].old_r = 0;
};
};
// Now use those "old" locations and sizes to draw the prime factors and their labels in their initial positions.
var newprimes = svg.selectAll("circle.prime-factor")
.data(pvars)
.enter()
.append("circle")
.attr("class", "prime-factor")
.attr("cx", function(d) {return d.old_cx;})
.attr("cy", function(d) {return d.old_cy;})
.attr("r", function(d) {return d.old_r;});
var newlabels = svg.selectAll('text.prime-factor')
.data(pvars)
.enter()
.append('text')
.text(function(d) {return d.name;})
.attr("class", "prime-factor")
.attr('x', function(d) { return d.old_cx;})
.attr('y', function(d) { return 1.175 * d.old_cy;}) // Apparently, in this font, numbers are 0.7 their font size.
.attr("font-size", function(d) {return d.old_r;});
// And print the equation -- but with a tiny size, so we can transition it in.
svg.append("text")
.attr("id", "prime-equation")
.text(productString(nat_central.value))
.attr("x", W/2)
.attr("y", 9*H/16 + 1.5*natScale.rad(nat_central.ord))
.attr("font-size", 0);
// Defining a function that transitions the prime factors down to the natural numbers.
// We'll be calling this a lot.
var primefac_transition = function(){
newprimes.transition()
.duration(1000)
.attr("cx", function(d) {return d.x;})
.attr("cy", function(d) {return d.y;})
.attr("r", function(d) {return d.r;});
newlabels.transition()
.duration(1000)
.attr("x", function(d) {return d.x;})
// .attr("y", function(d) {return d.y + 0.35 * d.r;})
// .attr("font-size", function(d) {return d.r;});
.attr('y', function(d) {
var ls = labelsize_fit(d.name, d.r, 2*d.r)
return d.y + 0.35 * ls;
})
.attr("font-size", function(d) {return 0.95*labelsize_fit(d.name, d.r, 2*d.r)});
svg.selectAll("#prime-equation")
.transition()
.delay(500)
.duration(500)
.attr("font-size", natScale(nat_central.ord)/6);
};
////////////////////////////////////////////////////////////////////////////////////////////
// The splash screen, the skip button, and the initial transition with the prime factors. //
////////////////////////////////////////////////////////////////////////////////////////////
// Lay down a giant rectangle covering everything on the SVG canvas..
var splash = svg.append("rect")
.attr("id", "splash")
.attr("width", W)
.attr("height", H)
.attr("opacity", 1);
// Set up the text we want to display, line by line.
var splash_strings = ["The fundamental theorem of arithmetic:",
"every whole number larger than one",
'is either a <strong class="splash-emph">prime</strong> number',
'or can be expressed as a <strong class="splash-emph">unique product</strong> of prime numbers.'];
// Attach that text to a few finely-crafted divs --
// it has to be divs, otherwise the in-line HTML tags won't come out.
// There *is* a way to get in-line HTML on SVG text, but this is easier for now.
var splash_text = d3.select("body").selectAll("div.splash")
.data(splash_strings)
.enter()
.append("div")
.attr("class", "splash")
.style("width", W + "px")
.style("left", "0px")
.style("top", function(d, i) {return (H/4 + i*H/10) + "px";})
.html(function(d) {return d;})
.style("font-size", H/20 + "px")
.style("opacity", 0);
// Set up the skip button as some unobtrusive text in the upper-right corner.
// Clicking this at any point will instantly remove the giant rectangle, all of the divs with our text, and the skip button itself,
// and it will also start up the initial transition of prime factors down to their natural number.
var splash_skip = svg.append("text")
.text("skip >")
.attr("font-family", "sans-serif")
.attr("text-anchor", "middle")
.attr("font-size", H/40)
.attr("x", 7*W/8)
.attr("y", H/20)
.attr("opacity", 0.15)
.on("click", function(thing) {
splash_text.remove();
splash.remove();
d3.select(this).remove();
primefac_transition();
});
// Transition in the divs with our text, one by one --
// and then after a reasonable amount of time, turn down the opacity on all of them and remove them.
splash_text.transition()
.duration(1500)
.delay(function(d, i) {return i*2000})
.style("opacity", 1.0)
.transition()
.delay(10500)
.duration(1500)
.style("opacity", 0)
.remove();
// Turn down the opacity on the giant rectangle in sync with the text and remove it.
splash.transition()
.delay(10500)
.duration(1500)
.attr("opacity", 0)
.remove();
// If we reach the point where the splash screen starts going away of its own accord,
// turn off the skip button and transition it to invisibility in sync with the rest of the splash screen.
// Then, when it's done, start up the initial transition of the prime factors down to their natural number.
// Finally, remove the skip button altogether.
splash_skip.transition()
.delay(10500)
.duration(1500)
.each("start", function(){
d3.select(this).attr("pointer-events", "none");
})
.attr("opacity", 0)
.each("end", primefac_transition)
.remove();
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Interactive transitions: changing the natural number in focus when you click on it and bringing down its prime factors, //
// and other stuff like the tooltips and mouseovers for the natural numbers. //
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Defining some functions that determine what happens when certain actions are taken.
// We'll call them when we bind listeners to objects later on.
var over_func = function(nat_num) {
// Defines response for mousing over a natural number.
d3.select(this)
.transition()
.duration(300)
.attr("r", function(d) {return 1.15*natScale.rad(d.ord);});
var key = nat_num.key;
svg.selectAll("text.natural")
.filter(function(d) {return d.key === key;})
.transition()
.duration(300)
.attr("y", function(d) {return 9*H/16 - 1.20*natScale.rad(d.ord);});
};
var out_func = function(nat_num) {
// Defines response for mousing out of a natural number.
d3.select(this)
.transition()
.duration(100)
.attr("r", function(d) {return natScale.rad(d.ord);});
var key = nat_num.key;
svg.selectAll("text.natural")
.filter(function(d) {return d.key === key;})
.transition()
.duration(100)
.attr("y", function(d) {return 9*H/16 - 1.05*natScale.rad(d.ord);});
};
var one_over_func = function(d) {
// Defines response for popping up the tooltip about one not being prime.
var boxwidth = W/7;
// //Get the x/y values for the tooltip based on the position of the mouse.
var xPosition = d3.mouse(svg[0][0])[0];
var yPosition = d3.mouse(svg[0][0])[1];
//Update the tooltip position and value
d3.select("#one-tooltip")
.style("width", boxwidth + "px")
.style("left", xPosition + "px")
.style("top", yPosition + "px")
.select("p")
.style("font-size", W/80 + "px");
//Show the tooltip
d3.select("#one-tooltip").classed("hidden", false);
};
var one_out_func = function() {
// Hides the one-isn't-prime tooltip.
d3.select("#one-tooltip").classed("hidden", true);
};
///////////////////////////
// The main event: the function that defines response when natural numbers are clicked.
var clickfunc = function(nat_num_obj) {
////////////////////////////////////////////////////////////////////////////////////////////////////
// FIRST: turn off all natural circles' mouse sensitivity, and ensure they're all the right size. //
////////////////////////////////////////////////////////////////////////////////////////////////////
d3.select(this)
.on("mouseover", null)
.on("mouseout", null)
.on("click", null);
svg.selectAll("circle.natural")
.style("pointer-events", "none")
.attr("r", function(d) {return natScale.rad(d.ord);});
svg.selectAll("text.natural")
.style("pointer-events", "none")
.attr("y", function(d) {return 9*H/16 - 1.05*natScale.rad(d.ord);});
/////////////////////////////////
// Quickly send the prime factors back to where they came from,
// fill in the hollow primes, remove the prime factors entirely,
// and get rid of the old equation.
svg.selectAll(".hollow-prime")
.attr("class", "prime");
svg.selectAll("circle.prime-factor")
.attr("class", "old-prime-factor")
.data([])
.exit()
.transition()
.duration(500)
.attr("cx", function(d) {return d.old_cx;})
.attr("cy", function(d) {return d.old_cy;})
.attr("r", function(d) {return d.old_r;})
.remove();
svg.selectAll("text.prime-factor")
.attr("class", "old-prime-factor")
.data([])
.exit()
.transition()
.duration(500)
.attr("x", function(d) {return d.old_cx;})
.attr("y", function(d) {return 1.175 * d.old_cy;})
.attr("font-size", function(d) {return d.old_r;})
.remove();
svg.selectAll("#prime-equation")
.attr("id", "old-prime-equation")
.transition()
.duration(500)
.attr("font-size", 0)
.remove()
/////////////////////////
// Now ID the natural number that was clicked and determine its relationship to the old central number.
var diff = nat_num_obj.value - nat_central.value;
var diff_bool = diff > 0;
var diff_sign = diff/Math.abs(diff);
/////////////////////
// Then, add in the necessary new natural number objects to naturals, update the remaining ones, and remove the old ones.
// Update the old ord values.
naturals.forEach(function(o) {o.ord -= diff;});
// Finding the new natural numbers.
var new_nats = diff_bool? d3.range(nat_max + 1, nat_max + diff + 1) : d3.range(nat_min + diff, nat_min);
var max_key_var = d3.max(naturals.map(keys));
// Adding in the new natural number objects.
for (var j = 0; j < new_nats.length; j += 1){
var ord_var = diff_bool? num_nats - diff + j : j;
var key_var = max_key_var + j + 1; // Making sure that none of the keys are duplicates.
naturals.push({key:key_var, ord:ord_var, value:new_nats[j]}); // d3.range() is basically Python's range() function, thank goodness.
// Value is the actual natural number.
// key is how D3 will keep track of the different natural number objects.
// ord is the ordinality, in the common sense -- first, second, third -- of the natural number among those on the screen.
// I need this for scaling purposes.
};
// Removing the old natural number objects.
// We couldn't do this first, because we had to make sure no duplicate keys were created.
// And no, we can't just have a permanently existing number line --
// making it big enough to ensure the user could never reach the end in a reasonable amount of time would make a *huge* array.
// I don't want a sluggish response, and this will work.
// Filtering out natural number objects whose values are more than the appropriate distance away from the new central value.
var oldNat = function(o) {
return Math.abs(o.value - nat_num_obj.value) <= (num_nats - 1)/2;
};
naturals = naturals.filter(oldNat);
// Filtering out natural number objects whose values are bad (i.e. too low.)
// We don't have to worry about the user hitting max_int, because that would take about 60 million years.
var badNat = function(o) {
return o.value > 0;
};
naturals = naturals.filter(badNat);
///////////////////////
// Binding the new naturals to nat_circles and nat_labels, and creating objects just off the SVG canvas for the new naturals.
var nat_circles = svg.selectAll("circle.natural").data(naturals, keys);
var nat_labels = svg.selectAll("text.natural").data(naturals, keys);
nat_circles.enter()
.append("circle")
.attr("class", "natural")
.attr("cx", function(d) {
// Line up the entering natural numbers in order just outside the left or right side of the SVG, as appropriate.
return diff_bool? W + (d.ord - (num_nats - 1) + diff)*natScale.pos(0) : (d.ord + diff)*2*natScale.pos(0);
})
.attr("cy", 9*H/16)
.attr("r", natScale.rad(0)); // as small as the smallest natural-number circle.
nat_labels.enter()
.append("text")
.text(function(d) {
return d.value;
})
.attr("class", "natural")
.attr("x", function(d) {
// Line up the entering natural numbers in order just outside the left or right side of the SVG, as appropriate.
return diff_bool? W + (d.ord - (num_nats - 1) + diff)*natScale.pos(0) : (d.ord + diff)*2*natScale.pos(0);
})
.attr("y", 9*H/16 - 1.05*natScale.rad(0))
.attr("font-size", natScale(0)/6); // as small as the smallest natural-number label.
//////////////////////
// Natural number exit transitions.
nat_circles.exit()
.transition()
.duration(1000)
.each("start", function(){
d3.select(this)
.style("pointer-events", "none"); // Making the element unclickable, to prevent interrupting the transition.
})
.attr("cx", function(d) {
// Line up the exiting natural numbers in order just outside the left or right side of the SVG, as appropriate.
return diff_bool? d.ord * 2*natScale.pos(0) : W + (d.ord - (num_nats - 1))*2*natScale.pos(0);
})
.attr("r", natScale.rad(0))
.remove();
nat_labels.exit()
.transition()
.duration(1000)
.each("start", function(){
d3.select(this)
.style("pointer-events", "none"); // Making the element unclickable, to prevent interrupting the transition.
})
.attr("x", function(d) {
// Line up the exiting natural numbers in order just outside the left or right side of the SVG, as appropriate.
return diff_bool? d.ord * 2*natScale.pos(0) : W + (d.ord - (num_nats - 1))*2*natScale.pos(0);
})
.attr("y", 9*H/16 - 1.05*natScale.rad(0))
.attr("font-size", natScale(0)/6)
.remove();
///////////////////////
// Natural number enter transitions.
nat_circles.transition()
.duration(1000)
.each("start", function(){
d3.select(this)
.style("pointer-events", "none"); // Making the element unclickable, to prevent interrupting the transition.
})
.attr("cx", function(d) {return natScale.pos(d.ord);})
.attr("cy", 9*H/16)
.attr("r", function(d) {return natScale.rad(d.ord);})
.each("end", function(){
d3.select(this)
.style("pointer-events", null); // Restoring the element's clickability.
});
nat_labels.transition()
.duration(1000)
.each("start", function(){
d3.select(this)
.style("pointer-events", "none"); // Making the element unclickable, to prevent interrupting the transition.
})
.attr("x", function(d) {return natScale.pos(d.ord);})
.attr("y", function(d) {return 9*H/16 - 1.05*natScale.rad(d.ord);})
.attr("font-size", function(d) {return natScale(d.ord)/6;}) // Picked this size because it looks good, nothing more
.each("end", function(){
d3.select(this)
.style("pointer-events", null); // Restoring the element's clickability.
});
// Making sure all the circles have all the appropriate event listeners.
// d3.selectAll(".natural")
// .on("click", clickfunc);
d3.selectAll("circle.natural")
.on("mouseover", over_func)
.on("mouseout", out_func);
d3.selectAll(".natural")
.call(drag_thing);
// Except, of course, for the central one.
d3.selectAll(".natural")
.filter(function(d) {return d.ord === (num_nats - 1)/ 2;})
.on("mouseover", null)
.on("mouseout", null)
.on("click", null);
////////////////////
// Adding and removing prime number objects from the primes array.
if (diff_bool){ // If the new natural number is bigger...
for (var i = nat_central.value + 1; i <= nat_num_obj.value; i += 1){
if (isPrime(i)) {
var pobj = {key:(primes.length), value:i}; // ...add all primes between the old natural number and the new one.
primes.push(pobj);
};
};
}
else { // If the old natural number is bigger than the new one...
for (var i = nat_central.value; i > nat_num_obj.value; i -= 1){
if (isPrime(i)) {
primes.pop(); // ...remove the last prime for each prime between the two numbers.
};
};
};
/////////////////////////
// Reset the globals to prepare for a new click, and to make it easier to bring down the new prime factors.
nat_central = nat_num_obj; // The central natural number object.
nat_min = nat_central.value - (num_nats - 1)/2;
nat_max = nat_central.value + (num_nats - 1)/2;
///////////////////
// Prime number binding, scaling, enter and exit transitions.
// Resetting the prime number scale.
// Thankfully, this is far more straightforward than the natural number scale.
// alternate minimum and maximum of the prime scale, keeping the primes from getting too big.
var alt_prime_min = (W - (1 + 2*prime_spacing)*max_prime_rad*primes.length)/2;
var alt_prime_max = (W + (1 + 2*prime_spacing)*max_prime_rad*primes.length)/2;
primeScale = d3.scale.ordinal()
.domain(d3.range(primes.length))
.rangeRoundBands([Math.max(0, alt_prime_min), Math.min(W, alt_prime_max)], prime_spacing);
if (primeScale.rangeBand()/2 >= min_prime_size || nat_central.value === 1){
// Binding the primes to the circles and text.
prime_circles = svg.selectAll("circle.prime").data(primes);
prime_labels = svg.selectAll('text.prime').data(primes);
// Drawing the new primes and their labels up top, super-tiny, so they can pop in from nowhere.
prime_circles.enter()
.append("circle")
.attr("class", "prime")
.attr("cx", function(d, i) {return primeScale(i) + primeScale.rangeBand()/2;})
.attr("cy", primeScale.rangeBand()) // Always one diameter from the top!
.attr("r", 0)
.attr("value", function(d) {return d.value;});
prime_labels.enter()
.append('text')
.text(function(d) {return d.value;})
.attr("class", "prime")
.attr('x', function(d, i) { return primeScale(i) + primeScale.rangeBand()/2;})
.attr('y', function(d) { return Math.round(1.175 * primeScale.rangeBand()); }) // Apparently, in this font, numbers are 0.7 their font size.
.attr("font-size", 0);
// Exiting the old primes.
prime_circles.exit()
.transition()
.duration(500)
.attr("r", 0)
.remove();
prime_labels.exit()
.transition()
.duration(500)
.attr("font-size", 0)
.remove();
// Transitioning in the new primes!
prime_circles.transition()
.duration(1000)
.attr("cx", function(d, i) {return primeScale(i) + primeScale.rangeBand()/2;}) // Move everyone over...
.attr("cy", primeScale.rangeBand()) // Always one diameter from the top!
.attr("r", primeScale.rangeBand()/2); // ...scale them down as needed, and scale the new one in!
prime_labels.transition()
.duration(1000)
.attr('x', function(d, i) { return primeScale(i) + primeScale.rangeBand()/2;}) // Move everyone over...
.attr('y', function(d) { return Math.round(1.175 * primeScale.rangeBand()); })
.attr("font-size", primeScale.rangeBand()/2); // ...scale them down as needed, and scale the new one in!
svg.select("#prime-label")
.transition()
.duration(1000)
.each("end", function(){dummy_clickfunc(nat_num_obj);})
.style("opacity", 0.5)
.attr("font-size", natScale(nat_central.ord)/10)
.attr('y', 1.5 * primeScale.rangeBand() + natScale(nat_central.ord)/10);
svg.select("#new-prime-label")
.transition()
.duration(1000)
.style("opacity", 0)
.attr("font-size", 0);
}
else {
// Getting rid of any primes that are still hanging out.
prime_circles = svg.selectAll("circle.prime").data([]);
prime_labels = svg.selectAll('text.prime').data([]);
prime_circles.exit().remove();
prime_labels.exit().remove();
svg.select("#prime-label")
.transition()
.duration(1000)
.each("end", function(){dummy_clickfunc(nat_num_obj);})
.style("opacity", 0)
.attr("font-size", 0);
svg.select("#new-prime-label")
.transition()
.duration(1000)
.style("opacity", 0.5)
.attr("font-size", natScale(nat_central.ord)/10);
};
///////////////////
// Bringing down the new prime factors.
//////
// First, we have to set up the bubbles again.
// The object that we'll feed into d3.layout.pack().
// It represents the central natural number and its relationship to its prime factors.
var nat_bubble = {name:nat_central.value, value:1, children:primeFac(nat_central.value)};
// Setting up the pack layout.
var bubble = d3.layout.pack()
.size([natScale.rad(nat_central.ord), natScale.rad(nat_central.ord)])
.sort(null)
.padding(pad_width);
var bubble_g = svg.append("g");
// Drawing some invisible circles.
// This is necessary to get pack.nodes() to calculate and populate the necessary data fields.
var fakecircles = bubble_g.selectAll(".nodes")
.data(bubble.nodes(nat_bubble))
.enter()
.append("circle")
.attr("opacity", 0);
var bubblevars = fakecircles.data() // Pulls the objects out of the fakecircles data field -- this is the only reason those circles exist!
var bigc = bubblevars.shift(); // The big circle the prime factors are enclosed in.
var pvars = bubblevars; // The prime factors
// Centering and rescaling the prime factor circles within the natural number circle in focus.
for (var i = 0; i < pvars.length; i += 1) {
pvars[i].x = (pvars[i].x - bigc.x)/bigc.x * natScale.rad(nat_central.ord) + W/2;
pvars[i].y = (pvars[i].y - bigc.y)/bigc.y * natScale.rad(nat_central.ord) + 9*H/16;
pvars[i].r *= natScale.rad(nat_central.ord)/bigc.y;
};
// Cleaning up our mess.
delete bubble;
fakecircles.remove();
bubble_g.remove();
////////////////////////////
// Now, find the prime factors you need to work with and hollow them out.
// Since there can be multiple instances of the same factor, you'll need a set.
// But JavaScript has no sets and no list comprehensions, so you'll have to do this manually.
var pfacs = [];
for (var i = 0; i < pvars.length; i += 1){
if (pvars[i].name !== pfacs.slice(-1)[0]) { // If the prime factor isn't in the list already, add it!
pfacs.push(pvars[i].name);
}
};
var isPfac = function(d, i) {
return pfacs.some(function(x) {return x === d.value;}); // if any entry in pfacs is equal to d.value, return true
};
// Select only the primes that are prime factors of the subject number and hollow them out.
svg.selectAll("circle.prime")
.filter(isPfac)
.attr("class", "hollow-prime");
svg.selectAll("text.prime")
.filter(isPfac)
.attr("class", "hollow-prime");
// Then, draw over those primes with the necessary number of circles.
// We need the old locations and sizes of the circles, up at the top of the page,
// so let's get those and put them in pvars as the "old" location and size.
if ( primeScale.rangeBand()/2 >= min_prime_size){
for (var j = 0; j < pvars.length; j += 1){
var old_circle = svg.selectAll("circle.hollow-prime")
.filter(function(d, i) {return d.value === pvars[j].name;});
pvars[j].old_cx = old_circle.attr("cx");
pvars[j].old_cy = old_circle.attr("cy");
pvars[j].old_r = old_circle.attr("r");
};
}
else {
for (var j = 0; j < pvars.length; j += 1){
pvars[j].old_cx = W/2;
pvars[j].old_cy = 0;
pvars[j].old_r = 0;
};
};
newprimes = svg.selectAll("circle.prime-factor")
.data(pvars)
.enter()
.append("circle")
.attr("class", "prime-factor")
.attr("cx", function(d) {return d.old_cx;})
.attr("cy", function(d) {return d.old_cy;})
.attr("r", function(d) {return d.old_r;})
newlabels = svg.selectAll('text.prime-factor')
.data(pvars)
.enter()
.append('text')
.text(function(d) {return d.name;})
.attr("class", "prime-factor")
.attr('x', function(d, i) { return d.old_cx;})
.attr('y', function(d) { return 1.175 * d.old_cy; }) // Apparently, in this font, numbers are 0.7 their font size.
.attr("font-size", function(d) {return d.old_r;});
// Print the new equation, but make it super-tiny.
svg.append("text")
.attr("id", "prime-equation")
.text(productString(nat_central.value))
.attr("x", W/2)
.attr("y", 9*H/16 + 1.5*natScale.rad(nat_central.ord))
.attr("font-size", 0);
// Finally, transition those circles to their locations in the bigger circle and scale up the new equation.
primefac_transition()
// Add a couple of listeners if nat_central.value is 1 in order to bring up the one-isn't-prime tooltip.
if (nat_central.value === 1) {
svg.selectAll("#prime-equation")
.on("mouseover", one_over_func)
.on("mouseout", one_out_func);
svg.selectAll("circle.natural")
.filter(function(d) {return d.value === 1;})
.on("mouseover", one_over_func)
.on("mouseout", one_out_func);
}
else {
one_out_func();
};
};
var dummy_clickfunc = function(nat_num_obj) {
////////////////////////////////////////////////////////////////////////////////////////////////////
// FIRST: turn off all natural circles' mouse sensitivity, and ensure they're all the right size. //
////////////////////////////////////////////////////////////////////////////////////////////////////
d3.select(this)
.on("mouseover", null)
.on("mouseout", null)
.on("click", null);
svg.selectAll("circle.natural")
.style("pointer-events", "none")
.attr("r", function(d) {return natScale.rad(d.ord);});
svg.selectAll("text.natural")
.style("pointer-events", "none")
.attr("y", function(d) {return 9*H/16 - 1.05*natScale.rad(d.ord);});
///////////////////////
// Natural number transitions.
var nat_circles = svg.selectAll("circle.natural");
var nat_labels = svg.selectAll("text.natural");
nat_circles.transition()
.duration(1)
.each("start", function(){
d3.select(this)
.style("pointer-events", "none"); // Making the element unclickable, to prevent interrupting the transition.
})
.attr("cx", function(d) {return natScale.pos(d.ord);})
.attr("cy", 9*H/16)
.attr("r", function(d) {return natScale.rad(d.ord);})
.each("end", function(){
d3.select(this)
.style("pointer-events", null); // Restoring the element's clickability.
});
nat_labels.transition()
.duration(1)
.each("start", function(){
d3.select(this)
.style("pointer-events", "none"); // Making the element unclickable, to prevent interrupting the transition.
})
.attr("x", function(d) {return natScale.pos(d.ord);})
.attr("y", function(d) {return 9*H/16 - 1.05*natScale.rad(d.ord);})
.attr("font-size", function(d) {return natScale(d.ord)/6;}) // Picked this size because it looks good, nothing more
.each("end", function(){
d3.select(this)
.style("pointer-events", null); // Restoring the element's clickability.
});
// Making sure all the circles have all the appropriate event listeners.
d3.selectAll("circle.natural")
.on("mouseover", over_func)
.on("mouseout", out_func);
d3.selectAll(".natural")
.call(drag_thing);
// Except, of course, for the central one.
d3.selectAll(".natural")
.filter(function(d) {return d.ord === (num_nats - 1)/ 2;})
.on("mouseover", null)
.on("mouseout", null)
.on("click", null);
// Add a couple of listeners if nat_central.value is 1 in order to bring up the one-isn't-prime tooltip.
if (nat_central.value === 1) {
svg.selectAll("#prime-equation")
.on("mouseover", one_over_func)
.on("mouseout", one_out_func);
svg.selectAll("circle.natural")
.filter(function(d) {return d.value === 1;})
.on("mouseover", one_over_func)
.on("mouseout", one_out_func);
}
else {
one_out_func();
};
};
////////////////////
// Binding event listeners and actions to objects on the screen.
// Bind click and mouseover listeners to all the natural numbers currently on screen.
var mindrag = W/20;
var drags = [];
var dragstart = function(){
d3.selectAll(".natural")
.style("pointer-events", "none");
};
var dragrecord = function(){
drags.push(d3.event.x);
};
var dragmove = function(d, i){
var diff = drags.pop() - drags[0];
var dragbool = (Math.abs(diff) >= mindrag);
var rightbool = (diff > 0);
drags = [];
if (dragbool) {
if (rightbool){
new_num = Math.max(nat_central.value - num_nats + 1, 1);
new_key = d3.max(naturals.map(keys)) + 1;
new_num_obj = {key:new_key, ord:(num_nats - 1)/2, value:new_num};
clickfunc(new_num_obj);
}
else {
new_num = nat_central.value + num_nats - 1;
new_key = d3.max(naturals.map(keys)) + 1;
new_num_obj = {key:new_key, ord:(num_nats - 1)/2, value:new_num};
clickfunc(new_num_obj);
};
}
else{
if (d.value !== nat_central.value){
clickfunc(d);
}
else{
dummy_clickfunc(d);
};
};
};
var drag_thing = d3.behavior.drag()
.on("dragstart", dragstart)
.on("drag", dragrecord)
.on("dragend", dragmove);
d3.selectAll("circle.natural")
.on("mouseover", over_func)
.on("mouseout", out_func);
d3.selectAll(".natural")
.call(drag_thing);
// Except for the central one.
d3.selectAll("circle.natural")
.filter(function(d) {return d.value === nat_central.value;})
.on("mouseover", null)
.on("mouseout", null);
// Finally, put a few listeners on the tiny question mark in the lower-right corner,
// a couple for a few simple transitions and the Fundamental Theorem tooltip on hover,
// and one for opening the Wikipedia article in a new tab on click.
q.on("mouseover", function() {
// Base the tooltip's position on the location of the question mark.
var xPosition = 3*W/4;
var yPosition = 11*H/16;
//Update the tooltip position and value
d3.select("#theorem-tooltip")
.style("width", W/7)
.style("left", xPosition + "px")
.style("top", yPosition + "px");
d3.select("#theorem-tooltip")
.select("p")
.style("font-size", W/80 + "px");
//Show the tooltip
d3.select("#theorem-tooltip").classed("hidden", false);
// Make the question mark bigger!
// q.attr("fill", "blue");
q.attr("fill", "blue")
.attr("opacity", 1)
.transition().duration(200)
.attr("font-size", Math.min(W, H)/20*1.2);
})
.on("mouseout", function() {
//Hide the tooltip
d3.select("#theorem-tooltip").classed("hidden", true);
// Make the question mark smaller!
q.attr("fill", "black")
.attr("opacity", 0.2);
q.transition().duration(100)
.attr("font-size", Math.min(W, H)/20);
});
// Finally, bring up the tooltip when the label for the primes gets a mouseover, and take it away when the mouse goes off the label.
svg.selectAll("#prime-label")
.on("mouseover", function(d) {
// Base the tooltip's position on the location of the mouse.
var xPosition = d3.mouse(svg[0][0])[0];
var yPosition = d3.mouse(svg[0][0])[1];
var boxwidth = W/7;
//Update the tooltip position and value
d3.select("#prime-tooltip")
.style("width", boxwidth + "px")
.style("left", xPosition + "px")
.style("top", yPosition + "px")
.select("p")
.style("font-size", W/80 + "px");;
//Show the tooltip
d3.select("#prime-tooltip").classed("hidden", false);
})
.on("mouseout", function() {
//Hide the tooltip
d3.select("#prime-tooltip").classed("hidden", true);
});
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>The Fundamental Theorem of Arithmetic</title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="prime_style.css">
</head>
<body>
<div id="prime-tooltip" class="hidden">
<p>A number with exactly two factors, 1 and itself. There is an infinity of prime numbers.</p>
</div>
<div id="one-tooltip" class="hidden">
<p>the only factor of 1 is 1 &#8212; but prime numbers must have <em>exactly</em> two factors.</p>
</div>
<div id="theorem-tooltip" class="hidden">
<p> The fundamental theorem of arithmetic states that every whole number larger than one is either a <strong class="splash-emph">prime</strong> number or can be expressed as a <strong class="splash-emph">unique product</strong> of prime numbers.</p>
</div>
<script src="fund_theorem_script.js">
</script>
</body>
</html>
Raw
prime_style.css
body{
margin:0;
padding:0;
height: 100%;
width: 100%;
overflow: hidden;
}
line{
stroke: black;
stroke-width: 5;
opacity: 0.5;
}
circle.natural{
opacity: 1;
/* stroke: black;*/
/* stroke-width: 1;*/
/* fill: rgb(255, 220, 170); */
fill: rgb(220, 220, 220);
}
circle.prime{
opacity: 1;
fill: rgb(125, 125, 250);
/* stroke-width: 1;*/
/* stroke: black;*/
}
circle.hollow-prime{
opacity: .375;
fill: rgb(125, 125, 250);
/* stroke-width: 1;*/
/* stroke: black;*/
}
circle.old-hollow-prime{
opacity: .375;
fill: rgb(125, 125, 250);
/* stroke-width: 1;*/
/* stroke: black;*/
}
circle.prime-factor{
opacity: 1;
fill: rgb(125, 125, 250);
/* stroke-width: 1;*/
/* stroke: black;*/
pointer-events: none; /* This keeps the prime factors from obscuring a mouseover on the natural number underneath. */
}
circle.old-prime-factor{
opacity: 1;
fill: rgb(125, 125, 250);
/* stroke-width: 1;*/
/* stroke: black;*/
pointer-events: none; /* This keeps the prime factors from obscuring a mouseover on the natural number underneath. */
}
text.natural{
fill: black;
font-family: sans-serif;
text-anchor: middle;
}
text.prime{
fill: black;
font-family: sans-serif;
text-anchor: middle;
}
text.prime{
fill: black;
font-family: sans-serif;
text-anchor: middle;
}
#prime-label{
fill: black;
font-family: sans-serif;
text-anchor: middle;
opacity: 0.5;
}
#new-prime-label{
fill: black;
font-family: sans-serif;
text-anchor: middle;
opacity: 0.5;
}
text.hollow-prime{
opacity: 0.5;
fill: black;
font-family: sans-serif;
text-anchor: middle;
}
text.old-hollow-prime{
opacity: 0.5;
fill: black;
font-family: sans-serif;
text-anchor: middle;
}
text.prime-factor{
fill: black;
font-family: sans-serif;
text-anchor: middle;
pointer-events: none; /* This keeps the text on the prime factors from obscuring a mouseover on the natural number underneath. */
}
text.old-prime-factor{
fill: black;
font-family: sans-serif;
text-anchor: middle;
pointer-events: none; /* This keeps the text on the prime factors from obscuring a mouseover on the natural number underneath. */
}
#prime-equation{
fill: black;
font-family: sans-serif;
text-anchor: middle;
opacity: 0.5;
}
#old-prime-equation{
fill: black;
font-family: sans-serif;
text-anchor: middle;
opacity: 0.5;
pointer-events: none;
}
#prime-tooltip {
position: absolute;
width: 200px;
height: auto;
padding: 10px;
background-color: white;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
pointer-events: none;
opacity: 0.85;
}
.hidden {
display: none;
}
#prime-tooltip p {
margin: 0;
font-family: sans-serif;
font-size: 16px;
/* line-height: 20px;*/
}
#one-tooltip {
position: absolute;
width: 200px;
height: auto;
padding: 10px;
background-color: white;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
pointer-events: none;
opacity: 0.85;
}
#one-tooltip p {
margin: 0;
font-family: sans-serif;
font-size: 16px;
/* line-height: 20px;*/
}
#theorem-tooltip {
position: absolute;
width: 200px;
height: auto;
padding: 10px;
background-color: white;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
pointer-events: none;
opacity: 0.85;
}
#theorem-tooltip p {
margin: 0;
font-family: sans-serif;
font-size: 16px;
/* line-height: 20px;*/
}
#splash{
fill: white;
x: 0;
y: 0;
}
/* For the text. */
div.splash{
position: absolute;
opacity: 1.0;
font-family: sans-serif;
text-align: center;
font-size: 16px;
}
.splash-emph{
color: rgb(125, 125, 250);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment