11x Series

11-x-series.js

var data = [{"type": "input one", "value": [1,1]},
			{"type": "input two", "value": [1,1]},
			{"type": "intermezzo one", "value": [1,1]},
			{"type": "intermezzo one", "value": [1,1]},
			{"type": "result one", "value": [1,2,1]},
			{"type": "input three", "value": [1,1,1]},
			{"type": "intermezzo two", "value": [1,2,1]},
			{"type": "intermezzo two", "value": [1,2,1]},
			{"type": "intermezzo two", "value": [1,2,1]},
			{"type": "result two", "value": [1,3,4,3,1]},
			{"type": "input four", "value": [1,1,1,1,1]},
			{"type": "intermezzo three", "value": [1,3,4,3,1]},
			{"type": "intermezzo three", "value": [1,3,4,3,1]},
			{"type": "intermezzo three", "value": [1,3,4,3,1]},
			{"type": "intermezzo three", "value": [1,3,4,3,1]},
			{"type": "intermezzo three", "value": [1,3,4,3,1]},
			{"type": "result three", "value": [1,4,9,2,3,1,8,4,1]}];
//setup
var w = 700, h = 1000, padding = 20, offset = 12, radius = 5;

var svg = d3.select('#math')
			.append("svg")
			.attr("width", w + padding * 2)
			.attr("height", h + padding * 2);

//bind the array of arrays to the groups (one for each row of the visualization)
var g = svg.selectAll("g")
			.data(data)
			.enter()
			.append("g")
			.attr("class", function(d) { return d.type; });

//shift the rows to the left to align accordingly
for (var i=1; i < 7; i++) {
	svg.selectAll("g.intermezzo." + numberToNumeric(i))
		.attr("transform", function(d, i) { return "translate(" + (-i * offset) + ",0)"; })
}


//bind the individual elements of each individual array to each text element

var circles = g.selectAll("circle")
		.data(function(d, i) { return d.value; })
		.enter()
		.append("circle")
		.attr("r","1")
		.attr("cx",0)
		.attr("cy",0)
	  	.attr("fill", function(d, i) { return colorPicker(d); })
		.attr("stroke", "none");

circles.transition()
	   .duration(250)
	   .delay(function(d, i) { return i * 100; })
	   .ease("easeInOutBack")
	   .attr("r", radius)
	   .attr("cx", function(d, i) { return w - offset * i; })
	   .attr("cy", offset);
	   
g.transition()
	.duration(1000)
	.delay(function(d,i) { return i * 10; })
	.attr("transform", function(d, i) { 
		if (d3.select(this).attr("transform")) {
			return d3.select(this).attr("transform").replace("0)",( i * offset) + ")");
		} else {
			return "translate(0, " + (i * offset) + ")";
		}
	});
//.attr("class",function(d, i) { return classAssign(i); })
circles.on("mouseover", function(d, i) {
	d3.select(this).attr("r", radius * 1.5);
})
circles.on("mouseout", function(d, i) {
	d3.select(this)
	  .transition()
	  .attr("r", radius);
})

function appendText() {
	if (addText.checked === true) {


		var text = g.selectAll("text")
					.data(function(d, i) { return d.value; })
					.enter()
					.append("text");

		text.text(function(d) { return d; })
			.attr("x", function(d, i) { return w - offset * i; })
			.attr("y", offset)
			.attr("opacity",1)
			.attr("text-anchor", "middle")
			//.attr("style", "dominant-baseline: central;")	

		circles.transition()
			   .duration(1000)
			   .delay(function(d, i) { return i * 20; })
			   .attr("opacity",0.1)
			   .attr("cx", w + offset)
			   //.attr("cy",function(d, i) { return 0 /* - g[0][i].getCTM().f;*/ })
			   //.attr("r", function(d, i) { return i ; })
	} else {
		circles.transition()
			   .attr("opacity",1)
			   .attr("cx", function(d, i) { return w - offset * i; })
			   .attr("cy", offset)
			   .attr("r", radius)

		var text = g.selectAll("text")

		text.transition()
		 .duration(500)
		 .attr("opacity",0)
		 .each("end", function(d, i) { d3.select(this).remove(); })

	}		
}

d3.select("#addText").on("change",function() {
	appendText();
});

function numberToNumeric(number) {
	switch(number) {
	case 0:
		return "zero";
	case 1:
		return "one";
	case 2:
		return "two";
	case 3:
		return "three";
	case 4:
		return "four";
	case 5:
		return "five";
	case 6:
		return "six";
	case 7:
		return "seven";
	case 8:
		return "eight";
	case 9:
		return "nine";
	}
}

function colorPicker(number) {
	switch(number) {
		case 0:
			return "#FFFFFF";
		case 1:
			return "#65cace";
		case 2:
			return "#b52e1d";
		case 3:
			return "#d583c6";
		case 4:
			return "#22826a";
		case 5:
			return "#899295";
		case 6:
			return "#35429c";
		case 7:
			return "#ffd4bb";
		case 8:
			return "#9b3996";
		case 9:
			return "#b4eef0";
	}
}

index.html

<!DOCTYPE html>
<html>
<head id="header">
	<title>11x</title>
	<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
	<link rel="stylesheet" href="css/style.css">
</head>

<body>
<div id="math">
	<div id="eq-def">
		<p>A tribute to Stefanie Posavec's awesome 11x series.</p>
		<p>11 x 11 x 111 x 11111</p>
		<label class="checkbox" value="">
			<input type="checkbox" name="addText" value="showText" id="addText"/>
			Check to show numbers
		</label>
	</div>
</div>
</body>
	<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
	<script type="text/javascript" src="scripts/11-x-series.js"></script>


</html>

style.css

html,
body {
  margin: 0;
  padding: 0;
  background-color: white;
}

#main h1 {
	text-align: center;
	margin-bottom: 20px;	
}


#math {

}

#multiplicands form {
	width: 325px;
	position: relative;
	text-align: right;
}

#math span {
	position: relative;
	width: 25px;
	height: 25px;
	padding: 0px 0px;
	margin: 0px 0px;
	display: inline-block;
	image-rendering:optimizeSpeed;             /* Legal fallback                 */
	image-rendering:-moz-crisp-edges;          /* Firefox                        */
	image-rendering:-o-crisp-edges;            /* Opera                          */
	image-rendering:-webkit-optimize-contrast; /* Chrome (and eventually Safari) */
	image-rendering:optimize-contrast;         /* CSS3 Proposed                  */
	-ms-interpolation-mode:nearest-neighbor;   /* IE8+                           */
}

.equation {
	border-bottom: 1px #ccc solid;
	padding: 5px 0px;
	text-align: right;
	float: right;
	clear: right;
}

g text {
	font-weight: normal;
	font-size: 14px;
	opacity: 100;
	dominant-baseline: central;
	fill: black;
	pointer-events: none;
}

g text:hover {
	opacity: 100;
}

g circle {
	-moz-transition: all 0.3s;
   	-o-transition: all 0.3s;
   	-webkit-transition: all 0.3s;
   	transition: all 0.3s;
}

g circle:hover {
	
}