D3 Examples - A Boat Beneath a Sunny Sky

xxxxxxxxxx
 
<meta charset="utf-8">
<body></body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>
var currentLine = 0;
​
var svg = d3.select("body")
  .append("svg")
  .append("g")
  .attr("transform", "translate(450,350)");
​
d3.text("poem", function(poem) {
  var data = poem.split("\n");
  var lines = svg.selectAll("text")
    .data(data)
    .enter().append("text")
    .text(String)
    .attr("x", function(d,i) { return 2*currentLine*(i-currentLine); })
    .attr("y", function(d,i) { return 50*(i+1); })
    .style("opacity", function(d,i) { return 1/Math.pow((i+1),1.5); })
    .attr("transform", function(d,i) { return "rotate(" + Math.pow(currentLine-i,2) + ")" })
​
  setInterval(rollText, 1350);
​
  function rollText() {
    currentLine++;
​
    svg.transition()
       .duration(1000)
       .ease("quad")
       .attr("transform", "translate(450," + (350-(50*currentLine)) + ")");
​
     lines.transition()
       .duration(1000)
       .ease("quad")
       .style("opacity", function(d,i) { return 1/Math.pow((Math.abs(currentLine-i)+1),1.5); })
       .attr("transform", function(d,i) { return "rotate(" + Math.pow(currentLine-i,2) + ")" })
       .attr("x", function(d,i) { return 2*currentLine*(i-currentLine); })
  };
});
</script>
<style>
svg {
  height: 500px;
  width: 960px;
}
svg text {
  font-size: 28px;
}
</style>
​
    