twedl/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Each new term in the Fibonacci sequence is generated by adding the previous two terms. By starting with 1 and 2, the first 10 terms will be:
1, 2, 3, 5, 8, 13, 21, 34, 55, 89, ...
By considering the terms in the Fibonacci sequence whose values do not exceed four million, find the sum of the even-valued terms.
This time I'm going to try to highlight the algorithm more. I.e., type out the algorithm next to the diagram and highlight which part is working.
Looks like the style for complex animations is (see this block). Chained transitions! Global variables to iterate over. Then:

setTimeout(function () { ... })

Some initial transition (e.g., empty annulus->annulus).
At the end, call function.

Recurse.
Remove stuff too? another .each("end", function() {}) call?


Some resources: Project Euler Problem #2, and many examples from Mike Bostock.

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

.num {
    font: bold 40px monospace;
}

#sum {
    font: bold 40px monospace;
}

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

var margin = {top: 40, right: 40, bottom: 40, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var y = d3.scale.ordinal()
    .domain(d3.range(50))
    .rangePoints([0, height]);

var z = d3.scale.linear()
    .domain([10, 0])
    .range(["hsl(62,100%,90%)", "hsl(228,30%,20%)"])
    .interpolate(d3.interpolateHcl);

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 length;
var last=1,
    curr=2,
    temp,
    sum=[0];
var data = [last, curr];

    /*
    function uptransition(text) {
        var up = text.transition()
                .duration(500)
                .attr("y", function(d,i) {
                    return height*3/4 - y(text.data().length-i)*5;
                });
        return up;
    }*/
/*
    function entert(texty) {
        var ent = texty.enter().append("text")
            .attr("x", width/2)
            .attr("y", function(d,i) {
                return height*3/4 - y(texty.data().length-i)*5;
            })
            .text(function(d) { return d; });
        return ent;
    }
*/

function update() {
    var shifted = false;

    if (data.length > 6) {
        data.shift();
        shifted = true;
    }
    length=data.length;

// but not selectAll. need to identify it in a different way.
// selectAll with an id or something.


    if (curr%2==0) {
        sum[0]+=curr;
        //console.log(sum[0]);
    }

    var sumt = svg.selectAll("#sum")
            .data(sum, function(d) { return d;});

    sumt.exit().remove();
    sumt.enter().append("text")
            .transition()
            .duration(500)
            .attr("id", "sum")
            .attr("text-anchor", "end")
            .attr("x", width/3)
            .attr("y", height*2/3)
            .text(function(d) {
                console.log(d);
                return d;
            });


    var text = svg.selectAll(".num")
            .data(data, function(d) { return(d); } );

    text.enter().append("text").attr("class", "num");

/* Now. try to draw the code, right?
Nah. Take it easy. Put the even ones in red.
Then update a sum too.
*/

    if (!shifted) {
        text.style("opacity", function(d,i) {
                if (i==length-1) {
                    //console.log("d: " + d + " i:" + i);
                    return 0;
                }
                else {
                    return 1;
                }
            })
            .transition()
            .duration(200)
            .attr("x", width/2)
            .attr("y", function(d,i) {
              //  console.log(d);
                return height*3/4 - y(length-i)*5;
            })
            .each("end", function() {
                text.transition()
                    .duration(200)
                    .text(function(d) { return d; })
                    .style("opacity", 1)
                    .style("fill", function(d) {
                        if (d%2==0) {
                            return "red";
                        }
                        else {
                            return "black";
                        }
                    });
            });
    }
    else if (shifted) {
        text.exit()
            .transition()
            .duration(200)
            .style("opacity",0)
            .remove()
            .each("end", function() {
                text.style("opacity", function(d,i) {
                        if (i==length-1) {
                            return 0;
                        }
                        else {
                            return 1;
                        }
                    })
                    .transition()
                    .duration(200)
                    .attr("x", width/2)
                    .attr("y", function(d,i) {
                      //  console.log(d);
                        return height*3/4 - y(length-i)*5;
                    })
                    .each("end", function() {
                        text.transition()
                            .duration(200)
                            .text(function(d) { return d; })
                            .style("opacity", 1)
                            .style("fill", function(d) {
                                if (d%2==0) {
                                    return "red";
                                }
                                else {
                                    return "black";
                                }
                            });
//                        console.log("hi end");
                    });
            });
    }
    data.push(last+curr);
    temp = curr;
    curr = curr+last;
    last = temp;
    if (curr > 10e6) {
        console.log("hi");
        clearInterval(a);  // so weird. interrupt the interval from inside.
    }
}

update();
//    update();
//problem is here?
//update();

var a = setInterval(function() { update(); }, 1500);
//clearInterval(a);
</script>

## thumbnail.png

      
    Raw
  

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

	.num {
	font: bold 40px monospace;
	}

	#sum {
	font: bold 40px monospace;
	}

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

	var margin = {top: 40, right: 40, bottom: 40, left: 40},
	width = 960 - margin.left - margin.right,
	height = 500 - margin.top - margin.bottom;

	var y = d3.scale.ordinal()
	.domain(d3.range(50))
	.rangePoints([0, height]);

	var z = d3.scale.linear()
	.domain([10, 0])
	.range(["hsl(62,100%,90%)", "hsl(228,30%,20%)"])
	.interpolate(d3.interpolateHcl);

	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 length;
	var last=1,
	curr=2,
	temp,
	sum=[0];
	var data = [last, curr];

	/*
	function uptransition(text) {
	var up = text.transition()
	.duration(500)
	.attr("y", function(d,i) {
	return height3/4 - y(text.data().length-i)5;
	});
	return up;
	}*/
	/*
	function entert(texty) {
	var ent = texty.enter().append("text")
	.attr("x", width/2)
	.attr("y", function(d,i) {
	return height3/4 - y(texty.data().length-i)5;
	})
	.text(function(d) { return d; });
	return ent;
	}
	*/

	function update() {
	var shifted = false;

	if (data.length > 6) {
	data.shift();
	shifted = true;
	}
	length=data.length;

	// but not selectAll. need to identify it in a different way.
	// selectAll with an id or something.


	if (curr%2==0) {
	sum[0]+=curr;
	//console.log(sum[0]);
	}

	var sumt = svg.selectAll("#sum")
	.data(sum, function(d) { return d;});

	sumt.exit().remove();
	sumt.enter().append("text")
	.transition()
	.duration(500)
	.attr("id", "sum")
	.attr("text-anchor", "end")
	.attr("x", width/3)
	.attr("y", height*2/3)
	.text(function(d) {
	console.log(d);
	return d;
	});




	var text = svg.selectAll(".num")
	.data(data, function(d) { return(d); } );

	text.enter().append("text").attr("class", "num");

	/* Now. try to draw the code, right?
	Nah. Take it easy. Put the even ones in red.
	Then update a sum too.
	*/

	if (!shifted) {
	text.style("opacity", function(d,i) {
	if (i==length-1) {
	//console.log("d: " + d + " i:" + i);
	return 0;
	}
	else {
	return 1;
	}
	})
	.transition()
	.duration(200)
	.attr("x", width/2)
	.attr("y", function(d,i) {
	// console.log(d);
	return height3/4 - y(length-i)5;
	})
	.each("end", function() {
	text.transition()
	.duration(200)
	.text(function(d) { return d; })
	.style("opacity", 1)
	.style("fill", function(d) {
	if (d%2==0) {
	return "red";
	}
	else {
	return "black";
	}
	});
	});
	}
	else if (shifted) {
	text.exit()
	.transition()
	.duration(200)
	.style("opacity",0)
	.remove()
	.each("end", function() {
	text.style("opacity", function(d,i) {
	if (i==length-1) {
	return 0;
	}
	else {
	return 1;
	}
	})
	.transition()
	.duration(200)
	.attr("x", width/2)
	.attr("y", function(d,i) {
	// console.log(d);
	return height3/4 - y(length-i)5;
	})
	.each("end", function() {
	text.transition()
	.duration(200)
	.text(function(d) { return d; })
	.style("opacity", 1)
	.style("fill", function(d) {
	if (d%2==0) {
	return "red";
	}
	else {
	return "black";
	}
	});
	// console.log("hi end");
	});
	});
	}
	data.push(last+curr);
	temp = curr;
	curr = curr+last;
	last = temp;
	if (curr > 10e6) {
	console.log("hi");
	clearInterval(a); // so weird. interrupt the interval from inside.
	}
	}

	update();
	// update();
	//problem is here?
	//update();

	var a = setInterval(function() { update(); }, 1500);
	//clearInterval(a);
	</script>