syntagmatic/index.html

## index.html
<meta charset="utf-8">
<body></body>
<script src="http://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>

## poem
A Boat beneath a Sunny Sky
Lewis Carroll

A boat beneath a sunny sky,
Lingering onward dreamily
In an evening of July --
Children three that nestle near,
Eager eye and willing ear,
Pleased a simple tale to hear --
Long has paled that sunny sky:
Echoes fade and memories die:
Autumn frosts have slain July.
Still she haunts me, phantomwise,
Alice moving under skies
Never seen by waking eyes.
Children yet, the tale to hear,
Eager eye and willing ear,
Lovingly shall nestle near.
In a Wonderland they lie,
Dreaming as the days go by,
Dreaming as the summers die:
Ever drifting down the stream --
Lingering in the golden dream --
Life, what is it but a dream?
	<meta charset="utf-8">
	<body></body>
	<script src="http://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 2currentLine(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 2currentLine(i-currentLine); })
	};
	});
	</script>
	<style>
	svg {
	height: 500px;
	width: 960px;
	}
	svg text {
	font-size: 28px;
	}
	</style>
	A Boat beneath a Sunny Sky
	Lewis Carroll

	A boat beneath a sunny sky,
	Lingering onward dreamily
	In an evening of July --
	Children three that nestle near,
	Eager eye and willing ear,
	Pleased a simple tale to hear --
	Long has paled that sunny sky:
	Echoes fade and memories die:
	Autumn frosts have slain July.
	Still she haunts me, phantomwise,
	Alice moving under skies
	Never seen by waking eyes.
	Children yet, the tale to hear,
	Eager eye and willing ear,
	Lovingly shall nestle near.
	In a Wonderland they lie,
	Dreaming as the days go by,
	Dreaming as the summers die:
	Ever drifting down the stream --
	Lingering in the golden dream --
	Life, what is it but a dream?