JohnDelacour/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
	<meta http-equiv="Pragma" content="no-cache" />
	<meta http-equiv="Expires" content="0" />
	<title>Rotating using only the angle parameter</title>
	<link type="text/css" href="rotation_using_group.css" rel="stylesheet" />
	<script src="http://d3js.org/d3.v3.min.js"></script>
</head>
<body>
<script src="rotation_using_group.js">
</script>
<div id="text_tip">
	Click on the background to rotate a line about a random point on its length.<br /><br />
	<strong>NB.</strong> Doesn’t work in Firefox !
</div>
</body>
</html>

## rotation_using_group.css
/* by id */
#g0 {
	stroke-width: 0.2;
	stroke: gold;
	fill: #402;
}
#background {
	fill:#402;
}
#centre {
    fill: none;
    stroke: #b00;
    stroke-width: 0.2;
}

#seesaw {
	stroke-width: 0.4;
}
#text_tip {
	font: 11pt helvetica;
	color: gold;
	position:absolute;
	left: 35px;
	top: 30px;
	max-width:20em;
}
/* by element */
body {
	background-color: #aaa;
}

/* by class */
.svgtext {
	fill: #206;
	stroke: none;
	font: 4pt helvetica, sans-serif;
}

## rotation_using_group.js
/*
JD 12 May 2013
*/
// < • P R E P A R A T O R Y  S T U F F • >
var std_screen = 96, // pixels per inch
px2mm = function(mm) {return mm * std_screen / 25.4},
w = 254, h = 132.3, scale = px2mm(1),
vflip_all = " matrix(1 0 0 -1 0 " + h + ") ",
vflip_text = " matrix(1 0 0 -1 0 "+ h + ") ",
svg = d3.select("body").append("svg")
    .attr({"width": w * scale, "height": h * scale}),
background = svg.append("rect") .attr("id", "background")
    .attr ({"y": 1 * scale, "width": scale * (w - 1) , "height": scale * (h-1)}),
g0 = svg.append("g") .attr("id", "g0")
  .attr("transform", "scale(" + scale + ") " + vflip_all);
 // • E N D  O F  P R E P A R A T O R Y  S T U F F • >


// ——————————◊——————————— S E E S A W  S T U F F ———————————————◊——————

var run = function(tim) {

var seesaw_length = 110, seesaw_centre = Math.random() * seesaw_length;

var g_seesaw = g0.append("g") .attr("id", "g_seesaw")
	.attr("transform", "translate(" + (w/2) + " " + ( 1/2 * h) + ")")

var seesaw = g_seesaw.append("path") .attr("id", "seesaw")
	.attr("transform", "rotate(35)")
	.attr("d",
        "M " + (-seesaw_centre) + " 0, h " +
        (seesaw_centre - 2) + "a 2 2,0 0 0,4 0, \
        a 2 2,0 1 0,-4 0, m 4 0, h " +
        (seesaw_length - seesaw_centre - 4) + " 0")
	.transition()
		.ease("linear")
		.duration(tim)
		.attr("transform", "rotate(-35)")
this;
}

background .on("click", function() {seesaw.remove(); run(1700); this} );
run(6000);
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
	<meta http-equiv="Pragma" content="no-cache" />
	<meta http-equiv="Expires" content="0" />
	<title>Rotating using only the angle parameter</title>
	<link type="text/css" href="rotation_using_group.css" rel="stylesheet" />
	<script src="http://d3js.org/d3.v3.min.js"></script>
	</head>
	<body>
	<script src="rotation_using_group.js">
	</script>
	<div id="text_tip">
	Click on the background to rotate a line about a random point on its length.<br /><br />
	<strong>NB.</strong> Doesn’t work in Firefox !
	</div>
	</body>
	</html>
	/* by id */
	#g0 {
	stroke-width: 0.2;
	stroke: gold;
	fill: #402;
	}
	#background {
	fill:#402;
	}
	#centre {
	fill: none;
	stroke: #b00;
	stroke-width: 0.2;
	}

	#seesaw {
	stroke-width: 0.4;
	}
	#text_tip {
	font: 11pt helvetica;
	color: gold;
	position:absolute;
	left: 35px;
	top: 30px;
	max-width:20em;
	}
	/* by element */
	body {
	background-color: #aaa;
	}

	/* by class */
	.svgtext {
	fill: #206;
	stroke: none;
	font: 4pt helvetica, sans-serif;
	}
	/*
	JD 12 May 2013
	*/
	// < • P R E P A R A T O R Y S T U F F • >
	var std_screen = 96, // pixels per inch
	px2mm = function(mm) {return mm * std_screen / 25.4},
	w = 254, h = 132.3, scale = px2mm(1),
	vflip_all = " matrix(1 0 0 -1 0 " + h + ") ",
	vflip_text = " matrix(1 0 0 -1 0 "+ h + ") ",
	svg = d3.select("body").append("svg")
	.attr({"width": w * scale, "height": h * scale}),
	background = svg.append("rect") .attr("id", "background")
	.attr ({"y": 1 * scale, "width": scale * (w - 1) , "height": scale * (h-1)}),
	g0 = svg.append("g") .attr("id", "g0")
	.attr("transform", "scale(" + scale + ") " + vflip_all);
	// • E N D O F P R E P A R A T O R Y S T U F F • >


	// ——————————◊——————————— S E E S A W S T U F F ———————————————◊——————

	var run = function(tim) {

	var seesaw_length = 110, seesaw_centre = Math.random() * seesaw_length;

	var g_seesaw = g0.append("g") .attr("id", "g_seesaw")
	.attr("transform", "translate(" + (w/2) + " " + ( 1/2 * h) + ")")

	var seesaw = g_seesaw.append("path") .attr("id", "seesaw")
	.attr("transform", "rotate(35)")
	.attr("d",
	"M " + (-seesaw_centre) + " 0, h " +
	(seesaw_centre - 2) + "a 2 2,0 0 0,4 0, \
	a 2 2,0 1 0,-4 0, m 4 0, h " +
	(seesaw_length - seesaw_centre - 4) + " 0")
	.transition()
	.ease("linear")
	.duration(tim)
	.attr("transform", "rotate(-35)")
	this;
	}

	background .on("click", function() {seesaw.remove(); run(1700); this} );
	run(6000);